<!-- 扫描二维码操作弹窗 -->
<script setup lang="ts" name="BarCodeBind">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import scanImg from '@/assets/images/scan.png'
import { getInfoDetail } from '@/api/eqpt/device/info'

// 弹窗显示
const emits = defineEmits(['confirm'])
const dialogVisible = ref(false)
const scanStatus = ref('0')
const initDialog = () => {
  scanStatus.value = '1'
  dialogVisible.value = true
}

// 扫描到的列表
const list = ref<any>([])
// 多选列表
const checkoutList = ref([])
// 多选
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}
// 扫描操作
function onScanning(code: string) {
  scanStatus.value = '2'
  console.log(code, '获取到的设备的id')// 获取到的条形码
  ElMessage.success('扫描成功,获取设备信息中')
  if ((code || '').trim()) {
    getInfoDetail({ equipmentId: (code || '').trim() }).then((res) => {
      if ((res.data || {}).equipmentName) {
        scanStatus.value = '2'
        if (!list.value.filter((c: any) => c.id === (res.data || {}).id).length) {
          list.value.push({
            id: res.data.id,
            equipmentNo: res.data.equipmentNo,
            equipmentName: res.data.equipmentName,
            manufacturer: res.data.manufacturer,
            manufactureNo: res.data.manufactureNo,
            model: res.data.model,
            checkCycle: res.data.checkCycle,
            usePosition: res.data.usePosition,
            directorName: res.data.directorName,
          } as any)
        }
        else {
          ElMessage.warning('设备已扫描')
        }
      }
      else {
        if (!list.value.length) {
          scanStatus.value = '3'
        }
        ElMessage.warning('暂无设备信息,请检查')
      }
    })
  }
  else {
    ElMessage.warning('扫描未成功，请重新尝试')
  }
}
// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false
  emits('confirm', checkoutList.value)
  // 清空列表
  list.value = []
  checkoutList.value = []
}
defineExpose({ initDialog, closeDialog })
onMounted(() => {
  var codeString = ''
  // 定时器每隔200ms 清空codeString
  var lastTime
  var caseFormat = false
  document.onkeydown = function (e) {
    var nextTime = new Date().getTime()
    var code = e.which
    // shift键
    if (code == 16) {
      caseFormat = true
    }
    else {
      if (caseFormat) {
        if (code >= 65 && code <= 90) {
          // 转小写
          code = code + 32
        }
        else if (code >= 97 && code <= 122) {
          // 转大写
          code = code - 32
        }
        caseFormat = false
      }
      var char = String.fromCharCode(code)
      console.log(char, 'char')
      if (codeString == '') {
        codeString += char
      }
      else if (nextTime - lastTime <= 30) {
        codeString += char
      }
    }
    lastTime = nextTime
  }

  window.onkeydown = function (e) {
    console.log('扫码枪识别成功')
    var nextTime1 = new Date().getTime()
    var lastTime1
    if (e.which == 13) {
      onScanning(codeString)
      codeString = ''
    }
  }
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="二维码扫描" width="80%">
    <div style="margin-top: -20px;width: 100%;">
      <div v-if="scanStatus === '1'" class="wait-scan">
        <div>请使用扫码枪或读写器扫描标签</div>
        <el-image :src="scanImg" class="scan-img" />
      </div>
      <!-- 扫描结果 -->
      <div v-if="scanStatus === '2'">
        <el-table ref="multipleTableRef" :data="list" style="width: 100%;margin-top: 10px;" border stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="38" fixed="left" />
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column show-overflow-tooltip prop="equipmentName" label="设备名称" align="center" />
          <el-table-column show-overflow-tooltip prop="model" label="型号规格" align="center" />
          <el-table-column show-overflow-tooltip prop="manufactureNo" label="出厂编号" align="center" />
          <el-table-column show-overflow-tooltip prop="checkCycle" label="检定周期" align="center" width="120px" />
          <el-table-column show-overflow-tooltip prop="usePosition" label="使用岗位" align="center" />
          <el-table-column show-overflow-tooltip prop="directorName" label="负责人" align="center" />
        </el-table>
      </div>
      <!-- 暂无数据 -->
      <div v-if="scanStatus === '3'">
        <el-empty :image-size="200" description="未送检设备或无数据,请尝试重新扫描" />
        <!-- <device-detail ref="deviceDetaiRef" :equipment-id="deviceId" /> -->
      </div>
    </div>
    <!-- </div> -->
    <template #footer>
      <el-button type="primary" @click="closeDialog">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.wait-scan {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 3;

  .scan-img {
    margin-top: 20px;
    width: 128px;
    height: 128px;
  }
}

.radio {
  ::v-deep(.el-radio__label) {
    display: none !important;
  }
}
</style>