<!-- 证书审批管理详情页 -->
<script name="certificateDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import type { Ref } from 'vue'
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import type { IForm } from './certificate-interface'
import certificateBasic from './components/basic.vue'
import certificateChangeRecord from './components/changeRecord.vue'
import certificateApprovalRecord from './components/approvalRecord.vue'
import useUserStore from '@/store/modules/user'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const user = useUserStore() // 用户信息
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const ruleFormRef = ref() // 表单ref
const $router = useRouter()

// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'certificate-basic' },
  { name: '修改记录', value: 'certificate-change-record' },
  { name: '审批详情', value: 'certificate-approval-record' },
])
const current = ref('certificate-basic') // 选择的tab 默认基本信息

// -----------------------------------------路由参数----------------------------------------
// 从路由中获取页面类型参数
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
  }
}
console.log('页面类型', pageType.value)
// --------------------------------------------按钮----------------------------------------------
// 点击证书报告打印
const printReport = () => {
  ElMessage.info('敬请期待')
}

// 点击原始记录打印
const printRecord = () => {
  ElMessage.info('敬请期待')
}

// 点击提交
const submitForm = () => {
  ElMessage.info('敬请期待')
}

// 点击保存
const saveForm = (formEl: FormInstance | undefined) => {
}

// 点击关闭
const close = () => {
  $router.back()
}
// 点击编辑
// ----------------------------------------------------------------------------------------------
onMounted(() => {
})
</script>

<template>
  <app-container>
    <detail-page :title="`证书审批管理(${textMap[pageType]})`">
      <template #btns>
        <el-button v-if="pageType === 'detail'" type="primary" @click="printReport">
          证书报告打印
        </el-button>
        <el-button v-if="pageType === 'detail'" type="primary" @click="printRecord">
          原始记录打印
        </el-button>
        <el-button v-if="pageType === 'add'" type="primary" @click="submitForm">
          提交
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </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>
    <!-- 基本信息 -->
    <certificate-basic v-if="current === 'certificate-basic'" :page-type="pageType" />
    <!-- 修改记录 -->
    <!-- <certificate-change-record v-if="current === 'certificate-change-record'" :page-type="pageType" /> -->
    <!-- 审批记录 -->
    <!-- <certificate-approval-record v-if="current === 'certificate-approval-record'" :page-type="pageType" /> -->
  </app-container>
</template>