<!-- 扫码枪：扫描二维码操作弹窗 -->
<script setup lang="ts" name="BarCodeBind">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import scanImg from '@/assets/images/scan.png'
import { getReadList, getReaderSampleList } from '@/api/reader'
import { getDetailBaseInfo } from '@/api/business/manager/sendReceive'
// 弹窗显示
const emits = defineEmits(['confirm'])
const multipleTableRef = ref()
const dialogVisible = ref(false)
const tableLoading = ref(false)
const scanStatus = ref('0')

const businessType = ref('') // 业务场景--1：设备收发场景，2：委托书场景，3：我的检测场景，4：部门检测场景
const businessStatus = ref('') // 场景状态--场景1（1：待收入状态，2：已收入状态，3：待归还状态，4：已超期状态）；场景3（1：待检测状态,2：检测中状态）；场景4（1：检测中状态）
const singleChecked = ref('') // 单选选中id
const customerId = ref('') // 委托方id
// 扫描到的列表
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('扫描成功,获取设备信息中')
  setTimeout(() => {
    // deviceDetaiRef.value.loading = true
    if (code.trim()) {
      if (code && `${businessType.value}` && `${businessStatus.value}`) {
        tableLoading.value = true
        const param = {
          customerId: customerId.value, // 委托方id
          sceneNo: businessType.value, // 业务场景
          status: businessStatus.value, // 场景状态
          strSet: [code.trim()], // 扫码集合
        }
        getReaderSampleList(param).then((res) => {
          if (res && res.data && res.data.length) {
            const index = list.value.findIndex((item: { sampleId: string }) => item.sampleId === res.data[0].sampleId)
            if (index === -1) {
              list.value.push({
                ...res.data[0],
                certificateValid: res.data[0].deviceCertificateValid || res.data[0].certificateValid,
              })
              // 自动选中
              multipleTableRef.value!.toggleRowSelection(list.value[list.value.length - 1], undefined)
            }
            else {
              ElMessage.warning(`设备${res.data[0].sampleName}-${res.data[0].sampleModel}-${res.data[0].manufactureNo}已存在！`)
            }
          }
          else {
            ElMessage.warning('扫描成功但未查询到此设备，请重新尝试')
          }
        }).catch(() => tableLoading.value = false)
        tableLoading.value = false
      }
    }
    else {
      scanStatus.value = '3'
      ElMessage.warning('扫描未成功，请重新尝试')
    }
  })
}
// 确定
const confirm = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选中')
    return false
  }
  dialogVisible.value = false
  emits('confirm', checkoutList.value)
  // 清空列表
  list.value = []
  checkoutList.value = []
}

// 取消
const cancle = () => {
  list.value = []
  checkoutList.value = []
  dialogVisible.value = false
}

/**
 * 打开弹窗
 * @param businessTypeParam 业务场景，1：设备收发场景，2：任务单场景，3：我的任务场景，4：实验室任务场景，5：交接单
 * @param businessStatusParam 场景状态，场景1（1：待收入状态，2：已收入状态，3：待归还状态，4：已超期状态）；场景3（1：待检测状态,2：检测中状态）；场景4（1：检测中状态）
 * @param pageTypeParam 页面类型 list需要提醒是否绑定、detail不需要提醒
 * @param customerIdParam 委托方id
 */
const initDialog = (businessTypeParam: string, businessStatusParam: string, pageTypeParam = 'list', customerIdParam = '') => {
  businessType.value = businessTypeParam
  businessStatus.value = businessStatusParam
  customerId.value = customerIdParam
  scanStatus.value = '1'
  dialogVisible.value = true
}
onMounted(() => {
  var codeString = ''
  // 定时器每隔200ms 清空codeString
  var lastTime: any
  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 = () => {}
})
defineExpose({ initDialog, confirm })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="二维码扫描" width="80%" :close-on-click-modal="false">
    <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" v-loading="tableLoading" :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="sampleNo" label="设备编号" align="center" />
          <el-table-column show-overflow-tooltip prop="sampleName" label="名称" align="center" />
          <el-table-column show-overflow-tooltip prop="sampleModel" label="规格型号" align="center" />
          <el-table-column show-overflow-tooltip prop="manufactureNo" label="出厂编号" align="center" />
          <el-table-column show-overflow-tooltip prop="customerName" label="委托方" align="center" />
          <!-- <el-table-column show-overflow-tooltip prop="usageStatus" label="使用状态" align="center" width="120px" /> -->
          <!-- <el-table-column show-overflow-tooltip prop="deptName" label="所属部门" align="center" /> -->
          <!-- <el-table-column show-overflow-tooltip prop="directorName" label="负责人" align="center" /> -->
          <!-- <el-table-column show-overflow-tooltip prop="measureValidDate" label="检定有效期" align="center" width="120px" /> -->
        </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="confirm">
        确定
      </el-button>
      <el-button type="info" @click="cancle">
        取消
      </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>