<template>
  <Table ref="table" :list="getTaskHistory" :defaultParams="{ businessId, auditFlow }" :formatter="formatter"
    :spanMethod="objectSpanMethod" :showPage="false" style="margin: 50px 0;">
    <template #default>
      <DictColumn prop="auditorType" label="节点类型" dictType="auditor_type" />
      <DictColumn prop="signType" label="审批类型" dictType="sign_type" />
      <Column prop="nickName" label="审批人" />
      <Column prop="auditTime" label="审批时间" />
      <Column prop="remark" label="备注" />
    </template>
  </Table>
</template>

<script>
import { getTaskHistory } from "@/api/audit/flow";

export default {
  name: "AuditHistory",
  props: {
    businessId: {
      type: String,
      required: true,
    },
    auditFlow: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.$watch(() => this.businessId, this.$refs.table.getList)
    this.$watch(() => this.auditFlow, this.$refs.table.getList)
  },
  methods: {
    getTaskHistory,
    formatter(rows) {
      const result = []
      rows.forEach(row => {
        row.userList.forEach(user => {
          result.push({
            auditorType: row.auditorType,
            signType: row.signType,
            nickName: user.auditUserInfo.nickName,
            auditTime: user.auditTime,
            remark: user.remark,
            status: user.status,
            rowspan: user.id === row.userList[0].id ? row.userList.length : 0
          })
        })
      })
      return result
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0, 1].includes(columnIndex)) {
        if (row.rowspan > 0) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  },
};
</script>
