<script lang="ts" setup name="SourceApprovalDetail">
// 溯源供方审批详情
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IButton } from '../plan_interface'
import baseInfoDetail from './baseinfoDetail.vue'
import { getListDetail } from '@/api/system/plan'
import { submitApproval } from '@/api/approval'
const infoId = ref('') // id
const buttonArray = ref<IButton[]>([])

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: '',
  deptName: '',
  director: '',
  effectiveCompany: '',
  planName: '',
  planNo: '',
  remark: '',
  trainAddress: '',
  trainContent: '',
  trainHour: '',
  trainNumber: 0,
  trainPerson: '',
  taskId: '',
  processId: '',
  trainStaffList: [
    {
      company: '',
      examResult: '',
      id: 0,
      name: '',
      remark: '',
      signTime: '',
      staffId: 0,
      technologyJob: '',
    },
  ],
  trainTime: '',
})
// 获取表单详情
const getInfo = () => {
  getListDetail({ id: infoId.value }).then((res) => {
    dataForm.value = res.data
    // 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 = () => {
  getInfo()
}
// 取消
const handleCancel = () => {
  const params = {
    taskId: dataForm.value.taskId!,
    comments: '',
  }
  ElMessageBox.confirm(
    '确认取消该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      submitApproval('revoke', params).then((res) => {
        ElMessage({
          type: 'success',
          message: '取消成功',
        })
      })
    })
}
const approvalDialog = ref()
// 点击数据后的操作按钮
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(async () => {
  dataForm.value.processId = $route.query.processId as string // 任务id
})
</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="审批流程">
      <!-- 审批流程 -->
      <approval-record :process-id="dataForm.processId" />
    </detail-block>
    <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>
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>