<template>
  <a-card class="back-card">
    <div class="pad-12">
      <a-table
        :columns="loginManagentColumns"
        :dataSource="loginManagentData"
        :loading="loading"
        :pagination="pagination"
        :rowKey="
          (record, index) => {
            return index;
          }"
        :scroll="{ x: 500 }"
        bordered
        size="small"
        @change="handleOuterTableChange"
        :components='components'
				bordered
      >
        <template slot="sortNumber" slot-scope="text, row, index"
          >{{ (pagination.pageNo - 1) * pagination.pageSize + 1 + index }}
        </template>
        <!-- 序号列 -->
        <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: "LogManagent",
  components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.loginManagentColumns.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), // 改变每页数量时更新显示
        // onChange: (page, pageSize) => self.changePage(page, pageSize), //点击页码事件
        total: 0, //总条数
        position: 'bottom'
      },
      loginManagentColumns: [
        // 序号
        {
          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: 100,
          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
        }
      ],
      loginManagentData: []
    };
  },
  methods: {
    // 分页触发
    handleOuterTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getLoginManagentList();
    },
    // 日志管理初始化
    getLoginManagentList() {
      let _this = this;
      _this.loading = true;
      let data = {
        mainDvpId: _this.$store.getters.mainDvpId,
        pagination: _this.pagination,
        dvpType: 1
      };
      this.$api.systemInitDvpLogManage(data).then(res => {
          if (!res.flag) {
            this.$notification.error({ message: res.message });
          } else {
            if (res.data && res.data.data) {
              _this.loginManagentData = res.data.data
              _this.pagination.total = res.data.total;
            }else {
              _this.loginManagentData = [];
              _this.pagination.total = 0
            }
            _this.each(_this.loginManagentData);
          }
        })
        .catch(error => {
          console.error("Error occurred: " + error);
        })
        .finally(() => {
          _this.loading = false;
        });
    },
    //遍历数据
    each(loginManagentData) {
      for (let i = 0; i < loginManagentData.length; i++) {
        if (loginManagentData[i].exportFileType === "01") {
          loginManagentData[i].exportFileType = this.$t(
            "plan.log-managent.fmea"
          );
        } else if (loginManagentData[i].exportFileType === "02") {
          loginManagentData[i].exportFileType = this.$t(
            "plan.log-managent.drbfm"
          );
        } else if (loginManagentData[i].exportFileType === "03") {
          loginManagentData[i].exportFileType = this.$t(
            "plan.log-managent.dvp&r"
          );
        } else if (loginManagentData[i].exportFileType === "04") {
          loginManagentData[i].exportFileType = this.$t(
            "plan.log-managent.List of attributes"
          );
        } else if (loginManagentData[i].exportFileType === "05") {
          loginManagentData[i].exportFileType = this.$t(
            "plan-log-managent.RFMEA"
          );
        } else if (loginManagentData[i].exportFileType === "06") {
          loginManagentData[i].exportFileType = this.$t(
            "plan-log-managent.Xml"
          );
        } else if (loginManagentData[i].exportFileType === "07") {
          loginManagentData[i].exportFileType = this.$t(
             "plan.log-managent.dap&r"
          );
        }
      }
    }
  },
  mounted() {
    this.getLoginManagentList();
  }
};
</script>

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