<template>
  <el-dialog
      title="新建知识图谱实例"
      :visible.sync="selectModelDialogVisible"
      width="40%">
    <el-steps :space="200" :active="activeStep" finish-status="success">
      <el-step title="知识图谱本体选择"></el-step>
      <el-step title="知识图谱实例命名"></el-step>
    </el-steps>
    <div v-show="activeStep == 1">
      <div>
        <el-form :inline="true" :model="modelQo" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="modelQo.LIKES_name" placeholder="请输入知识图谱本体名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="modelQo.pageNo=1;queryModelData()">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="modelResult.records" style="width: 100%" @selection-change="handleSelectionChange"
                  ref="modelTable">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column prop="name" label="知识图谱本体"></el-table-column>
          <el-table-column prop="description" label="本体描述"></el-table-column>
<!--          <el-table-column prop="createTime" label="创建时间"></el-table-column>-->
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination background
                       @current-change="handleModelCurrentChange"
                       :current-page="modelQo.pageNo"
                       :page-size="modelQo.pageSize"
                       layout="total, prev, pager, next"
                       :total="modelResult.total">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="nextStep">下一步</el-button>
        </span>
    </div>
    <div v-show="activeStep == 2">
      <el-form ref="cmd" :model="cmd" label-width="180px" :rules="cmdRules">
        <el-form-item label="知识图谱实例名称" prop="space">
          <el-input v-model="cmd.space" placeholder="请输入新建的知识图谱实例名称，英文数字下划线组合"></el-input>
        </el-form-item>
        <el-form-item label="知识图谱实例描述">
          <el-input v-model="cmd.spaceComment" placeholder="请输入新建的知识图谱实例描述，中文描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="activeStep = 1">上一步</el-button>
            <el-button type="primary" @click="gotoCreateGraphSpace">确 定</el-button>
          </span>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";

let data;
var _this;
export default {
  data() {
    return {
      selectModelDialogVisible: false,
      activeStep: 1,
      selectModelId: '',
      graphSpaceName: '',
      cmd: {},
      modelQo: {
        pageNo: 1,
        pageSize: 10,
        LIKES_name: '',
        EQI_sourceType:1
      },
      modelResult: {
        records: [],
        total: 0
      },
      modelSelection: [],
      cmdRules: {
        space: [
          {required: true, message: '请输入知识图谱实例名称', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    _this = this;
  },
  methods: {
    openDialog() {

      _this.modelQo.pageNo = 1;
      _this.cmd = {
        space: '',
        ontologyId: '',
        spaceComment: ''
      };
      _this.activeStep = 1;
      _this.modelSelection = [];
      _this.queryModelData();
      _this.selectModelDialogVisible = true;
    },
    handleSelectionChange(val) {
      if(val.length > 0) {
        for (let i = 0; i < val.length - 1; i++) {
          this.$refs.modelTable.toggleRowSelection(val[i]);
        }
        _this.modelSelection = [val[val.length - 1]];
      } else {
        _this.modelSelection = [];
      }
    },
    nextStep() {
      if (_this.modelSelection.length == 0) {
        _this.$message.warning("请选择知识图谱本体");
        return;
      }
      _this.activeStep = 2;
    },
    queryModelData() {
      request({
        url: '/ontology/query_pages',
        method: 'post',
        data: _this.modelQo
      }).then(res => {
        _this.modelResult.records = res.data.records;
        _this.modelResult.total = res.data.total;
      });
    },
    handleModelCurrentChange(val) {
      _this.modelQo.pageNo = val;
      _this.queryModelData();
    },
    gotoCreateGraphSpace() {
      _this.$refs['cmd'].validate((valid) => {
        if (valid) {
          request({
            url: `/nebula_model/initgraphdatabase/${_this.modelSelection[0].id}/${_this.cmd.space}`,
            method: 'get',
            data: {}
          }).then(res => {
            _this.$message.success("创建成功");
            _this.selectModelDialogVisible = false;
            _this.$parent.querySpaceList();
          });
        }
      });
    },
  }
}

</script>

<style>

.node-box {
  overflow: hidden;
}

.form-title {
  font-size: 16px;
  margin: 15px 0;

}

.add-attribute-box {
  margin-top: 10px;
  color: #409EFF;
  cursor: pointer;
  text-align: right;
}

.info-content > div {
  margin-bottom: 5px;
  line-height: 20px;
}


</style>
