<script lang="ts" setup>
import { batchAddInventoryAPI } from '@/api/operator'
import { useAppStore, useOperatorStore, useScanStore } from '@/store'

definePage({
  style: {
    navigationBarTitleText: '新增中控部件',
    navigationBarBackgroundColor: '#1488f5',
    navigationBarTextStyle: 'white',
  },
})

const loading = ref(false)
const isSubmit = ref(false)
const operatorStore = useOperatorStore()
const appStore = useAppStore()
const scanStore = useScanStore()
const operatorAllList = ref<any>([])
const tableData = ref<any>(scanStore.scanCarNumberList)
const ecuBrandList = ref([])// 中控品牌列表
const form = ref<any>(null)
const formData = reactive({
  operatorId: '',
  ecuBrand: '',
  ecuCodes: [],
  ecuSns: [],
})
const rules = {
  operatorId: {
    type: 'string',
    required: true,
    message: '请选择运营商',
    trigger: ['change', 'blur'],
  },
  ecuBrand: {
    type: 'string',
    required: true,
    message: '请选择中控品牌',
    trigger: ['change', 'blur'],
  },
}

function handleScan() {
  uni.navigateTo({
    url: '/pages-sub/common/scanCodeByCar',
  })
}

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

// 初始化表单数据
function initForm() {
  formData.operatorId = ''
  formData.ecuBrand = ''
  formData.ecuCodes = []
  formData.ecuSns = []
  tableData.value = []
  scanStore.clearScanCarNumber()
}

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

    if (status) {
      const res = await batchAddInventoryAPI({
        operatorId: formData.operatorId,
        ecuBrand: formData.ecuBrand,
        ecuCodes: tableData.value.map((item: any) => item.IMEI),
        ecuSns: tableData.value.map((item: any) => item.SN),
      })

      uni.showToast({
        title: '新增成功',
        icon: 'success',
      })
      initForm()
      isSubmit.value = false
    }
  }
  catch (err) {
    console.log(err)
    isSubmit.value = false
  }
}

initForm()
getOperatorList()
getEcuBrandList()
</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="100">
        <uv-form-item label="运营商" prop="operatorId" required>
          <uni-data-select
            v-model="formData.operatorId"
            :localdata="operatorAllList"
            placeholder="请选择运营商"
            clear
          />
        </uv-form-item>
        <uv-form-item label="品牌" prop="ecuBrand" required>
          <uni-data-select
            v-model="formData.ecuBrand"
            :localdata="ecuBrandList"
            placeholder="请选择品牌"
            clear
          />
        </uv-form-item>
        <uv-form-item label="车辆编号">
          <view class="d-flex align-center" @click="handleScan">
            <uv-icon name="scan" size="30" />
          </view>
        </uv-form-item>
      </uv-form>
      <uni-table ref="table" :loading="loading" stripe border empty-text="暂无更多数据">
        <uni-tr>
          <uni-th align="center" width="150">
            IMEI
          </uni-th>
          <uni-th align="center" width="150">
            SN
          </uni-th>
          <!-- <uni-th align="center" width="100">
            设置
          </uni-th> -->
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">
            {{ item.IMEI }}
          </uni-td>
          <uni-td align="center">
            {{ item.SN }}
          </uni-td>
          <!-- <uni-td>
            <view class="uni-group">
              <button class="uni-button" size="mini" type="warn">
                删除
              </button>
            </view>
          </uni-td> -->
        </uni-tr>
      </uni-table>
    </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;
    height: 100%;
  }

  .container_inner {
    padding: 30rpx;
  }

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