<!-- 证书管理详情 -->
<script name="certificateDetail" lang="ts" setup>
import certificatePrintRecord from './components/printRecord.vue'
import certificateBasic from './components/basic.vue'
import certificatePreview from './components/preview.vue'
import useUserStore from '@/store/modules/user'
import { printPdf } from '@/utils/printUtils'
import { getPhotoUrl } from '@/api/system/tool'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'

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 printFileName = ref('') // 证书打印文件名称
const printStatusName = ref('') // 证书打印状态
const approvalStatusName = ref('') // 审批状态名称
const processId = ref('') // 流程实例id
const taskId = ref('') // taskId
const showApprovalButton = ref(true)
// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'certificate-basic' },
  { name: '打印预览', value: 'certificate-preview' },
  { name: '打印记录', value: 'certificate-print-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
  }
}
// --------------------------------------------按钮----------------------------------------------
// 点击打印
const print = () => {
  getPhotoUrl(printFileName.value).then((res) => {
    const url = res.data
    printPdf(url)
  })
}

// 点击关闭
const close = () => {
  $router.back()
}
// --------------------------------------------审批------------------------------------------
const approvalDialog = ref() // 审批组件ref

// 审批
const handleApprove = (status: string) => {
  if (status === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else {
    approvalDialog.value.initDialog('refuse', taskId.value, infoId.value)
  }
}

// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}
// ----------------------------------------------------------------------------------------------
watch(() => approvalStatusName.value, (val) => {
  console.log('审批状态名称', val)

  if (val !== '待审批' && val !== '审批中' && val !== '已通过' && val !== '未通过') { // 全部草稿箱把审批详情删了
    if (radioMenus.value[radioMenus.value.length - 1].value === 'certificate-approval-record') {
      radioMenus.value.pop()
    }
    console.log(radioMenus.value)
  }
  else { // 非全部和草稿箱把审批详情加上
    if (radioMenus.value[radioMenus.value.length - 1].value !== 'certificate-approval-record') {
      radioMenus.value.push({ name: '审批详情', value: 'certificate-approval-record' })
    }
  }
}, { immediate: true })
onMounted(() => {
  printFileName.value = $route.query.printFileName as string // 打印文件路径
  printStatusName.value = $route.query.printStatusName as string // 打印状态名称
  approvalStatusName.value = $route.query.approvalStatusName as string // 审批状态名称
  processId.value = $route.query.processId as string // 流程实例id
  taskId.value = $route.query.taskId as string
})
</script>

<template>
  <app-container>
    <detail-page :title="`证书管理(${textMap[pageType]})`">
      <template #btns>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <!-- 可打印和已通过的显示打印按钮 -->
        <el-button v-if="pageType === 'detail' && (approvalStatusName === '已通过' || printStatusName === '未打印')" type="primary" @click="print">
          打印
        </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" :print-file-name="printFileName" />
    <!-- 打印预览 -->
    <certificate-preview v-if="current === 'certificate-preview'" :page-type="pageType" :print-file-name="printFileName" />
    <!-- 打印记录 -->
    <certificate-print-record v-if="current === 'certificate-print-record'" :page-type="pageType" />
    <!-- 审批详情 -->
    <approval-record-table v-if="current === 'certificate-approval-record'" :process-id="processId" />

    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>