<template>
  <div>
    <a-form class="ml10" layout="vertical">
      <a-row>
        <a-form-item :label="$t('structural-analysis.add-modal.name')">
          <a-input v-model="name" allowClear :placeholder="$t('structural-analysis.add-modal.please-enter-name')"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search">
            {{ $t('global-btn.search') }}
          </a-button>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item>
          <a-radio-group name="selectType" @change="radioChange" :default-value="1">
            <a-radio :value="1">
              {{ $t('structural-analysis.add-modal.all-nodes') }}
            </a-radio>
            <a-radio :value="2">
              {{ $t('structural-analysis.add-modal.only-current-node') }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>
    </a-form>
    <div>
      <a-table
          :data-source="tableData"
          :columns="tableColumns"
          :customRow="customRow"
          :rowKey="(row, index) => {return index;}"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          bordered
          size="small"
          :scroll="{ y: 'calc(88vh - 400px)' }"
          :pagination="false"/>
    </div>
  </div>
</template>

<script>

export default {
  name: "AddDFMEALibrary",
  props: {
    struTypeCode: {
      default: '',
      type: String
    },
    struId: {
      default: '',
      type: String
    }
  },
  watch: {
    selectedRows(data) {
      this.$emit("dataChange", data);
    },
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          title: () => this.$t('structural-analysis.add-modal.name'),
          align: "center",
          dataIndex: "name",
          key: "name",
          ellipsis: true
        },
      ],
      name: '',
      selectedRowKeys: [],
      selectedRows: []
    };
  },

  mounted() {
    this.list();
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      this.list();
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.$api.getMFMEALibrarySelect({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: _that.struId,
        struTypeCode: _that.struTypeCode,
        name: _that.name,
      }).then((res) => {
        if (res.flag) {
          let data = [];
          if (res.data.rfmLibraryModels && res.data.rfmLibraryModels.length > 0) {
            data = res.data.rfmLibraryModels.map((item) => {
              return {id: item.struId, name: item.lname}
            })
          }
          _that.tableData = data;
        } else {
          _that.$message.error(res.message);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message,1);
      })
    },
    /**
     * 单选框改变事件
     */
    radioChange(e) {
      this.$emit('update:selectType', e.target.value);
    },
    /**
     * 复选框改变事件
     */
    onSelectChange(selectedRowKeys, row) {
      this.selectedRows = row;
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 行点击事件
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            if (_that.selectedRowKeys.indexOf(index) !== -1) {
              _that.selectedRows.splice(_that.selectedRowKeys.indexOf(index), 1);
              _that.selectedRowKeys.splice(_that.selectedRowKeys.indexOf(index), 1);
            } else {
              _that.selectedRowKeys.push(index)
              _that.selectedRows.push(record);
            }
          }
        }
      };
    },
  }
};
</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>
