<template>
  <div>
    <a-form class="ml10" layout="vertical">
      <a-row>
        <a-form-item :label="$t('functional-analysis.add-modal.name')">
          <a-input v-model="name"
                   allowClear
                   :placeholder="$t('functional-analysis.add-modal.please-enter-name')">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search" :loading="loading">
            {{ $t('functional-analysis.add-modal.ai-answer') }}
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <div>
      <a-table
          ref="tableRef"
          :customRow="customRow"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :loading="loading"
          bordered
          :columns="tableColumns"
          :rowKey="(record, index) => {return index;}"
          size="small"
          :dataSource="tableData"
          :scroll="{ y: 'calc(88vh - 400px)' }"
          :pagination="false"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddAi",
  props: {
    /** 节点类型 */
    struTypeCode: {
      default: '',
      type: String
    },
    /** 节点名称 */
    struName: {
      default: '',
      type: String
    }
  },
  watch: {
    selectedRows(data) {
      this.$emit("aiDataChange", data);
    },
  },
  data() {
    return {
      /** 表格数据源 */
      tableData: [],
      /** 表头 */
      tableColumns: [
        {
          title: () => this.$t('functional-analysis.add-modal.name'),
          align: "center",
          dataIndex: "content",
          ellipsis: true
        },
      ],
      /** 选中行索引 */
      selectedRowKeys: [],
      /** 选中行数据 */
      selectedRows: [],
      /** 加载中 */
      loading: false,
      /** 名称 */
      name: '',
    };
  },
  mounted() {
    let suffix = this.struTypeCode === '02' ? '有哪些功能？' : '有哪些失效模式？';
    this.name = this.struName + suffix;
    this.list();
  },
  methods: {
    /**
     * ai回答
     */
    search() {
      this.list();
    },

    /**
     * 列表
     */
    list() {
      let _that = this;
      if (!_that.name && !_that.name.trim()) {
        _that.$message.warn(_that.$t('global-message.warn.please-enter-name'), 1)
        return false;
      }
      _that.loading = true;
      _that.$api.getNodeAiData({name: _that.name}).then(res => {
        if (res.flag) {
          _that.tableData = res.data;
        } else {
          _that.tableData = [];
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },

    /**
     * 选中行回调
     * @param selectedRowKeys
     * @param row
     */
    onSelectChange(selectedRowKeys, row) {
      this.selectedRows = row;
      this.selectedRowKeys = selectedRowKeys;
    },

    /**
     * 操作行回调
     * @param record
     * @param index
     * @returns {{on: {click: *}}}
     */
    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;
  }
}
</style>
