<template>
  <a-card class="back-card">
    <div class="pad-12">
      <a-table
          class="with-page"
          bordered
          size="small"
          :scroll="{ x: 1000 }"
          :pagination="pagination"
          :rowKey="(record, index) => {
            return index;
          }"
          :columns="approvalRecordColumns"
          :dataSource="approvalRecordData"
          :loading="loading"
          @change="handleTableChange">
        <template slot="sortNumber" slot-scope="text, row, index">
          {{ (pagination.pageNo - 1) * pagination.pageSize + 1 + index }}
        </template>
        <template slot="approveResult" slot-scope="text, record">
          {{
            record.approveResult == 1
              ? $t('global-constant.approval-status.agree')
              : record.approveResult == 2
                ? $t('global-constant.approval-status.reject')
                : "-"
          }}
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>


export default {
  name: "ApprovalRecord",
  components: {},
  props: {},
  data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: (total) => this.$t('global-constant.table.show-total', {total:`${total}`}), // 显示总数
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ["10", "20", "50", "100", "200"], // 每页数量选项
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        total: 0, //总条数
      },
      approvalRecordColumns: [
        // 审批层级
        {
          title: () => this.$t('base.info.approval-level'),
          align: "center",
          width: 150,
          ellipsis: true,
          scopedSlots: {
            customRender: "sortNumber"
          }
        },
        // 审批人
        {
          title: () => this.$t('base.info.reviewer'),
          align: "center",
          width: 150,
          dataIndex: "approver",
          key: "approver",
          ellipsis: true
        },
        // 审批角色
        {
          title: () => this.$t('base.info.approval-role'),
          align: "center",
          width: 150,
          dataIndex: "approveRole",
          key: "approveRole",
          ellipsis: true
        },
        // 审批结果
        {
          title: () => this.$t('base.info.review-result'),
          align: "center",
          width: 150,
          dataIndex: "approveResult", //1-同意，2-驳回，0-进行中
          scopedSlots: {
            customRender: "approveResult"
          },
          key: "approveResult",
          ellipsis: true
        },
        // 审批意见
        {
          title: () => this.$t('base.info.review-comments'),
          align: "center",
          width: 150,
          dataIndex: "approveOpinion",
          key: "approveOpinion",
          ellipsis: true
        },
        // 审批时间
        {
          title: () => this.$t('base.info.review-time'),
          align: "center",
          dataIndex: "approveTime",
          width: 150,
          key: "approveTime",
          ellipsis: true
        }
      ],
      approvalRecordData: [],
      loading: false,
    };
  },
  methods: {
    // 分页触发
    handleTableChange(pagination) {
      this.pagination.pageNo = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getApprovalRecordList();
    },
    // 审批管理初始化
    async getApprovalRecordList() {
      var data = {
        mainDvpId: this.$store.getters.mainDvpId,
        dvpType: 0,
        versionFlag: 1, // 0:获取当前版本 1:获取所有版本
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      };
      this.loading = true;
      await this.$api.getApprovalRecordList(data).then((response) => {
        if (response.flag) {
          if (response.data && response.data.data) {
            this.approvalRecordData = response.data.data;
          } else {
            this.approvalRecordData = [];
            this.pagination.total = 0;
          }
        } else {
          this.approvalRecordData = [];
          this.pagination.total = 0;
        }
      })
      .finally(() => {
        this.loading = false;
      });
    }
  },
  mounted() {
    this.getApprovalRecordList();
  }
};
</script>
<style lang="less" scoped>
.back-card {
  border: hidden;
  border-radius: 0px;
}
.pad-12 {
  padding: 12px 0;
}
.mr-12 {
  margin-right: -24px;
}
</style>
