<!-- 标准装置台账信息详情 -->
<script name="StandardBookInfoDetail" 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 type { IForm } from './book-interface'
import bookBasic from './components/basic.vue'
import bookStandard from './components/standard.vue'
import bookPerson from './components/person.vue'
import bookProject from './components/project.vue'
import bookGrade from './components/grade.vue'
import bookCertificate from './components/certificate.vue'
import bookCheckRecord from './components/checkRecord.vue'
import bookChangeRecord from './components/changeRecord.vue'
import bookApprovalRecord from './components/approvalRecord.vue'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const $router = useRouter() // 路由实例
const ruleFormRef = ref<FormInstance>() // 表单ref
const loading = ref(false) // 表单加载状态
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'book-basic' },
  { name: '标准配套设备', value: 'book-standard' },
  { name: '计量人员', value: 'book-person' },
  { name: '开展的检定或校准项目', value: 'book-project' },
  { name: '量值溯源与传递等级', value: 'book-grade' },
  { name: '标准证书', value: 'book-certificate' },
  { name: '核查记录', value: 'book-check-record' },
  { name: '技术指标修改记录', value: 'book-change-record' },
  { name: '审批记录', value: 'book-approval-record' },
])
const current = ref('book-basic') // 选择的tab 默认基本信息

// 点击标签
const clickTab = () => {
  console.log(current.value)
}
// -----------------------------------路由参数-------------------------------------------------
// 从路由中获取页面类型参数
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 handleSubmit = () => {}
/**
 * 点击保存
 * @param ruleFormRef 基本信息表单ref
 */
function saveForm(ruleFormRef: FormInstance | undefined) {
  if (!ruleFormRef) { return }
  ruleFormRef.validate((valid, fields) => {
    if (valid) { // 基本信息表单通过校验
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        // 调保存接口
      })
    }
  })
}
// -------------------------------------------------------------------------------------------
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`标准装置台账信息--${textMap[pageType]}`">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary">
          提交
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary">
          保存
        </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>
      <!-- <el-tabs v-model="current" type="card" @tab-change="clickTab">
        <el-tab-pane v-for="item in tabMenus" :key="item.value" :label="item.name" :name="item.value" />
      </el-tabs> -->
    </detail-page>
    <!-- 基本信息 -->
    <book-basic v-if="current === 'book-basic'" :page-type="pageType" />
    <!-- 标准配套设备 -->
    <book-standard v-if="current === 'book-standard'" :page-type="pageType" />
    <!-- 计量人员 -->
    <book-person v-if="current === 'book-person'" :page-type="pageType" />
    <!-- 开展的检定或校准项目 -->
    <book-project v-if="current === 'book-project'" :page-type="pageType" />
    <!-- 量值溯源与传递等级 -->
    <book-grade v-if="current === 'book-grade'" :page-type="pageType" />
    <!-- 标准证书 -->
    <book-certificate v-if="current === 'book-certificate'" :page-type="pageType" />
    <!-- 核查记录 -->
    <book-check-record v-if="current === 'book-check-record'" :page-type="pageType" />
    <!-- 技术指标修改记录 -->
    <book-change-record v-if="current === 'book-change-record'" :page-type="pageType" />
    <!-- 审批记录 -->
    <book-approval-record v-if="current === 'book-approval-record'" :page-type="pageType" />
  </app-container>
</template>