<!-- 扫描操作弹窗 -->
<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()
function onScanning(code: string) {
  scanStatus.value = '2'
  console.log(code, '获取到的设备的id')// 获取到的条形码
  // ElMessage.success('扫描成功,获取设备信息中')
  setTimeout(() => {
    if (deviceDetaiRef.value) {
      deviceDetaiRef.value.loading = true
      if (code.trim()) {
        if (code) {
          getDetailBaseInfo({ equipmentId: code.trim() }).then((res) => {
            if (res.data) {
              deviceId.value = code.trim()
              setTimeout(() => {
                deviceDetaiRef.value?.fetchInfo()
              })
            }
            else {
              scanStatus.value = '3'
            }
          })
        }
      }
      else {
        scanStatus.value = '3'
        ElMessage.warning('扫描未成功，请重新尝试')
      }
    }
  })
}
// 关闭弹窗
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 = ''
    }
  }
})
onUnmounted(() => {
  window.onkeydown = () => {}
})
</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>