<!-- 扫描操作弹窗 -->
<script setup lang="ts" name="BarCodeBind">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { CopyDocument } from '@element-plus/icons-vue'
import deviceDetail from './basic.vue'
import { getDetailBaseInfo } from '@/api/business/manager/sendReceive'
import scanImg from '@/assets/images/scan.png'
const dialogVisible = ref(false) // 弹窗显示
const scanStatus = ref('0')

const initDialog = () => {
  scanStatus.value = '1'
  dialogVisible.value = true
}
// ----定义对外暴露的方法 初始化弹窗， 关闭弹窗

const deviceId = ref('')
const deviceDetaiRef = ref()
const onScanning = (code: string) => {
  scanStatus.value = '2'
  console.log(code, '获取到的设备的id')// 获取到的条形码
  ElMessage.success('扫描成功,获取设备信息中')
  if (deviceDetaiRef.value) {
    deviceDetaiRef.value.loading = true
    // }
    deviceId.value = code.trim()
    getDetailBaseInfo({ equipmentId: deviceId.value }).then((res) => {
      if (res.data) {
        setTimeout(() => {
          deviceDetaiRef.value?.fetchInfo()
        })
      }
      else {
        scanStatus.value = '3'
      }
    })
  }

  // 关闭弹窗
  const closeDialog = () => {
    dialogVisible.value = false
  }
  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'">
        <device-detail ref="deviceDetaiRef" :equipment-id="deviceId" />
      </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>