<!-- 溯源供方审批详情 -->
<script lang="ts" setup name="SourceApprovalDetail">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ISupplier, traceSupplierPerson } from '../list_interface'
import baseInfoDetail from './baseInfoDetail.vue'
import { getSoucreListDetail } from '@/api/measure/source'
import { cancelApproval, fetchApproval } from '@/api/approval'
import ApprovalRecord from '@/components/ApprovalRecord/ApprovalRecord.vue'

const approvalRecord = ref() // 审批流程组件ref
const infoId = ref('') // id
const approvalType = ref('')
const approvalStatusName = ref('') // 审批状态、控制草稿箱没有审批流程

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  approvalType.value = $route.params.type as string
  console.log('approvalType', approvalType)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 溯源供方详情表单
const dataForm = ref<ISupplier>({
  id: '',
  businessContent: '', // 业务内容
  supplierName: '', // 公司名称
  supplierNo: '', //	溯源供方编号（列表、更新接口参数）
  bankAccount: '', // 银行账户名
  bankAccountNumber: '', // 银行账号
  bankName: '', // 银行名称
  briefName: '', // 公司简称
  businessScope: '', // 公司业务范围
  companyAddress: '', // 公司地址-详细地址
  companyArea: '', // 公司地址-区
  companyCity: '', //	公司地址-市
  companyCountry: '', // 公司地址-国家
  companyProvince: '', // 公司地址-省
  companyAreaName: '', // 公司地址-区名
  companyCityName: '', //	公司地址-市名
  companyCountryName: '', // 公司地址-国家名
  companyProvinceName: '', // 公司地址-省名
  createTime: '', // 创建时间
  director: '', // 负责人
  fax: '', // 传真
  invoiceAddress: '', // 开票地址-详细地址
  invoiceArea: '', // 开票地址-区
  invoiceCity: '', //	开票地址-市
  invoiceCountry: '', // 开票地址-国家
  invoiceProvince: '', // 开票地址-省
  invoiceAreaName: '', // 开票地址-区
  invoiceCityName: '', //	开票地址-市
  invoiceCountryName: '', // 开票地址-国家
  invoiceProvinceName: '', // 开票地址-省
  mailbox: '', // 邮箱
  minioFileName: '', // 上传文件返回名称
  mobile: '', // 手机
  phone: '', // 电话
  postalCode: '', //	邮编
  remark: '', // 备注
  taxNumber: '', // 税号
  website: '', //	网址
  traceSupplierPersonList: [], // 溯源供方人员列表
  taskId: '', // 任务id, 流程审批用
  processId: '', // 流程实例id
  approvalStatus: '', // 审批状态
  approvalStatusName: '', // 审批状态名称
})

const traceSupplierPersonList: Ref<traceSupplierPerson[]> = ref([])
const columns = [
  { text: '人员编号', value: 'personNo' },
  { text: '姓名', value: 'name' },
  { text: '工作部门', value: 'department' },
  { text: '职务', value: 'job' },
  { text: '联系方式', value: 'phone' },
]
// 获取表单详情
const getInfo = () => {
  getSoucreListDetail({ id: infoId.value }).then((res) => {
    dataForm.value = res.data
  })
}
getInfo()
// 初始化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 = () => {
  getInfo()
}
// 取消
const handleCancel = () => {
  const params = {
    processInstanceId: dataForm.value.processId!,
    comments: '取消审批',
  }
  ElMessageBox.confirm(
    '确认取消该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelApproval(params).then(() => {
      ElMessage.success('取消成功')
    })
  })
}
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(() => {
  dataForm.value.processId = $route.query.processId as string// 流程实例id
  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-if="approvalType === '2'" type="primary" @click="clickBtn('同意')">
          同意
        </el-button>
        <el-button v-if="approvalType === '2'" type="primary" @click="clickBtn('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="approvalType === '2'" type="primary" @click="clickBtn('驳回')">
          驳回
        </el-button>
        <el-button v-if="approvalType === '3'" type="primary" @click="handleCancel()">
          取消
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <base-info-detail :form-data="dataForm" />
    </detail-page>
    <detail-block title="人员信息">
      <el-table
        :data="traceSupplierPersonList"
        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>

<style lang="scss" scoped>
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

.info-content {
  margin-top: 10px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;

  .content-top {
    display: flex;
    justify-content: space-around;
  }

  .info-dizhi {
    margin-right: 155px;
  }
}

.el-select {
  width: 9vw;
  margin-right: 15px;
}

.info-dizhi .el-input {
  width: 20vw;
}

.input-width .el-input {
  width: 30vw;
}

.info-appendix span {
  margin-right: 25px;
}

.table-top {
  margin-top: 10px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;

  .table-top-title {
    width: 60vw;
    text-align: center;
  }
}

.dialog-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>