<script lang="ts" setup name="SourceApprovalDetail">
// 溯源供方审批详情
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IButton, ISupplier, traceSupplierPerson } from '../list_interface'
import baseInfoDetail from './baseInfoDetail.vue'
import { getSoucreListDetail } from '@/api/measure/source'
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<ISupplier>({
  id: '',
  businessContent: '',
  supplierName: '',
  supplierNo: '',
  bankAccount: '',
  bankAccountNumber: '',
  bankName: '',
  briefName: '',
  businessScope: '',
  companyAddress: '',
  companyArea: '',
  companyCity: '',
  companyCountry: '',
  companyProvince: '',
  createTime: '',
  director: '',
  fax: '',
  invoiceAddress: '',
  invoiceArea: '',
  invoiceCity: '',
  invoiceCountry: '',
  invoiceProvince: '',
  mailbox: '',
  minioFileName: '',
  mobile: '',
  phone: '',
  postalCode: '',
  remark: '',
  taxNumber: '',
  website: '',
  traceSupplierPersonList: [],
})
// 获取表单详情
const getInfo = () => {
  getSoucreListDetail({ 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 traceSupplierPersonList: Ref<traceSupplierPerson[]> = ref([])
const columns = [
  { text: '人员编号', value: 'personNo' },
  { text: '姓名', value: 'name' },
  { text: '工作部门', value: 'department' },
  { text: '职务', value: 'job' },
  { text: '联系方式', value: 'phone' },
]

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

const approvalActivities = [
  {
    name: '张三',
    deptName: '审计局',
    content: '同意',
    timestamp: '2018-04-15 08:00:00',
  },
  {
    name: '张三',
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    name: '张三',
    content: 'Success',
    timestamp: '2018-04-11',
  },
]

// 审批结束回调
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
  }
}
</script>

<template>
  <app-container>
    <detail-page title="溯源供方审批">
      <template #btns>
        <el-button type="primary" @click="clickBtn('同意')">
          同意
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <base-info-detail :form-data="dataForm" />
    </detail-page>
    <detail-block title="审批流程">
      <!-- 审批流程 -->
      <div>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in approvalActivities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            <div><span>审批人：</span>{{ activity.name }} <span style="margin-left: 10px;">审批意见：</span>{{ activity.content }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </detail-block>
    <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>
    <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>