<script lang="ts" setup>
import { bindEbikeAPI } from '@/api/operator'
import { useAppStore, useOperatorStore } from '@/store'
import { scanCode } from '@/utils/tools'

definePage({
  style: {
    navigationBarTitleText: '整车绑定',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const isSubmit = ref(false)
const appStore = useAppStore()
const operatorStore = useOperatorStore()
const ecuBrandList = ref([])// 中控品牌列表
const operatorAllList = ref<any>([])
const form = ref<any>(null)
const formData = reactive<any>({
  operatorId: '',
  remarks: '',
  bikeCode: '',
  ecuCode: '',
  batteryCode: '',
  hasHelme: false,
})
const radiolist = ref([
  { name: true, label: '是' },
  { name: false, label: '否' },
])
const labelStyle = ref({
  'font-size': '28rpx',
  'color': '#333',
})
const rules = {
  // operatorId: {
  //   type: 'string',
  //   required: true,
  //   message: '请选择运营商',
  //   trigger: ['change', 'blur'],
  // },
  bikeCode: {
    type: 'string',
    required: true,
    message: '请输入车辆编号',
    trigger: ['change', 'blur'],
  },
  ecuCode: {
    type: 'string',
    required: true,
    message: '请输入中控SN',
    trigger: ['change', 'blur'],
  },
  // batteryCode: {
  //   type: 'string',
  //   required: true,
  //   message: '请输入电池编号',
  //   trigger: ['change', 'blur'],
  // },
  hasHelme: {
    type: 'boolean',
    required: true,
    message: '请选择是否包含头盔',
    trigger: ['change', 'blur'],
  },
}

// 扫码获取车辆编号
function codeScan(type: string) {
  scanCode({
    isSN: type === 'ecuCode',
    success: (res: any) => {
      console.log(res)

      console.log(res, 'codeScan')

      switch (type) {
        case 'bikeCode':
          formData.bikeCode = res.code
          break
        case 'ecuCode':
          formData.ecuCode = res.SN
          break
        case 'batteryCode':
          formData.batteryCode = res.code
          break
        default:
          break
      }
    },
    fail: () => {
      uni.showToast({
        title: '扫码失败',
        icon: 'none',
      })
    },
  })
}

// 获取运营商列表
async function getOperatorList() {
  operatorAllList.value = await operatorStore.getOperatorList(true)
}
// 获取中控品牌列表
async function getEcuBrandList() {
  const dic = appStore.getDictByCode('ecuBrandCode')
  ecuBrandList.value = dic.map((item: any) => ({
    text: item.dicValueName,
    value: item.dicValue,
  }))
}

// 初始化表单数据
function initForm() {
  formData.operatorId = ''
  formData.bikeCode = ''
  formData.ecuCode = ''
  formData.batteryCode = ''
  formData.hasHelme = false
  formData.remarks = ''
  form.value?.resetFields()
}

async function submit() {
  try {
    isSubmit.value = true
    const status = await form.value.validate()

    if (status) {
      const res = await bindEbikeAPI({
        operatorId: formData.operatorId,
        bikeCode: formData.bikeCode,
        ecuCode: formData.ecuCode,
        batteryCode: formData.batteryCode,
        hasHelme: formData.hasHelme,
        remarks: formData.remarks,
      })

      uni.showToast({
        title: '绑定成功',
        icon: 'success',
      })

      initForm()
      isSubmit.value = false
    }
  }
  catch (err) {
    console.log(err)
    isSubmit.value = false
  }
}

getEcuBrandList()
getOperatorList()
</script>

<template>
  <view class="container">
    <view class="bg" />
    <view class="container_inner">
      <uv-form ref="form" label-position="left" :model="formData" :rules="rules" label-width="80" :label-style="labelStyle">
        <!-- 车辆 -->
        <uni-section title="车辆" type="line">
          <uv-form-item label="车辆编号" prop="bikeCode" required>
            <uv-input v-model="formData.bikeCode" placeholder="请扫描或输入车辆编号" border="surround">
              <template #suffix>
                <uv-icon name="scan" color="#cbcad0" size="28" @click="codeScan('bikeCode')" />
              </template>
            </uv-input>
          </uv-form-item>
          <!-- <uv-form-item label="运营商" prop="operatorId" required>
            <uni-data-select
              v-model="formData.operatorId"
              :localdata="operatorAllList"
              placeholder="请选择运营商"
              clear
            />
          </uv-form-item> -->
        </uni-section>
        <!-- 车辆 -->
        <uni-section title="中控" type="line">
          <uv-form-item label="中控SN" prop="ecuCode" required>
            <uv-input v-model="formData.ecuCode" placeholder="请扫描或输入中控SN" border="surround">
              <template #suffix>
                <uv-icon name="scan" color="#cbcad0" size="28" @click="codeScan('ecuCode')" />
              </template>
            </uv-input>
          </uv-form-item>
        </uni-section>
        <!-- 电池 -->
        <uni-section title="电池" type="line">
          <uv-form-item label="电池" prop="batteryCode">
            <uv-input v-model="formData.batteryCode" placeholder="请扫描或输入电池" border="surround">
              <template #suffix>
                <uv-icon name="scan" color="#cbcad0" size="28" @click="codeScan('batteryCode')" />
              </template>
            </uv-input>
          </uv-form-item>
        </uni-section>
        <!-- 其他 -->
        <uni-section title="其他" type="line">
          <uv-form-item label="包含头盔" prop="remarks" required>
            <uv-radio-group v-model="formData.hasHelme">
              <uv-radio
                v-for="(item, index) in radiolist"
                :key="index"
                :custom-style="{ margin: '8px' }"
                :label="item.label"
                :name="item.name"
              />
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="备注" prop="remarks">
            <uv-textarea v-model="formData.remarks" placeholder="请输入内容" />
          </uv-form-item>
        </uni-section>
      </uv-form>
    </view>
    <!-- 底部按钮 -->
    <view class="submit_bar">
      <uv-button type="primary" text="绑定入库" :loading="isSubmit" @click="submit" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;

  .bg {
    position: fixed;
    z-index: -1;
    width: 100%;
    // background: #f3f3f3;
    background-color: white;
    height: 100%;
  }

  .container_inner {
    padding: 30rpx;
  }

  .submit_bar {
    position: fixed;
    bottom: 50rpx;
    width: calc(100% - 60rpx);
    padding: 30rpx;
  }
}
</style>
