<!-- 智能模型收发详情--公共组件  -->
<script name="TemplateDetail" lang="ts" setup>
import type { Ref } from 'vue'
import type { FormInstance, FormRules, TabPaneName, TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import sendReceiveOrder from './order.vue'
import sendReceiveMeasure from './measure.vue'
import sendReceiveBasic from './basic.vue'
import sendReceiveMeasureItem from './measureItem.vue'
import sendReceiveCertificate from './certificate.vue'
import subpackageInfoCom from './subpackageInfo.vue'
import subpackageCertList from './subpackageCertList.vue'
import { tagBinding } from '@/api/reader'
import scanEquipmentDialog from '@/components/scanEquipmentDialog/index.vue'
import printThreeInfo from '@/views/business/taskMeasure/print/components/label/printThreeInfo.vue'
import CanvasCom from '@/views/business/taskMeasure/print/components/canvas/canvas.vue'
import { printImage } from '@/utils/printUtils'
const props = defineProps({
  radioMenus: {
    type: Array as () => { value: string; name: string }[],
    default: () => [ // 标签内容
      { name: '任务单信息', value: 'send-receive-order' },
      // { name: '检定信息', value: 'send-receive-measure' },
      { name: '基本信息', value: 'send-receive-basic' },
      { name: '检定项信息', value: 'send-receive-measureItem' },
      { name: '证书报告', value: 'send-receive-certificate' },
    ],
  },
  title: {
    type: String,
    default: '智能模型收发管理',
  },
  orderId: { // 任务单id
    type: String,
  },
  equipmentId: { // 智能模型id
    type: String,
  },
  menuType: { // 菜单类型 hiddenButton需要隐藏按钮
    type: String,
    default: '',
  },
  subpackageInfo: Object, // 分包信息
})
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const $router = useRouter() // 路由实例
const loading = ref(false) // 表单加载状态
const pageType = ref('detail') // 页面类型: add, edit, detail
const infoId = ref('') // id
const bookBasicRef = ref() // 子组件--基本信息ref
const sampleId = ref('') // 任务单id
// -------------------------------------标签--------------------------------------------------
const current = ref(props.radioMenus[0].value) // 选择的tab 默认基本信息
const sendReceiveOrderRef = ref() // 任务单信息组件ref
const sendReceiveMeasureRef = ref() // 检定信息组件ref
const sendReceiveBasicRef = ref() // 基本信息组件ref
const sendReceiveCertificateRef = ref() // 证书报告组件ref
const subpackageCertListRef = ref() // 分包详情证书报告组件ref
// -----------------------------------路由参数-------------------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ---------------------------------右上角按钮(操作表单)------------------------------------------
// 点击关闭
const close = () => {
  $router.back()
}
// 点击标识打印
const labelPrinting = () => {
  downloadImage()
}
// --------------------------------------------标签绑定--------------------------------------------
const scanEquipmentRef = ref()
// 点击扫描收添加
const scan = () => {
  // 参数：是标签绑定
  scanEquipmentRef.value.initDialog(true, 'detail')
}
// 扫描结束
const scanOver = (value: any) => {
  const label = value.label
  scanEquipmentRef.value.closeDialog()
  tagBinding({ label, equipmentId: props.equipmentId }).then((res) => {
    ElMessage.success('标签绑定成功')
    scanEquipmentRef.value.closeDialog()
    sendReceiveBasicRef.value.fetchInfo() // 获取详情
  })
}

// -------------------------------------------------------------------------------------------
const customerId = ref('') // 委托方id
const giveCustomerId = (customerIdParam: string) => {
  customerId.value = customerIdParam
  console.log('委托方id', customerId.value)
}

// ------------------------------------------标识打印------------------------------------------
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 printForm = ref<{ [key: string]: string }>({
  manufactureNo: '',
  year: '',
  month: '',
  day: '',
  personName: '',
  euiqpmentId: '',
})

const givePrintForm = (form: any) => {
  printForm.value = {
    manufactureNo: form.manufactureNo || '',
    year: form.measureValidDate.slice(0, 4),
    month: form.measureValidDate.slice(5, 7),
    day: form.measureValidDate.slice(8, 10),
    personName: form.directorName,
    equipmentId: props.equipmentId!,
    userId: form.directorId,
  }
  console.log('智能模型收发详情打印内容', printForm.value)
}

const canvasComponent = ref(null) as any
const imageUrl = ref('') as any
function downloadImage() {
  imageUrl.value = canvasComponent.value!.toImage()
  console.log('生成的图片', imageUrl.value)
  printImage(imageUrl.value)
}
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`${title}-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="props.menuType !== 'hiddenButton' && current === 'send-receive-basic'" type="primary" @click="labelPrinting">
          标识打印
        </el-button>
        <el-button v-if="props.menuType !== 'hiddenButton'" type="primary" @click="scan">
          RFID标签绑定
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in radioMenus" :key="item!.value" :label="item.value">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-page>
    <!-- 任务单信息 -->
    <send-receive-order
      v-if="current === 'send-receive-order'"
      ref="sendReceiveOrderRef"
      :order-id="props.orderId"
      @give-customer-id="giveCustomerId"
    />
    <!-- 检定信息 -->
    <send-receive-measure
      v-if="current === 'send-receive-measure'"
      ref="sendReceiveMeasureRef"
      :page-type="pageType"
      :order-id="props.orderId!"
      :sample-id="props.equipmentId!"
      @give-customer-id="giveCustomerId"
    />
    <!-- 基本信息 -->
    <send-receive-basic
      v-if="current === 'send-receive-basic'"
      ref="sendReceiveBasicRef"
      :equipment-id="props.equipmentId"
      @give-print-form="givePrintForm"
    />

    <!-- 检定项信息 -->
    <send-receive-measure-item
      v-if="current === 'send-receive-measureItem'"
      ref="sendReceiveMeasureItemRef"
      :page-type="pageType"
      :equipment-id="props.equipmentId!"
    />

    <!-- 证书报告 -->
    <send-receive-certificate
      v-if="current === 'send-receive-certificate'"
      ref="sendReceiveCertificateRef"
      :customer-id="customerId"
      :sample-id="props.equipmentId!"
    />

    <!-- 分包详情的证书报告 -->
    <subpackage-cert-list
      v-if="current === 'subpackage-certificate'"
      ref="subpackageCertListRef"
      :sample-id="props.equipmentId!"
    />

    <!-- 分包信息 -->
    <subpackage-info-com
      v-if="current === 'send-receive-subpackage'"
      :subpackage-info="props.subpackageInfo"
    />
  </app-container>
  <!-- 扫描 -->
  <scan-equipment-dialog ref="scanEquipmentRef" title="标签绑定" @confirm="scanOver" />

  <!-- 标识打印组件 -->
  <canvas-com
    v-show="false"
    ref="canvasComponent"
    :width="600"
    :height="200"
    :print-form="printForm"
    :device-no="printForm.manufactureNo"
    :year="printForm.year"
    :month="printForm.month"
    :day="printForm.day"
    :person-name="printForm.personName"
    :equipment-id="printForm.equipmentId"
    :user-id="printForm.userId"
  />
</template>