<!-- 扫描操作弹窗 -->
<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
  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)
      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>