<!-- 标志打印详情 -->
<script name="BusinessTaskMeasurePrintDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import ThreeInfo from './components/label/threeInfo.vue'
import type { IEquipmentList } from './print-interface'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import type { dictType } from '@/global'
import { getDictByCode } from '@/api/system/dict'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import selectEquipmentEqptDialog from '@/views/business/manager/order/dialog/selectEquipment.vue'
import { printHtml } from '@/utils/printUtils'

const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('') // 页面类型
const printFileName = ref('') // 文件名
const $route = useRoute()
const $router = useRouter()
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// -------------------------------------------字典------------------------------------------
const eqptMeterIdentifyList = ref<dictType[]>([]) // 受检设备计量标识
const eqptMeterIdentifyMap = ref({}) as any // 受检设备计量标识
const meterIdentifyList = ref<dictType[]>([]) // 设备台账计量标识
const meterIdentifyMap = ref({}) as any // 设备台账计量标识
const useStatusList = ref<dictType[]>([]) //  设备台账使用状态
const useStatusMap = ref({}) as any //  设备台账使用状态
// 获取字典值
async function getDict() {
  // 受检设备计量标识
  const response = await getDictByCode('eqptMeterIdentify')
  response.data.forEach((item: { value: string; name: string }) => {
    eqptMeterIdentifyMap.value[`${item.value}`] = item.name
  })
  eqptMeterIdentifyList.value = response.data

  // 计量标识
  const responseMeterIdentify = await getDictByCode('bizMeterIdentify')
  responseMeterIdentify.data.forEach((item: { value: string; name: string }) => {
    meterIdentifyMap.value[`${item.value}`] = item.name
  })
  meterIdentifyList.value = responseMeterIdentify.data

  // 使用状态
  const responseUseStatus = await getDictByCode('bizUsageStatus')
  responseUseStatus.data.forEach((item: { value: string; name: string }) => {
    useStatusMap.value[`${item.value}`] = item.name
  })
  useStatusList.value = responseUseStatus.data
}
getDict()
// ---------------------------------------------左侧表格-------------------------------------------
const list = ref<IEquipmentList[]>([]) // 左侧设备表格数据
const checkoutList = ref([]) as any // 选中
// 表头
const columns = ref<TableColumn[]>([
  { text: '统一编号', value: 'deviceNo', align: 'center', width: '160' },
  { text: '设备名称', value: 'deviceName', align: 'center' },
  { text: '标志类型', value: 'identifyTypeName', align: 'center' },
])
// 选中
const handleSelectionChange = (e: any) => {
  if (!e[0].identifyTypeName) {
    ElMessage.warning('无标志类型, 不可打印')
    return false
  }
  checkoutList.value = e
}
// 点击清空列表
const clearList = () => {
  list.value = []
}

// ==================================受检设备=============================
const selectEquipmentEqptRef = ref() // 选择设备组件ref
// 点击添加受检设备
const addEquipmentEqpt = () => {
  selectEquipmentEqptRef.value.initDialog(true)
}
// 选好设备
const confirmSelectEquipmentEqpt = (val: any) => {
  if (val.length) {
    val.forEach((item: any) => {
      const index = list.value.findIndex((e: { deviceNo: string }) => e.deviceNo === item.equipmentNo)
      if (index === -1) {
        list.value.push({
          id: item.id,
          deviceNo: item.equipmentNo, // 设备编号
          deviceName: item.equipmentName, // 设备名称
          identifyType: item.meterIdentify, // 标志类型
          identifyTypeName: eqptMeterIdentifyMap.value[item.meterIdentify], // 标志类型
          addType: 'eqpt', // 添加类型 eqpt受检设备
        })
      }
    })
  }
}
// ================================设备台账=======================================
const selectEquipmentDialogRef = ref() // 选择设备组件ref
const selectEquipmentType = ref('useStatus') // 选择设备类型useStatus-使用状态
// 点击添加设备台账
const addEquipment = (type: string) => {
  selectEquipmentType.value = type
  selectEquipmentDialogRef.value.initDialog()
}

// 选好设备
const confirmSelectEquipment = (val: any) => {
  console.log(val)
  if (val.length) {
    val.forEach((item: any) => {
      const index = list.value.findIndex((e: { deviceNo: string }) => e.deviceNo === item.equipmentNo)
      if (index === -1) {
        list.value.push({
          id: item.id,
          deviceNo: item.equipmentNo, // 设备编号
          deviceName: item.equipmentName, // 设备名称
          identifyType: selectEquipmentType.value === 'useStatus' ? item.usageStatus : item.meterIdentify, // 标志类型
          identifyTypeName: selectEquipmentType.value === 'useStatus' ? item.usageStatusName : item.meterIdentifyName, // 标志类型名称
          addType: selectEquipmentType.value, // 添加类型 eqpt受检设备
        })
      }
    })
  }
}

// ===============================设备校准状态======================================
// 点击通过设备校准状态添加
const addMeasureStatus = () => {
  ElMessage.info('数据来源质量模块，敬请期待')
}

// -----------------------------------------按钮--------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const threeInfoRef = ref()
function printhtml() {
  // threeInfoRef.value.print()
  // printHtml('html')
  // 打印
}
const printObj = ref({
  id: 'html', // 需要打印元素的id
  popTitle: '', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
  standard: '',
  extarCss: '',
})
// -----------------------------------------钩子--------------------------------------------------
const printMenu = {
  测试: {
    title: '测试',
    backgroundColor: '#970000',
    dateTitle: '测试日期',
    personTitle: '测试人',
  },
  封存: {
    title: '编号',
    backgroundColor: '#7000ff',
    dateTitle: '封存日期',
    personTitle: '批准人',
  },
  合格: {
    title: '编号',
    backgroundColor: '#009000',
    dateTitle: '有效期至',
    personTitle: '检定员',
  },
  禁用: {
    title: '编号',
    backgroundColor: '#ff2a00',
    dateTitle: '禁用日期',
    personTitle: '批准人',
  },
  停用: {
    title: '编号',
    backgroundColor: '#ff7e00',
    dateTitle: '停用日期',
    personTitle: '检定员',
  },
  限用: {
    title: '编号',
    backgroundColor: '#00a8ff',
    dateTitle: '有效期至',
    personTitle: '检定员',
  },
  校准: {
    title: '编号',
    backgroundColor: '#002aff',
    dateTitle: '校准日期',
    personTitle: '校准人',
  },
  在用: {
    title: '编号',
    backgroundColor: '#41b883',
    dateTitle: '有效期至',
    personTitle: '使用人',
  },
} as any
onMounted(() => {

})
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`标识打印-${textMap[pageType]}`">
      <template #btns>
        <el-button v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-row :gutter="20">
      <el-col :span="12">
        <detail-block title="" style="padding-bottom: 20px;">
          <div style="margin-bottom: 10px;">
            <el-button type="primary" icon="Plus" @click="addEquipmentEqpt">
              受检设备
            </el-button>
            <el-button type="primary" icon="Plus" @click="addEquipment('useStatus')">
              设备使用状态
            </el-button>
            <el-button type="primary" icon="Plus" @click="addEquipment('identify')">
              设备计量标识
            </el-button>
            <!-- <el-button type="primary" icon="Plus" @click="addMeasureStatus">
              设备校准状态
            </el-button> -->
            <el-button type="info" @click="clearList">
              清空列表
            </el-button>
          </div>
          <!-- <el-table
            :data="list"
            border
            style="width: 100%;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
            <el-table-column align="center" label="序号" width="80" type="index" />
            <el-table-column
              v-for="item in columns"
              :key="item.value"
              :prop="item.value"
              :label="item.text"
              align="center"
            />
          </el-table> -->
          <normal-table
            :data="list"
            :columns="columns"
            :is-showmulti-select="false"
            :is-multi="false"
            :max-height="660"
            :pagination="false"
            @multi-select="handleSelectionChange"
          >
            <!-- 序号 -->
            <template #preColumns>
              <el-table-column label="#" width="55" align="center" fixed>
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </detail-block>
      </el-col>
      <el-col :span="12">
        <detail-block title="" style="padding-bottom: 20px;display: flex;justify-content: center;">
          <div v-if="checkoutList.length" id="html">
            <three-info
              v-for="(item, index) in checkoutList"
              :key="index"
              ref="threeInfoRef"
              :device-no="item.deviceNo"
              :title="item.identifyTypeName"
              :date-title="printMenu[item.identifyTypeName].dateTitle"
              :person-title="printMenu[item.identifyTypeName].personTitle"
              :background-color="printMenu[item.identifyTypeName].backgroundColor"
            />
            <!-- <three-info ref="threeInfoRef" style="margin-top: 10px;" /> -->
          </div>
        </detail-block>
      </el-col>
    </el-row>
  </app-container>
  <!-- 选择受检设备组件 -->
  <select-equipment-eqpt-dialog ref="selectEquipmentEqptRef" @confirm="confirmSelectEquipmentEqpt" />
  <!-- 选择设备台账 -->
  <select-equipment-dialog ref="selectEquipmentDialogRef" :is-multi="true" @confirm="confirmSelectEquipment" />
</template>

<style lang="scss" scoped>
// 样式
</style>