<template>
  <div>
    <div class="mb10">
      <span>FFC中文描述:</span>
      <a-input class="w400 mr40" v-model="partsName"></a-input>
      <a-button type="primary" @click="handelFilter">查询</a-button>
    </div>
    <div>
      <a-table
        :data-source="partsList"
        :columns="tableColumns"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="
          (record, index) => {
            //之前做好的添加时获取内部零件列表接口返回的为id
            //新增添加外部零件需求时，架构师让前端使用规划页面获取外部零件列表的接口，导致返回的为partId
            return record.id?record.id:record.partId;
          }
        "
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        bordered
        size="small"
        style="overflow: hidden"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddParts",
  props: {
    // partsList
  },
  data() {
    return {
      partsName: "",
      partsList: [],
      tableColumns: [
        // {
        //   title: "序号",
        //   align: "center",
        //   customRender: (value, row, index) => `${index + 1}`,
        //   width: 50,
        //   ellipsis: true
        // },
        // {
        //   title: "短SVPPS",
        //   align: "center",
        //   dataIndex: "vpgCode",
        //   key: "vpgCode",
        //   ellipsis: true
        // },
        {
          title: "SVPPS",
          align: "center",
          dataIndex: "svppsCode",
          key: "svppsCode",
          ellipsis: true
        },
        {
          title: "FFC中文描述",
          align: "center",
          dataIndex: "ffcDescriptionCn",
          key: "ffcDescriptionCn",
          ellipsis: true
        },
        {
          title: "FFC英文描述",
          align: "center",
          dataIndex: "ffcDescriptionEn",
          key: "ffcDescriptionEn",
          ellipsis: true
        }
        // {
        //   title: "首次应用项目",
        //   align: "center",
        //   dataIndex: "firstProjectUsed",
        //   key: "firstProjectUsed",
        //   ellipsis: true
        // },
        // {
        //   title: "功能组",
        //   align: "center",
        //   dataIndex: "cocCode",
        //   key: "cocCode",
        //   ellipsis: true
        // },
        // {
        //   title: "工程师",
        //   align: "center",
        //   dataIndex: "engineerName",
        //   key: "engineerName",
        //   ellipsis: true
        // }
      ],
      pagination: {
        // defaultPageSize: 10,
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: (total) => `共 ${total} 条数据`, // 显示总数
        showSizeChanger: false, // 显示可改变每页数量
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
        // onChange: (page, pageSize) => self.changePage(page, pageSize), //点击页码事件
        total: 0 //总条数
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        name: "",
        fmeaId: this.$store.getters.fmeaId
      },
      selectedRowKeys: [],
      selectedData: [] //选中的数据
      //   selectedExterData: [],
      //   selectedExterRowKeys: [],
    };
  },

  mounted() {
    this.initPartsTable();
    this.selectedData = [];
  },
  methods: {
    // 表格 - 点击分页中数字触发的方法
    handleTableChange(pagination) {
      this.listQuery.pageSize = pagination.pageSize;
      this.listQuery.pageNo = pagination.current;
      this.pagination.current = pagination.current;
			this.selectedRowKeys=[];
			this.selectedData=[];
      this.initPartsTable();
    },
    onSelectChange(selectedRowKeys, row) {
      this.selectedData = row;
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("selectParts", this.selectedData);
    },
    initPartsTable() {
      this.$emit("initPartsTable", this.listQuery);
    },
    handelFilter() {
      this.listQuery.partName = this.partsName;
      this.listQuery.pageNo = 1;
      this.$emit("handelFilter", this.listQuery);
    }
  }
};
</script>
