<template>
  <a-card class="backCard">
    <div class="pad12">
      <a-table
        size="small"
        :pagination="pagination"
        :rowKey="(record, index) => {return index;}"
        bordered
        :columns="logManagementColumns"
        :dataSource="logManagementData"
        @change="handleOuterTableChange"
        :loading="loading"
        :scroll="{ x: 500 }"
        :components='components'
      >
        <!-- 序号列 -->
        <template slot="index" slot-scope="text, record, index">
          <span>{{(pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
  name: "LogManagement",
  components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.logManagementColumns.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 {
      loading: false,
      //分页
      pagination: {
        current: 1,
        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 //总条数
      },
      logManagementColumns: [
        // 序号
        {
          title: () => this.$t("base.info.serial-number"),
          dataIndex: "index",
          width: 100,
          align: "center",
          scopedSlots: {
            customRender: "index"
          },
          ellipsis: true
        },
        // 工号
        {
          title: () => this.$t("plan.log-managent.job-number"),
          width: 200,
          align: "center",
          dataIndex: "jobNumber",
          ellipsis: true
        },
        // 姓名
        {
          title: () => this.$t("plan.log-managent.full-name"),
          width: 200,
          align: "center",
          dataIndex: "userName",
          ellipsis: true
        },
        // 文件类型
        {
          title: () => this.$t("plan.log-managent.exportFileType"),
          width: 150,
          align: "center",
          dataIndex: "fileType",
          customRender: val => {
            if( val == 0 ) {
              return this.$t('header.dvp-plan')
            } else if ( val == 1) {
              return this.$t('header.dvp-verify')
            }
          },
          ellipsis: true
        },
        // 导出时间
        {
          title: () => this.$t("plan.log-managent.exportTime"),
          width: 200,
          dataIndex: "exportTime",
          align: "center",
          ellipsis: true
        }
      ],
      logManagementData: []
    };
  },
  methods: {
    // 分页触发
    handleOuterTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getLogManagementList();
    },
    // 日志管理初始化
    getLogManagementList() {
      let _this = this;
      _this.loading = true;
      let data = {
        mainDvpId: _this.$store.getters.mainDvpId,
        pagination: _this.pagination,
        dvpType: 0
      };
      this.$api.initDvpLogManage(data).then(res => {
          if (!res.flag) {
            this.$notification.error({ message: res.message });
          }
          if (res.data && res.data.data) {
            _this.logManagementData = res.data.data;
            _this.pagination.total = res.data.total;
          }else {
            _this.logManagementData = [];
            _this.pagination.total = 0
          }
          _this.each(_this.logManagementData);
        }).finally(() => {
          _this.loading = false;
        });
    },
    //遍历数据
    each(logManagementData) {
      for (let i = 0; i < logManagementData.length; i++) {
        if (logManagementData[i].exportFileType === "01") {
          logManagementData[i].exportFileType = this.$t("plan.log-managent.fmea");
        } else if (logManagementData[i].exportFileType === "02") {
          logManagementData[i].exportFileType = this.$t("plan.log-managent.drbfm");
        } else if (logManagementData[i].exportFileType === "03") {
          logManagementData[i].exportFileType = this.$t("plan.log-managent.dvp&r");
        } else if (logManagementData[i].exportFileType === "04") {
          logManagementData[i].exportFileType = this.$t("plan.log-managent.List of attributes");
        } else if (logManagementData[i].exportFileType === "05") {
          logManagementData[i].exportFileType = this.$t("plan-log-managent.RFMEA");
        } else if (logManagementData[i].exportFileType === "06") {
          logManagementData[i].exportFileType = this.$t("plan-log-managent.Xml");
        } else if (logManagementData[i].exportFileType === "07") {
          logManagementData[i].exportFileType = this.$t("plan.log-managent.dap&r");
        }
      }
    }
  },
  mounted() {
    this.getLogManagementList();
  }
};
</script>

<style lang="less" scoped>
.backCard {
  border: hidden;
  border-radius: 0px;
}
.pad12 {
  padding: 12px 0;
}
</style>
