<script lang="ts" setup>
import bikeCodeScan from '@/components/bikeCodeScan/bikeCodeScan.vue'
import { useAppStore } from '@/store'
import { deepClone } from '@/utils'
import { menuButtonBoundingClientRect, systemInfo } from '@/utils/systemInfo'

const emits = defineEmits(['close', 'comfirm'])
const appStore = useAppStore()
const formData = reactive({
  bikeCode: '',
  acceptOrder: false,
  bikeStatus: null,
})
const bikeStatusList = ref([])
const acceptOrderList = ref([
  {
    label: '全部',
    value: null,
  },
  {
    label: '自己接单',
    value: true,
  },
])

function handleReset() {
  formData.bikeCode = ''
  formData.bikeStatus = null
  formData.acceptOrder = false
}

function onScanByBatteryCode(code: string) {
  formData.bikeCode = code
}

function handleBikeStatusClick(item: any) {
  formData.bikeStatus = item.dicValue
}

function handleAcceptOrderClick(item: any) {
  formData.acceptOrder = item.value
}

function handleBack() {
  emits('close')
}

function init(query: any) {
  const { bikeCode, acceptOrder, bikeStatus } = query
  formData.bikeCode = bikeCode
  formData.bikeStatus = bikeStatus
  formData.acceptOrder = acceptOrder
}

function handleComfirm() {
  const data = deepClone(formData)
  emits('comfirm', data)
}

onMounted(() => {
  const list = appStore.getDictByCode('BikeUsageStatus')
  bikeStatusList.value = list.map((item: any) => ({
    dicId: item.dicId,
    dicValueName: item.dicValueName,
    dicValue: Number(item.dicValue),
  }))
  bikeStatusList.value.unshift({
    dicId: '-1',
    dicValueName: '全部',
    dicValue: null,
  })
})

defineExpose({
  init,
})
</script>

<template>
  <view
    class="container"
    :style="{
      width: `${systemInfo.windowWidth - 80}px`,
      height: `${systemInfo.windowHeight}px`,
    }"
  >
    <view
      :style="{
        height: `${(menuButtonBoundingClientRect.height + menuButtonBoundingClientRect.top)}px`,
      }"
      class="header"
    >
      <view class="align-center flex-row" @click="handleBack">
        <uv-icon name="arrow-left" color="#222222" size="22" />
        <text class="text">
          筛选
        </text>
      </view>
    </view>
    <scroll-view
      class="content"
      scroll-y
      :style="{
        height: `${systemInfo.windowHeight - menuButtonBoundingClientRect.height - menuButtonBoundingClientRect.top - 80}px`,
      }"
    >
      <view class="inner">
        <view class="module">
          <view class="title">
            车辆编号
          </view>
          <bikeCodeScan v-model="formData.bikeCode" placeholder="请输入或扫码" :clearable="true" @scan-change="onScanByBatteryCode" />
        </view>
        <view class="module">
          <view class="title">
            车辆状态
          </view>
          <view class="grid-option">
            <view
              v-for="(item) in bikeStatusList"
              :key="item.dicId"
              :class="{ active: formData.bikeStatus === item.dicValue }"
              class="grid-option-item"
              @click="handleBikeStatusClick(item)"
            >
              {{ item.dicValueName }}
            </view>
          </view>
        </view>
        <view class="module">
          <view class="title">
            接单状态
          </view>
          <view class="grid-option">
            <view
              v-for="(item, index) in acceptOrderList"
              :key="index"
              :class="{ active: formData.acceptOrder === item.value }"
              class="grid-option-item"
              @click="handleAcceptOrderClick(item)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <uv-button
        text="重置"
        :custom-style="{
          background: `#FFFFFF`,
          borderRadius: '16rpx',
          border: '1px solid rgba(223,223,223,1)',
          height: '100rpx',
          width: '220rpx',
        }"
        :custom-text-style="{
          fontSize: '32rpx',
          color: '#666666',
          marginLeft: '8rpx',
        }"
        @click="handleReset"
      />
      <uv-button
        type="primary"
        text="确定"
        :custom-style="{
          backgroundImage: `linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%)`,
          borderRadius: '16rpx',
          height: '100rpx',
          width: '220rpx',
        }"
        :custom-text-style="{
          fontSize: '32rpx',
          marginLeft: '8rpx',
        }"
        @click="handleComfirm"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  .header {
    padding-left: 20rpx;
    width: calc(100% - 20rpx);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .text {
      font-family: SourceHanSansCN-Medium;
      font-size: 34rpx;
      color: #222222;
      letter-spacing: 0;
      font-weight: 500;
      margin-left: 10rpx;
    }
  }

  .content {
    .inner {
      padding: 20rpx;
      width: calc(100% - 40rpx);
      padding-top: 30rpx;

      .module {
        width: 100%;
        margin-bottom: 50rpx;

        .title {
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #333333;
          line-height: 24px;
          font-weight: 400;
        }

        .grid-option {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 28rpx 27rpx;
          padding: 20rpx;

          .grid-option-item {
            padding: 18rpx 0;
            text-align: center;
            background: #ffffff;
            border: 1px solid rgba(153, 153, 153, 1);
            box-shadow: 0px 1px 2px 0px rgba(184, 200, 224, 0.22);
            border-radius: 10rpx;
            font-family: PingFangSC-Regular;
            font-size: 26rpx;
            color: #999999;
            text-align: center;
            font-weight: 400;
            transition: all 0.2s;

            &.active {
              background-color: #007aff; /* 微信小程序经典蓝，可替换为自己的主色 */
              color: #ffffff;
              border-color: #007aff;
            }
          }
        }
      }
    }
  }

  .footer {
    padding: 20rpx;
    width: calc(100% - 40rpx);
    display: flex;
    justify-content: space-around;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
  }
}
</style>
