<template>
  <a-card class="backCard">
    <div class="pad12">
      <a-table
        :columns="columns"
        :pagination="pagination"
        :dataSource="tableData"
        :loading="tableLoading"
        :rowKey="(record, index) => {
              return index;
          }"
        :scroll="{ x: 1000 }"
        bordered
        class="with-page"
        size="small"
        @change="handleTableChange"
        :components='components'>
        <template slot="index" 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: "PartsInfo",
  components: {
    VueDraggableResizable
  },
  props: {},
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.columns.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, 90);
							}
						}
					};
					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, //总条数
        position: 'bottom',
      },
      tableData: [],
      tempFormData: {},
      queryParam: {
        fndCode: undefined,
        partNo: undefined,
        partName: undefined,
        ownerDepartment: undefined,
        supplierOne: undefined,
        supplierTwo: undefined,
        purchaseEngineer: undefined,
        planCompletionTime: undefined,
        inventoryCompletionTime: undefined,
      },
      columns: [
        // 序号
        {
          title: () => this.$t('base.info.serial-number'),
          dataIndex: "index",
          align: "center",
          width: 100,
          ellipsis: true,
          scopedSlots: {
            customRender: "index"
          }
        },
        // 零部件编号
        {
          title: () => this.$t('workbench.compoment-number'),
          align: "center",
          dataIndex: "partNo",
          width: 200,
          key: "partNo",
          ellipsis: true
        },
        // 零部件名称
        {
          title: () => this.$t('workbench.compoment-name'),
          align: "center",
          width: 200,
          dataIndex: "partName",
          key: "partName",
          ellipsis: true
        },
        // 归属部门
        {
          title: () => this.$t('workbench.belonging-department'),
          align: "center",
          width: 150,
          dataIndex: "ownerDepartment",
          key: "ownerDepartment",
          ellipsis: true
        },
        // 供应商1
        {
          title: () => this.$t('workbench.supplier')+'1',
          align: "center",
          width: 200,
          dataIndex: "supplierOne",
          key: "supplierOne",
          ellipsis: true
        },
        // 供应商2
        {
          title: () => this.$t('workbench.supplier')+'2',
          align: "center",
          width: 200,
          dataIndex: "supplierTwo",
          key: "supplierTwo",
          ellipsis: true
        },
        // 采购质量工程师
        {
          title: () => this.$t('workbench.sourcing-quality-engineer'),
          align: "center",
          width: 150,
          dataIndex: "purchaseEngineer",
          key: "purchaseEngineer",
          ellipsis: true
        },
        // DVP计划完成时间
        {
          title: () => this.$t('workbench.dvp-plan-completion-time'),
          align: "center",
          width: 150,
          dataIndex: "planCompletionTime",
          key: "planCompletionTime",
          ellipsis: true
        },
        // 材料清单完成时间
        {
          title: () => this.$t('workbench.completion-time-of-material-list'),
          align: "center",
          width: 150,
          dataIndex: "inventoryCompletionTime",
          key: "inventoryCompletionTime",
          ellipsis: true
        },
      ],
      tableLoading: false
    };
  },
  methods: {
    // 获取零部件DVP分页列表
    getDvpPartInfoList() {
      let _this = this;
      _this.tableLoading = true;
      let data = {
        dvpId: _this.$store.getters.dvpId,
        fndCode: _this.queryParam.fndCode,
        partNo: _this.queryParam.partNo,
        partName: _this.queryParam.partName,
        ownerDepartment: _this.queryParam.ownerDepartment,
        supplierOne: _this.queryParam.supplierOne,
        supplierTwo: _this.queryParam.supplierTwo,
        purchaseEngineer: _this.queryParam.purchaseEngineer,
        planCompletionTime: _this.queryParam.planCompletionTime,
        inventoryCompletionTime: _this.queryParam.inventoryCompletionTime,
        pagination: {
          pageSize: _this.pagination.pageSize,
          pageCurrent: _this.pagination.current
        }
      };
      this.$api.getDvpPartInfoList(data).then(res => {
        if (!res.flag) {
          this.$notification.error({message: res.message});
        }
        _this.tableData = res.data.data || [];
        _this.pagination.total = res.data.total || 0;
        _this.pagination.pageNo = res.data.pageNo;
        _this.pagination.pageSize = res.data.pageSize;
      }).finally(() => {
        _this.tempFormData = {};
        _this.tableLoading = false;
      });
    },
    // 分页触发
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.tempFormData = { ...this.queryParam };
      this.getDvpPartInfoList();
    },
  },
  mounted() {
    this.getDvpPartInfoList();
  }
};
</script>
<style lang="less" scoped>
.fileList {
  max-height: 62px;
  width: 100%;
  overflow-y: auto;
  margin: 0 !important;

  li {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    margin: 0 !important;

    a {
      color: #40a9ff;
    }
  }
}

.comments-container {
  width: 100%;

  .comments {
    display: -webkit-box;
    /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical;
    /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
    -webkit-line-clamp: 3;
    /*行数，超出三行隐藏且多余的用省略号表示...*/
    line-clamp: 3;
    word-break: break-all;
    overflow: hidden;
    max-width: 100%;
    max-height: 60px;
  }
}

.backCard {
  border: hidden;
  border-radius: 0px;
}

.pad12 {
  padding: 12px;
}
</style>
