<template>
  <div>
    <a-form>
      <a-row :gutter="24">
        <!--项目编号-->
        <a-col :lg='8' :md='24' :sm='24' :xl='8' :xs='24'>
          <a-form-item :label="$t('base.info.project.number')">
            <a-input v-model.trim="formData.projectNo" :maxLength='128' :placeholder="$t('global-btn.please-enter') + $t('base.info.project.number')" allowClear/>
          </a-form-item>
        </a-col>
        <!--DVP编号-->
        <a-col :lg='8' :md='24' :sm='24' :xl='8' :xs='24'>
          <a-form-item :label="$t('base.info.dvp-code')">
            <a-input v-model.trim="formData.dvpCode" :maxLength='128' :placeholder="$t('global-btn.please-enter') + $t('base.info.dvp-code')" allowClear/>
          </a-form-item>
        </a-col>
        <!--零部件编号-->
        <a-col :lg='8' :md='24' :sm='24' :xl='8' :xs='24'>
          <a-form-item :label="$t('workbench.compoment-number')">
            <a-input v-model.trim="formData.partNo" :maxLength='128' :placeholder="$t('global-btn.please-enter') + $t('workbench.compoment-number')" allowClear/>
          </a-form-item>
        </a-col>
        <!--零部件名称-->
        <a-col :lg='8' :md='24' :sm='24' :xl='8' :xs='24'>
          <a-form-item :label="$t('workbench.compoment-name')">
            <a-input v-model.trim="formData.partName" :maxLength='128' :placeholder="$t('global-btn.please-enter') + $t('workbench.compoment-name')" allowClear/>
          </a-form-item>
        </a-col>
        <!--试验项目-->
        <a-col :lg='8' :md='24' :sm='24' :xl='8' :xs='24'>
          <a-form-item :label="$t('plan.dvp.test-project')">
            <a-input v-model.trim="formData.testProject" :maxLength='128' :placeholder="$t('global-btn.please-enter') + $t('plan.dvp.test-project')" allowClear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-form-item class='tr m15'>
          <a-col :lg='24' :md='24' :sm='24' :xl='24' :xs='24'>
            <!-- 重置 -->
            <a-button class="mr10" type="primary" @click='reset'>
              {{ $t('global-btn.reset') }}
            </a-button>
            <!-- 查询 -->
            <a-button class="mr10" type="primary" @click='search'>
              {{ $t('global-btn.search') }}
            </a-button>
          </a-col>
        </a-form-item>
      </a-row>
    </a-form>

    <a-table
      :columns='tableColumns'
      :dataSource='tableData'
      :pagination='pagination'
      :rowKey='(record, index) => { return record.historyTestId; }'
      :scroll='{x:1000, y: tableHeightValue }'
      size="small"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      @change='handlePageChange'
      bordered
      :components='components'
    >
      <!-- 序号列 -->
      <template slot='index' slot-scope='text, record, index'>
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template>
      <!-- 试验来源 -->
      <template slot='testSource' slot-scope='text, record, index'>
        <span>{{ testSourceMap[record.testSource] || '-' }}</span>
      </template>
      <!-- 试验类型 -->
      <template slot='testType' slot-scope='text, record, index'>
        <span>{{ testTypeMap[record.testType] || '-' }}</span>
      </template>
    </a-table>
  </div>
</template>
<script>

import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props;
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.tableColumns.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 {
      /** 查询数据 */
      formData: {},
      /** 表格高度 */
      tableHeight: window.innerHeight - 352 + 'px',
      tableHeightValue: window.innerHeight - 352,
      /** 表格数据 */
      tableData: [],
      /** 表格列 */
      tableColumns: [
        //序号
        {
          title: this.$t('plan.dvp.serial-number'),
          dataIndex: 'index',
          width: 100,
          fixed: 'left',
          align: 'center',
          scopedSlots: {
            customRender: 'index'
          },
          ellipsis: true
        },
        // 项目编号
        {
          title: this.$t('header.project-number'),
          dataIndex: 'projectNo',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // DVP编号
        {
          title: this.$t('base.info.dvp-code'),
          dataIndex: 'dvpCode',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // 零部件编号
        {
          title: this.$t('workbench.compoment-number'),
          dataIndex: 'partCode',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // 零部件名称
        {
          title: this.$t('workbench.compoment-name'),
          dataIndex: 'partName',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // CPAC编码
        {
          title: this.$t('base.info.CPAC-code'),
          dataIndex: 'cpacCode',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // FND代码
        {
          title: this.$t('plan.dvp.fnd-code'),
          dataIndex: 'fndCode',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // 试验类型
        {
          title: this.$t('plan.dvp.test-type'),
          dataIndex: 'testType',
          width: 100,
          align: 'center',
          scopedSlots: {
            customRender: "testType"
          }
        },
        // 试验项目
        {
          title: this.$t('plan.dvp.test-project'),
          dataIndex: 'testProject',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        // 试验来源
        {
          title: this.$t('plan.dvp.test-source'),
          dataIndex: 'testSource',
          width: 100,
          align: 'center',
          scopedSlots: {
            customRender: "testSource"
          }
        },
        // 开发目标要求（接受标准）
        {
          title: this.$t('base.info.development-objective-requirements'),
          dataIndex: 'targetRequire',
          width: 110,
          align: 'center',
          ellipsis: true
        },
        // 试验标准和试验方法
        {
          title: this.$t('plan.dvp.test-standards-and-test-method'),
          dataIndex: 'testStandard',
          width: 150,
          align: 'center',
          ellipsis: true
        },
        // 创建者
        {
          title: this.$t('plan.dvp.creator'),
          dataIndex: 'creator',
          width: 100,
          align: 'center',
          ellipsis: true
        }
      ],
      /** 分页 */
      pagination: {
        size: 'small',
        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, //总条数
        showQuickJumper: true,
      },
      /** 试验来源Map 用于表格插槽显示 */
      testSourceMap: {
        '1': this.$t('dvp.drawing'),
        '2': this.$t('dvp.KPC'),
        '3': this.$t('dvp.web-require'),
        '4': this.$t('dvp.standard'),
        '5': this.$t('dvp.laws-and-regulations')
      },
      testTypeMap: {
        '1': this.$t('dvp.appearance'),
        '2': this.$t('dvp.size'),
        '3': this.$t('dvp.material-regulations'),
        '4': this.$t('dvp.performance-and-functionality')
      },
      /** 创建者下拉选项 */
      creatorList: [],
      /** 表格选中行的key 默认是index */
      selectedRowKeys: [],
      /** 表格选中行数据 */
      selectedRow: [],
    }
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight = window.innerHeight - 352 + 'px';
      this.tableHeightValue = window.innerHeight - 352;
    };
    this.initData();
  },
  methods: {

    /**
     * 初始化表格方法
     */
    initData() {
      let data = {
        dvpId: this.$store.getters.dvpId,
        projectNo: this.formData.projectNo,
        dvpCode: this.formData.dvpCode,
        partName: this.formData.partName,
        partCode: this.formData.partCode,
        testProject: this.formData.testProject,
        testIds: this.selectedRowKeys,
        pagination: {
          pageSize: this.pagination.pageSize,
          pageCurrent: this.pagination.current
        }
      };
      this.$api.initHistoryDvpList(data).then(res => {
        if (res.flag) {
          this.tableData = res.data.data || [];
        } else {
          this.tableData = [];
        }
      });
    },

    /**
     * 保存
     */
    saveHistoryDvpEdit() {
      if (this.selectedRowKeys.length > 0) {
        let data = {
          dvpId: this.$store.getters.dvpId,
          testIds: this.selectedRowKeys
        };
        this.$api.historyDvpBatchSave(data).then( res => {
          if (res.flag) {
            this.$message.success(res.message);
            this.selectedRowKeys = [];
            this.$emit("cancelEditDvp");
            this.$emit("initData")
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },

    /**
     * 搜索模块按钮-查询
     */
    search() {
      this.initData();
    },

    /**
     * 搜索模块按钮-重置
     */
    reset() {
      this.formData = {};
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.initData();
    },

    /**
     * 表格选中行事件
     * @param selectedRowKeys
     */
    onSelectChange(selectedRowKeys,selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRow = selectedRows;
    },

    /**
     * 下拉选模糊查询
     * @param input
     * @param option
     * @returns {boolean}
     */
    handleFilterDataList(input,option) {
      return option.componentOptions.children[0].text.toLowerCase().includes(input.toLowerCase());
    },

    /**
     * 表格 - 点击分页中数字触发的方法
     * @param pagination
     */
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.pageNo = pagination.current;
      this.initData();
    },
  }
}

</script>

<style lang="less" scoped>

</style>
