<!-- 检定审批管理详情页 -->
<script name="certificateDetail" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import certificateBasic from './components/basic.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import useUserStore from '@/store/modules/user'
import {
  approvalDelete,
  cancelApproval,
  refuseApproval,
  rejectApproval,
  submit,
} from '@/api/business/taskMeasure/certificate'
import { downloadFileName } from '@/utils/download'
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 approvalStatusName = ref('') // 审批状态名称
const processId = ref('') // 流程实例id
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
const decisionItem = ref('')
const showApprovalButton = ref(true) // 是否展示审批按钮
const showSubmitButton = ref(true) // 是都显示提交按钮
const approvalDialog = ref() // 审批对话ref
const measureDataId = ref('') // 检定数据id
const isFromCertificateList = ref('true') // 是否来源于坚定审批列表页
// -------------------------------------标签--------------------------------------------------
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, 'infoId', infoId.value)
// --------------------------------------------按钮----------------------------------------------
const certificateFile = ref('') // 证书报告
const originalRecordFile = ref('') // 原始记录
const reportData = (certificateFileParam = '', originalRecordFileParam = '') => {
  certificateFile.value = certificateFileParam// 证书报告
  originalRecordFile.value = originalRecordFileParam// 原始记录
}
// 点击证书报告下载
const downloadReport = () => {
  downloadFileName(certificateFile.value)
}

// 点击原始记录下载
const downloadRecord = () => {
  downloadFileName(originalRecordFile.value)
}

// 点击提交
const submitForm = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  submit({ id: infoId.value, formId: SCHEDULE.CERTIFICATE_APPROVAL, processId: processId.value }).then((res) => {
    ElMessage.success('已提交')
    showSubmitButton.value = false
    loading.close()
  })
}

// 点击关闭
const close = () => {
  $router.back()
}

// -------------------------------------------审批----------------------------------------

// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}

// 点击删除--已取消
const del = () => {
  ElMessageBox.confirm(
    '确认删除该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(255, 255, 255, 0.6)',
      })
      approvalDelete({ id: infoId.value, taskId: taskId.value }).then(() => {
        ElMessage.success('已删除')
        loading.close()
        close()
      })
    })
}

// 审批
const handleApprove = (val: string) => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
      id: infoId.value,
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.6)',
        })
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '已取消',
          })
          showApprovalButton.value = false
          loading.close()
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value, infoId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value, infoId.value)
  }
}

// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  refuseApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已拒绝',
    })
    showApprovalButton.value = false
  })
}

// 驳回
const reject = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  rejectApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已驳回',
    })
    showApprovalButton.value = false
  })
}
// -----------------------------------------------钩子-----------------------------
watch(() => approvalStatusName.value, (val) => {
  if (val === '草稿箱' || pageType.value === 'add' || isFromCertificateList.value === 'false') { // 草稿箱把审批详情删了
    if (radioMenus.value[radioMenus.value.length - 1].value === 'certificate-approval-record') {
      radioMenus.value.pop()
    }
  }
  else { // 非全部和草稿箱把审批详情加上
    if (radioMenus.value[radioMenus.value.length - 1].value !== 'certificate-approval-record') {
      radioMenus.value.push({ name: '审批详情', value: 'certificate-approval-record' })
    }
  }
})
// ----------------------------------------------------------------------------------------------
onMounted(() => {
  approvalStatusName.value = $route.query.approvalStatusName as string // 审批名称
  processId.value = $route.query.processId as string // 流程实例id
  taskId.value = $route.query.taskId as string // 任务id用于审批
  decisionItem.value = $route.query.decisionItem as string
  measureDataId.value = $route.query.measureDataId as string // 检定数据id
  isFromCertificateList.value = $route.query.isFromCertificateList as string // 是否来源于证书列表页
})
</script>

<template>
  <app-container>
    <detail-page :title="`检定审批管理(${textMap[pageType]})`">
      <template #btns>
        <el-button v-if="pageType === 'detail' && certificateFile" type="primary" @click="downloadReport">
          证书报告下载
        </el-button>
        <el-button v-if="pageType === 'detail' && originalRecordFile" type="primary" @click="downloadRecord">
          原始记录下载
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '2') && pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="warning" @click="handleApprove('驳回')">
          驳回
        </el-button>
        <el-button v-if="(`${decisionItem}` === '1' || `${decisionItem}` === '3') && pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '审批中' && showApprovalButton" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '草稿箱' && showSubmitButton" type="primary" @click="submitForm">
          提交
        </el-button>
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </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'" :measure-data-id="measureDataId" :page-type="pageType" @report-data="reportData" />

    <!-- 审批详情 -->
    <approval-record-table v-if="current === 'certificate-approval-record' && processId" :process-id="processId" />
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" @refuse="refuse" @reject="reject" />
  </app-container>
</template>