<!-- 培训计划审批详情 -->
<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'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'

const infoId = ref('') // id
const buttonArray = ref<IButton[]>([])
const processId = ref('') // 未通过-驳回编辑使用
const decisionItem = ref('') // 同意、驳回、拒绝按钮权限
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
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: '', // 培训时间
  rejectRemark: '', // 历次原因
})
// --------------------------表单详情通过前一页表格数据（路由）获取--------------------------
// 获取表单详情
const getInfo = () => {
  getListDetail({ id: infoId.value }).then((res) => {
    dataForm.value.trainStaffList = res.data.trainStaffList
  })
}

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

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

// -----------------------------------------审批-------------------------------------------
const approvalRecordData = ref([]) // 审批流程数据
// 查询审批记录
function getApprovalRecord(processId: string) {
  if (processId) {
    fetchApproval(processId).then((res) => {
      approvalRecordData.value = res.data
    })
  }
  else {
    ElMessage.warning('流程实例id为空')
  }
}
// 审批结束回调
const approvalSuccess = () => {
  close() // 返回上一页
}
// 审批
const handleApprove = (val: string, title = '') => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          close()
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '驳回') {
    approvalDialog.value.initDialog('reject', taskId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value)
  }
}
// ---------------------------------------------------------------------------------------

// --------------------------表单从上一页表格中带出来、人员信息表格调培训计划详情调-------
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 // 审批状态名称
  processId.value = $route.query.processId as string
  decisionItem.value = $route.query.decisionItem as string // 同意、驳回、拒绝按钮权限
  taskId.value = $route.query.taskId as string // 流程实例id
  if (approvalStatusName.value !== '草稿箱') {
    getApprovalRecord(dataForm.value.processId) // 查询审批记录
  }
  getInfo() // 获取表单详情
})

// 监听到驳回原因
const giveRejectRemark = (reason: string) => {
  if (dataForm.value.rejectRemark) {
    const lastIndex = dataForm.value.rejectRemark.lastIndexOf(reason)
    if (lastIndex === -1) { // 本次原因和上次最后一次原因不同才去拼接
      dataForm.value.rejectRemark = `${dataForm.value.rejectRemark};${reason}`
    }
  }
  else {
    dataForm.value.rejectRemark = reason
  }
}
</script>

<template>
  <app-container>
    <detail-page title="培训计划审批-详情">
      <template #btns>
        <el-button v-if="approvalStatusName === '待审批'" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="approvalStatusName === '待审批' && decisionItem !== '3'" type="primary" @click="handleApprove('驳回')">
          驳回
        </el-button>
        <el-button v-if="approvalStatusName === '待审批' && decisionItem !== '2'" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="approvalStatusName === '审批中'" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <!-- <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" :approval-status-name="approvalStatusName" />
    </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" @give-reject-remark="giveRejectRemark" />
    </detail-block>
    <!-- 审批弹出框组件 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>