<template>
  <div>
    <a-form :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-form-item :label="$t('risk-analysis.merge-modal.selected-node')">
          <a-input v-model="selectName" disabled/>
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item>
          <h2>{{ $t('risk-analysis.merge-modal.node-to-be-merged') }}</h2>
        </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 slot="footer" class="mt10 text-right">
      <a-button @click="closeModal">
        {{ $t('global-btn.cancel') }}
      </a-button>
      <a-button
          type="primary"
          class="ml10"
          @click="save()"
          :loading="saveLoading"
          v-preventReClick>
        {{ $t('global-btn.confirm') }}
      </a-button>
    </div>
  </div>
</template>
<script>

export default {
  name: "MergeGroup",
  props: {
    checkedNode: {
      type: Object
    }
  },
  data() {
    return {
      labelCol: {span: 2},
      wrapperCol: {span: 8},
      tableData: [],
      tableColumns: [
        {
          title: () => this.$t('risk-analysis.merge-modal.measure-group'),
          align: "center",
          dataIndex: "name",
          key: "name",
          ellipsis: true
        },
      ],
      selectName: '',
      mergeName: '',
      selectedRowKeys: [],
      selectedRows: [],
      saveLoading: false,
      selectType: 1
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    /**
     * 关闭模态框
     */
    closeModal() {
      this.$emit("closeModal");
    },
    /**
     * 刷新风险分析
     */
    initRiskNet() {
      this.$emit("initRiskNet");
    },
    /**
     * 复选框改变事件
     */
    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);
            }
          }
        }
      };
    },
    /**
     * 列表
     */
    list() {
      let _that = this;
      _that.$api.getGroupMerge({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: _that.checkedNode.id,
      }).then((res) => {
        if (res.flag) {
          _that.tableData = res.data.enableCombineNodes;
          _that.selectName = res.data.targetNode.name;
          _that.mergeName = res.data.targetNode.name;
          // 追加措施组固定前缀。
          (_that.tableData || []).forEach(item => {
            item.name = this.$t('functional-analysis.merge-modal.measure-group') + item.name;
          });
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      })
    },
    /**
     * 保存
     */
    save() {
      let _that = this;
      _that.saveMerge();
    },
    /**
     * 校验：合并数据
     */
    validateMergeData() {
      if (this.selectedRows.length === 0) {
        this.$message.warning(this.$t('global-message.warn.please-merge-data'));
        return false;
      }
      return true;
    },
    /**
     * 保存：合并数据
     */
    saveMerge() {
      let _that = this;
      // 校验
      if (!_that.validateMergeData()) return;
      let selectIds = _that.selectedRows.map((item) => {
        return item.id;
      });
      this.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.merge-after-irrecoverable'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onCancel() {
        },
        onOk() {
          _that.saveLoading = true; // 开启：加载中...
          _that.$api.saveGroupMerge({
            fmeaId: _that.$store.getters.rfmeaId,
            struId: _that.checkedNode.id,
            struName: _that.mergeName,
            enableMeasureIds: selectIds.toString(), /** 需要合并的标识集合 */
          }).then((res) => {
            if (res.flag) {
              // 添加成功，关闭弹窗，刷新结构树
              _that.$message.success(res.message, 1);
              _that.closeModal();
              _that.initRiskNet();
            } else {
              _that.$message.error(res.message, 1);
            }
          }).catch((error) => {
            _that.$message.error(error.response.data.message, 1);
          }).finally(() => {
            _that.saveLoading = false; // 关闭：加载中...
          })
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>



/deep/ .ant-col-3 {
  width: 13% !important;
}

/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>
