<template>
  <div>
    <a-form class="ml10" layout="vertical">
      <a-row :gutter='24'>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.preventive-measure-description')">
            <a-input v-model="formData.name" allowClear :placeholder="$t('functional-analysis.add-modal.please-enter-name')"/>
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.top-modal.creator')">
            <a-input
                allowClear
                v-model='formData.creator'
                :placeholder="$t('functional-analysis.top-modal.please-enter-creator')"
            />
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item :label="$t('functional-analysis.top-modal.create-date')">
            <a-range-picker
                v-model='insertTime'
                @change='(date, dateString)=>{
                formData.insertTimeStart = dateString[0] || undefined;
                formData.insertTimeEnd = dateString[1] || undefined;
              }'
                style='width:100%'
            />
          </a-form-item>
        </a-col>
        <a-col :xl='6' :lg='8' :md='12' :sm='24' :xs='24'>
          <a-form-item class='tr' :label="'\xa0'">
            <a-button class='ml10' @click='reset'>{{ $t('global-btn.reset') }}</a-button>
            <a-button class='ml10' type="primary" @click="search"> {{ $t('global-btn.search') }} </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div>
      <a-table
          :data-source="tableData"
          :columns="tableColumns"
          :customRow="customRow"
          :rowKey="(row, index) => {return row.id;}"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          bordered
          size="small"
          :pagination='pagination'
          @change='handlePageChange'>
        <template slot="dataSource" slot-scope="text, row">
								<span>{{row.dataSource === '0' ? $t('functional-analysis.knowledge-base-creation-and-import')
                    : row.dataSource === '1' ? $t('functional-analysis.synchronize-from-dfmea')
                        : row.dataSource === '2' ? $t('functional-analysis.synchronize-from-pfmea') : ""}}
								</span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "AddDFMEALibraryMeasure",
  props: {
    struTypeCode: {
      default: '',
      type: String
    },
    struId: {
      default: '',
      type: String
    }
  },
  watch: {
    selectedRowKeys: {
      handler() {
        this.$nextTick(() => {
          this.$emit("getMeasureDataFromLibrary", this.selectedRows);
        });
      },
      deep: true,
      immediate: true
    },
  },
  data() {
    return {
      insertTime: undefined,
      // 搜索
      formData: {
        name: undefined,
        status: undefined,
        creator: undefined,
        insertTimeStart: undefined,
        insertTimeEnd: undefined,
        nodeType: undefined,
        nodeSource: undefined
      },
      // 分页
      pagination: {
        // defaultPageSize: 10,
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showTotal: total => this.$t('functional-analysis.a-total-of-data', {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, //总条数
        showQuickJumper: true
      },
      tableData: [],
      tableColumns: [
        {
          title: () => this.$t('research.serial-number'),
          width: 70,
          align: 'center',
          dataIndex: 'index',
          customRender: (value, row, index) => {
            return (this.pagination.current - 1) * this.pagination.pageSize + index + 1;
          }
        },
        {
          title: () => this.$t('functional-analysis.preventive-measure-number'),
          align: "center",
          dataIndex: "measureNo",
          width: 150,
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.preventive-measure-description'),
          align: "center",
          width: 150,
          dataIndex: "measureName",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.o-value'),
          align: "center",
          width: 100,
          dataIndex: "occurrence",
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.add-modal.data_source'),
          width: 100,
          dataIndex: 'dataSource',
          align: 'center',
          scopedSlots: {
            customRender: 'dataSource'
          },
        },
        {
          title: () => this.$t('functional-analysis.add-modal.creator'),
          width: 150,
          dataIndex: 'creator',
          align: 'center'
        },
        {
          title: () => this.$t('functional-analysis.property-modal.create-time'),
          width: 150,
          dataIndex: 'createTime',
          align: 'center'
        }
      ],
      name: '',
      selectedRowKeys: [],
      selectedRows: [],
      dataSource: []
    };
  },

  mounted() {
    this.search();
  },
  methods: {
    reset() {
      this.formData = {};
      this.dataSource = [];
      this.pagination.pageSize = 10;
      this.search()
    },
    /**
     * 搜索
     */
    search() {
      this.pagination.current = 1;
      this.selectedRowKeys = [];
      this.selectedRows = [];
      this.list();
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.$api.searchPreventiveMeasure({
        dataStatus: '3',
        measureName: _that.formData.name,
        creator: _that.formData.creator,
        createTimeStart: _that.formData.insertTimeStart,
        createTimeEnd: _that.formData.insertTimeEnd,
        pageCurrent: _that.pagination.current,
        pageSize: _that.pagination.pageSize
      }).then((res) => {
        if (res.flag) {
          _that.tableData = res.data.data;
          _that.pagination.total = res.data.total;
          _that.dataSource.push(..._that.tableData);
          // 去除数组对象中重复的数据
          _that.removeDuplicateData();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      })
    },
    /**
     * 去除数组对象中重复的数据
     */
    removeDuplicateData() {
      let dataMap = new Map();
      this.dataSource.forEach(item => {
        dataMap.set(item.id, item);
      });
      this.dataSource = Array.from(dataMap.values());
    },
    /**
     * 复选框改变事件
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      // 根据 selectedRowKeys 从 dataSource 中获取所有选中行的数据
      this.selectedRows = this.dataSource.filter(row => selectedRowKeys.includes(row.id));
    },
    /**
     * 行点击事件
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            if (_that.selectedRowKeys.indexOf(record.id) !== -1) {
              _that.selectedRows.splice(_that.selectedRowKeys.indexOf(record.id), 1);
              _that.selectedRowKeys.splice(_that.selectedRowKeys.indexOf(record.id), 1);
            } else {
              _that.selectedRowKeys.push(record.id)
              _that.selectedRows.push(record);
            }
          }
        }
      };
    },
    // 表格 - 点击分页中数字触发的方法
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.list();
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ant-table-tbody {
  .ant-table-row-cell-ellipsis:nth-of-type(2) {
    text-align: left !important;
  }
}

/*/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow-y: auto !important;
}*/
</style>
