<template>
  <a-card class="back-card">
    <div class="pad-12">
      <a-table
          class="with-page"
          bordered
          size="small"
          :scroll="{ x: 500 }"
          :pagination="pagination"
          :rowKey="(record, index) => {
            return index;
          }"
          :columns="approvalRecordColumns"
          :dataSource="approvalRecordData"
          :loading="loading"
          @change="handleTableChange"
          :components='components'>
        <template slot="sortNumber" slot-scope="text, row, index">
          {{ (pagination.pageNo - 1) * pagination.pageSize + 1 + index }}
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
  name: "ApprovalRecord",
  components: {
    VueDraggableResizable
  },
  props: {},
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.approvalRecordColumns.find((col) => {
						const k = col.dataIndex || col.key;
						return k === key;
					});
					if (!col || !col.width) {
						return h('th', { ...restProps }, [...children]);
					}
					const dragProps = {
						key: col.dataIndex || col.key,
						class: 'table-draggable-handle',
						attrs: {
							w: 10,
							x: col.width,
							z: 1,
							axis: 'x',
							draggable: true,
							resizable: false
						},
						on: {
							dragging: (x, y) => {
								col.width = Math.max(x, 70);
							}
						}
					};
					const drag = h('vue-draggable-resizable', { ...dragProps });
					return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
				}
			}
		};
    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'),
          dataIndex: "sortNumber",
          align: "center",
          width: 150,
          ellipsis: true,
          scopedSlots: {
            customRender: "sortNumber"
          }
        },
        // 审批性质
        {
          title: () => this.$t('base.info.approval-nature'),
          align: "center",
          width: 150,
          dataIndex: "taskName",
          key: "taskName",
          ellipsis: true
        },
        // 审批人
        {
          title: () => this.$t('base.info.reviewer'),
          align: "center",
          width: 150,
          dataIndex: "creator",
          key: "creator",
          ellipsis: true
        },
        // 审批角色
        {
          title: () => this.$t('base.info.approval-role'),
          align: "center",
          width: 150,
          dataIndex: "roleName",
          key: "roleName",
          ellipsis: true
        },
        // 审批结果
        {
          title: () => this.$t('base.info.review-result'),
          align: "center",
          width: 150,
          dataIndex: "taskStateName",
          key: "taskStateName",
          ellipsis: true
        },
        // 审批意见
        {
          title: () => this.$t('base.info.review-comments'),
          align: "center",
          width: 150,
          dataIndex: "voteContent",
          key: "voteContent",
          ellipsis: true
        },
        // 审批时间
        {
          title: () => this.$t('base.info.review-time'),
          align: "center",
          dataIndex: "taskEndTime",
          width: 150,
          key: "taskEndTime",
          ellipsis: true
        },
        // 审批类型
        {
          title: () => this.$t('base.info.approval-type'),
          align: "center",
          dataIndex: "approvalTaskType",
          width: 150,
          key: "approvalTaskType",
          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: 1,
        versionFlag: 1, // 0:获取当前版本 1:获取所有版本
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      };
      this.loading = true;
      await this.$api.getBaseInfoApprovalRecordList(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>
