<!-- 培训计划审批详情 -->
<script lang="ts" setup name="PlanApprovalDetail">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IButton } from '../plan_interface'
import baseInfoDetail from './baseinfoDetail.vue'
import { getListDetail } from '@/api/measure/plan'
import { cancelApproval, fetchApproval } from '@/api/approval'
import ApprovalRecord from '@/components/ApprovalRecord/ApprovalRecord.vue'

const infoId = ref('') // id
const buttonArray = ref<IButton[]>([])
const approvalDialog = ref() // 审批对话框组件ref
const approvalRecord = ref() // 审批流程组件ref
const approvalStatusName = ref('') // 审批状态、控制草稿箱没有审批流程
const buttonsSet: { [key: string]: IButton[] } = {
  2: [{ name: '查看', type: 'primary' },
    { name: '同意', type: 'primary' },
    { name: '驳回', type: 'primary' },
    { name: '拒绝', type: 'danger' },
  ],
  3: [
    { name: '取消', type: 'primary' },
  ],
}
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  const status = $route.params.type
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 详情表单
const dataForm = ref({
  deptId: '', // 组织部门id-系统组织表
  deptName: '', // 主管部门
  director: '', // 负责人-人员名字
  effectiveCompany: '', // 实施单位
  planName: '', // 培训名称
  planNo: '', // 计划编号
  remark: '', // 备注
  trainAddress: '', //	培训地点
  trainContent: '', //	培训地点
  trainHour: '', //	培训地点
  trainNumber: 0, // 培训人数
  trainPerson: '', // 培训对象
  taskId: '', // 任务id（同意、驳回等操作使用）
  processId: '', // 流程实例id
  processInstanceId: '', // 流程实例id（取消操作使用）
  trainStaffList: [
    {
      company: '',
      examResult: '',
      id: 0,
      name: '',
      remark: '',
      signTime: '',
      staffId: 0,
      technologyJob: '',
    },
  ],
  trainTime: '', // 培训时间
})
// --------------------------表单详情通过前一页表格数据（路由）获取--------------------------
// 获取表单详情
const getInfo = () => {
  getListDetail({ id: infoId.value }).then((res) => {
    dataForm.value.trainStaffList = res.data.trainStaffList
    // if (dataForm.value.approvalStatus) {
    //   // 待审批
    //   if (dataForm.value.approvalStatus == '2') {
    //     buttonArray.value = buttonsSet[dataForm.value.approvalStatus]
    //   }
    //   else if (dataForm.value.approvalStatus == '3') { // 审批中
    //     // todo：判断当前用户是否为发起人
    //     buttonArray.value = buttonsSet[dataForm.value.approvalStatus]
    //   }
    // }
  })
}
getInfo()

// 底部表格
const columns = [
  { text: '学员名称', value: 'name' },
  { text: '单位名称', value: 'company' },
  { text: '技术职称', value: 'technologyJob' },
  { text: '签到时间', value: 'signTime' },
]

// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 审批结束回调
const approvalSuccess = () => {
  close()
}
// 取消
const handleCancel = () => {
  const params = {
    processInstanceId: dataForm.value.processInstanceId!,
    comments: '',
  }
  ElMessageBox.confirm(
    '确认取消该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      cancelApproval(params).then((res) => {
        ElMessage({
          type: 'success',
          message: '取消成功',
        })
      })
      close()
    })
}
const approvalRecordData = ref([]) // 审批流程数据
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (processId) {
    fetchApproval(processId).then((res) => {
      approvalRecordData.value = res.data
    })
  }
  else {
    ElMessage.warning('流程实例id为空')
  }
}

// 点击数据后的操作按钮
const clickBtn = (buttonType: string) => {
  switch (buttonType) {
    case '同意':
      approvalDialog.value.initDialog('agree', dataForm.value.taskId)
      break
    case '驳回':
      approvalDialog.value.initDialog('reject', dataForm.value.taskId)
      break
    case '拒绝':
      approvalDialog.value.initDialog('refuse', dataForm.value.taskId)
      break
    case '取消':
      handleCancel()
      break
  }
}

// --------------------------表单从上一页表格中带出来、人员信息表格调培训计划详情调-------
onMounted(() => {
  dataForm.value.deptId = $route.query.deptId as string// 组织部门id-系统组织表
  dataForm.value.deptName = $route.query.deptName as string// 主管部门
  dataForm.value.director = $route.query.director as string// 负责人-人员名字
  dataForm.value.effectiveCompany = $route.query.effectiveCompany as string// 实施单位
  dataForm.value.planName = $route.query.planName as string// 培训名称
  dataForm.value.planNo = $route.query.planNo as string// 计划编号
  dataForm.value.remark = $route.query.remark as string // 备注
  dataForm.value.trainAddress = $route.query.trainAddress as string//	培训地点
  dataForm.value.trainContent = $route.query.trainContent as string//	培训地点
  dataForm.value.trainHour = $route.query.trainHour as string//	培训地点
  dataForm.value.trainNumber = parseInt($route.query.trainNumber as string)// 培训人数
  dataForm.value.trainPerson = $route.query.trainPerson as string// 培训对象
  dataForm.value.taskId = $route.query.taskId as string// 任务id（同意、驳回等操作使用）
  dataForm.value.processId = $route.query.processId as string// 流程实例id
  dataForm.value.processInstanceId = $route.query.processInstanceId as string// 流程实例id（取消操作使用）
  dataForm.value.trainTime = $route.query.trainTime as string// 培训时间
  approvalStatusName.value = $route.query.approvalStatusName as string
  if (approvalStatusName.value !== '草稿箱') {
    getApprovalRecord(dataForm.value.processId) // 查询审批记录
  }
})
</script>

<template>
  <app-container>
    <detail-page title="培训管理审批">
      <template #btns>
        <el-button v-for="(item, index) in buttonArray" :key="index" :type="item.type" @click="clickBtn(item.name)">
          {{ item.name }}
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <base-info-detail :form-inline="dataForm" />
    </detail-page>

    <detail-block title="人员信息">
      <el-table
        :data="dataForm.trainStaffList"
        border
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #default="scope">
            <span>{{ scope.row[item.value] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block v-if="approvalStatusName !== '草稿箱'" title="审批流程">
      <!-- 审批流程 -->
      <approval-record ref="approvalRecord" :approval-record-data="approvalRecordData" />
    </detail-block>
    <!-- 审批弹出框组件 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>