<!-- 扫描操作弹窗 -->
<script setup lang="ts" name="BarCodeBind">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { ISampleScan } from './scan-interface'
import scanImg from '@/assets/images/scan.png'
// 扫描状态,未开始0，正在扫描1，扫描结束2

const props = defineProps({
  // 对话框标题
  title: {
    type: String,
    default: '扫描收入',
  },
})
const emits = defineEmits(['confirm'])
const dialogVisible = ref(false) // 弹窗显示
const scanStatus = ref('0')

// 扫描到的标签列表
const list = ref<ISampleScan[]>([])

const closeDialog = () => {
  dialogVisible.value = false
}

// 点击确定，保存选择的成员配置
const confirm = () => {
  ElMessageBox.confirm(
    `确认${props.title}列表中全部样品吗？`,
    '提示',
    { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
  ).then(() => {
    emits('confirm', list.value)
  })
}

// 扫描/ 重新扫描
const scan = () => {
  // 扫描到的标签及样品信息列表
  list.value = [
    { sampleNo: '1yp123456', sampleName: '压力表', orderNo: 'wtd123456', customerNo: 'kh123456', customerName: '北京无线电测量研究所', sampleModel: 'JBT-011', manufacturingNo: '24432231124', sampleId: '1', orderId: '123', labelBind: '12345648' },
    { sampleNo: '1yp123457', sampleName: '压力表', orderNo: 'wtd123456', customerNo: 'kh123456', customerName: '北京无线电测量研究所', sampleModel: 'JBT-011', manufacturingNo: '24432231124', sampleId: '1', orderId: '123', labelBind: '12345648' },
  ]
  scanStatus.value = '2'
}
// 重新扫描
const reScan = () => {
  scanStatus.value = '1'
  setTimeout(() => {
    scan()
  }, 3000)
}
const deleteRow = (index: number) => {
  list.value.splice(index, 1)
}
/**
 * 打开弹窗
 * @param sampleid 样品id， 需要在弹窗内完成绑定操作的传, 不需要传空字符串
 */
const initDialog = () => {
  scanStatus.value = '1'
  setTimeout(() => {
    scan()
  }, 3000)
  dialogVisible.value = true
}
// ----定义对外暴露的方法 初始化弹窗， 关闭弹窗
defineExpose({ initDialog, closeDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" width="1000px" append-to-body>
    <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-else-if="scanStatus === '2'">
        <div>
          扫描到 {{ list.length }} 个样品{{ list.length > 1 ? '，请移除不需要绑定的样品。' : '' }}
        </div>
        <el-table ref="multipleTableRef" :data="list" style="width: 100%;margin-top: 10px;" border stripe>
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="sampleNo" label="样品编号" align="center" />
          <el-table-column prop="sampleName" label="样品名称" align="center" />
          <el-table-column prop="sampleModel" label="型号" align="center" />
          <el-table-column prop="manufacture" label="出厂编号" align="center" />
          <el-table-column prop="orderNo" label="委托书编号" align="center" />
          <el-table-column prop="customerNo" label="委托方代码" align="center" />
          <el-table-column prop="customerName" label="委托方名称" align="center" />
          <el-table-column prop="labelBind" label="标签信息" align="center" />
          <el-table-column prop="labelBind" label="操作" align="center" width="60px">
            <template #default="scope">
              <el-button size="small" link type="primary" @click="deleteRow (scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- </div> -->
    <template #footer>
      <el-button v-if="scanStatus === '2'" type="primary" @click="reScan">
        重新扫描
      </el-button>
      <el-button @click="closeDialog">
        取 消
      </el-button>
      <el-button type="primary" @click="confirm">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

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

  .scan-img {
    margin-top: 20px;
    width: 128px;
    height: 128px;
  }
}
</style>