<!-- 设备收发详情--公共组件  -->
<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 sendReceiveCertificate from './certificate.vue'
import { tagBinding } from '@/api/reader'
import scanEquipmentDialog from '@/components/scanEquipmentDialog/index.vue'

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-certificate' },
    ],
  },
  title: {
    type: String,
    default: '设备收发管理',
  },
  orderId: { // 任务单id
    type: String,
  },
  equipmentId: { // 设备id
    type: String,
  },
  menuType: { // 菜单类型 hiddenButton需要隐藏按钮
    type: String,
    default: '',
  },
})
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 $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 = () => {
  ElMessage.info('敬请期待')
}
// --------------------------------------------标签绑定--------------------------------------------
const scanEquipmentRef = ref()
// 点击扫描收添加
const scan = () => {
  // 参数：是标签绑定
  scanEquipmentRef.value.initDialog(true, 'detail')
}
// 扫描结束
const scanOver = (value: any) => {
  console.log('***************************')
  const label = value.label
  console.log(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)
}
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`${title}-${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="props.menuType !== 'hiddenButton'" 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"
    />
    <!-- 证书报告 -->
    <send-receive-certificate
      v-if="current === 'send-receive-certificate'"
      ref="sendReceiveCertificateRef"
      :customer-id="customerId"
      :sample-id="props.equipmentId!"
    />
  </app-container>
  <!-- 扫描 -->
  <scan-equipment-dialog ref="scanEquipmentRef" title="标签绑定" @confirm="scanOver" />
</template>