<!-- 设备收发详情--公共组件  -->
<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'
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: '设备收发管理',
  },
})
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 orderId = ref('') // 任务单id
const sampleId = ref('') // 任务单id
const customerId = 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()
}
// 点击rfid标签绑定
const bind = () => {
  ElMessage.info('敬请期待')
}
// 点击提交
const labelPrinting = () => {
  ElMessage.info('敬请期待')
}
// -------------------------------------------------------------------------------------------
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`${title}-${textMap[pageType]}`">
      <template #btns>
        <el-button type="primary" @click="labelPrinting">
          标识打印
        </el-button>
        <el-button type="primary" @click="bind">
          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" />
    <!-- 检定信息 -->
    <send-receive-measure
      v-if="current === 'send-receive-measure'"
      ref="sendReceiveMeasureRef"
      :page-type="pageType"
      :order-id="orderId"
      :sample-id="sampleId"
      :customer-id="customerId"
    />
    <!-- 基本信息 -->
    <send-receive-basic v-if="current === 'send-receive-basic'" ref="sendReceiveBasicRef" />
    <!-- 证书报告 -->
    <send-receive-certificate v-if="current === 'send-receive-certificate'" ref="sendReceiveCertificateRef" />
  </app-container>
</template>