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

const props = defineProps({
  // 对话框标题
  title: {
    type: String,
    default: '扫描收入',
  },
})
const emits = defineEmits(['confirm'])
const dialogVisible = ref(false) // 弹窗显示
const scanStatus = ref('1')
const isBinding = ref(false) // 是否是标签绑定
const pageType = ref('list') // 页面类型 list需要提醒是否绑定、detail不需要提醒
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 websocket = useWebsocketStore()
const columns = ref([
  { text: '统一编号', value: 'sampleNo', align: 'center', width: '160' },
  { text: '智能模型名称', value: 'sampleName', align: 'center' },
  { text: '规格型号', value: 'sampleModel', align: 'center' },
  { text: '厂商', value: 'manufacturer', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '负责人', value: 'directorName', align: 'center' },
  { text: '使用状态', value: 'usageStatusName', align: 'center', width: '90' },
  { text: '检定日期', value: 'checkDate', align: 'center', width: '120' },
  { text: '证书有效期', value: 'certificateValid', align: 'center', width: '120' },
])
// 扫描到的标签列表
const list = ref([]) as any

// 关闭弹窗
const closeDialog = () => {
  list.value = []
  dialogVisible.value = false
  stopWebScket()
}

// 点击确定，保存选择的成员配置
const confirm = () => {
  if (isBinding.value && !singleChecked.value) { // 标签绑定
    ElMessage.warning('请选中')
    return false
  }
  const message = isBinding.value ? '确认绑定吗？' : `确认${props.title}列表中的样品吗？`
  if (list.value.length) {
    if (isBinding.value) {
      if (pageType.value === 'detail') {
        emits('confirm', singleChecked.value)
        singleChecked.value = ''// 清除选中
      }
      else {
        ElMessageBox.confirm(
          message,
          '提示',
          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' },
        ).then(() => {
          emits('confirm', singleChecked.value)
          singleChecked.value = ''// 清除选中
        })
      }
    }
    else {
      emits('confirm', list.value)
    }
  }
  else {
    ElMessage.warning('暂无样品数据, 请重新扫描或取消')
  }
}

// 扫描/ 重新扫描
const scan = (labelId: string) => {
  singleChecked.value = ''// 清除选中
  if (isBinding.value) {
    list.value.push({
      labelBind: labelId,
    })
  }
  else {
    const param = {
      customerId: customerId.value, // 委托方id
      sceneNo: businessType.value, // 业务场景
      status: businessStatus.value, // 场景状态
      strSet: [labelId], // 扫码集合
    }
    if (`${businessType.value}` && `${businessStatus.value}` && [labelId].length) {
      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],
              checkDate: res.data[0].checkDate ? dayjs(res.data[0].checkDate).format('YYYY-MM-DD') : res.data[0].checkDate, // 检定日期
              certificateValid: res.data[0].certificateValid ? dayjs(res.data[0].certificateValid).format('YYYY-MM-DD') : res.data[0].certificateValid, // 证书有效期
              requireCertifications: 0, // 应出具证书数量
            })
          }
          else {
            console.log(`${list.value[index].sampleName}${list.value[index].sampleModel}${list.value[index].manufactureNo}已经添加过`)
          }
        }
      })
    }
  }
}

const deleteRow = (index: number) => {
  list.value.splice(index, 1)
}

/**
 * 打开弹窗
 * @param isBindingValue 是否是标签绑定
 * @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 = (isBindingValue = false, businessTypeParam: string, businessStatusParam: string, pageTypeParam = 'list', customerIdParam = '') => {
  isBinding.value = isBindingValue
  businessType.value = businessTypeParam
  businessStatus.value = businessStatusParam
  customerId.value = customerIdParam
  pageType.value = pageTypeParam
  scanStatus.value = '1'
  dialogVisible.value = true
  websocket.initWebSocket()
}

// 断开websocket
function stopWebScket() {
  websocket.destroyWebSocket()
}
// 重连
const reStartWebScket = () => {
  websocket.reConnectWebsocket()
}

// 重新扫描
const reScan = () => {
  stopWebScket()
  websocket.initWebSocket()
}

onBeforeMount(() => {
  stopWebScket()
})

// 监听消息列表变化
watch(() => websocket.labelId, (newVal) => {
  console.log('监听到了标签数据', newVal)
  if (newVal) {
    scan(newVal)
  }
}, { immediate: true })
// 监听websocket是否连接
watch(() => websocket.wsStatus, (newVal) => {
  console.log('监听到websocket是否连接', newVal)

  if (newVal) { // 连上
    scanStatus.value = '2'
  }
  else { // 断开
    scanStatus.value = '1'
  }
}, {
  immediate: true,
})

// ----定义对外暴露的方法 初始化弹窗， 关闭弹窗
defineExpose({ initDialog, closeDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" width="80%" append-to-body :before-close="closeDialog">
    <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 v-if="!isBinding" style="margin-top: 20px;">
          扫描到 <span style="font-weight: 600;">{{ list.length }}</span> 个智能模型{{ list.length > 1 ? '，请移除不需要绑定的智能模型。' : '' }}
        </div>
        <div v-if="isBinding">
          扫描到 <span style="font-weight: 600;">{{ list.length }}</span> 个标签{{ 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 v-if="isBinding" label="" width="60" align="center">
            <template #default="scope">
              <el-radio v-model="singleChecked" :label="scope.row.labelBind" class="radio" />
            </template>
          </el-table-column>
          <!-- <el-table-column v-if="!isBinding" show-overflow-tooltip prop="sampleNo" label="智能模型编号" align="center" width="160px" />
          <el-table-column v-if="!isBinding" show-overflow-tooltip prop="sampleName" label="智能模型名称" align="center" />
          <el-table-column v-if="!isBinding" show-overflow-tooltip prop="sampleModel" label="规格型号" align="center" />
          <el-table-column v-if="!isBinding" show-overflow-tooltip prop="manufactureNo" label="出厂编号" align="center" />
          <el-table-column v-if="!isBinding && !customerId" show-overflow-tooltip prop="orderNo" label="任务单编号" align="center" width="160px" /> -->
          <!-- <el-table-column v-if="!isBinding && !customerId" show-overflow-tooltip prop="customerNo" label="委托方代码" align="center" width="160px" /> -->
          <!-- <el-table-column v-if="!isBinding && !customerId" show-overflow-tooltip prop="customerName" label="委托方名称" align="center" /> -->
          <el-table-column
            v-for="item in columns"
            :key="item.value"
            :prop="item.value"
            :label="item.text"
            :width="item.width"
            align="center"
          >
            <template #header>
              <span>{{ item.text }}</span>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="labelBind" label="标签信息" align="center" />
          <!-- requireCertifications -->
          <el-table-column v-if="!isBinding && props.title === '扫描增加任务'" width="220px" label="应出具证书数量" align="center">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.requireCertifications"
                placeholder="应出具证书数量"
                class="input"
                :min="0"
                :step="1"
                :precision="0"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="!isBinding" label="操作" align="center" width="60px" fixed="right">
            <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 type="primary" @click="reStartWebScket">
        重新连接
      </el-button> -->
      <el-button v-if="websocket.wsStatus" type="danger" @click="stopWebScket">
        断开连接
      </el-button>
      <!-- <el-button v-if="scanStatus === '1'" type="primary" @click="reScan">
        重新扫描
      </el-button> -->
      <el-button type="primary" @click="confirm">
        确 定
      </el-button>
      <el-button @click="closeDialog">
        取 消
      </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;
  }
}

.el-radio__label {
  display: none !important;
}
</style>