<template>
  <el-dialog title="新建实例" :visible.sync="cmdDialogVisible" width="40%">
    <el-steps :active="active" finish-status="success" style="margin-bottom: 20px">
      <el-step title="新建实例空间"></el-step>
      <el-step title="选择本体"></el-step>
    </el-steps>
    <el-form ref="cmd" label-width="120px" :model="cmd" v-if="active == 0">
      <el-form-item label="实例空间名称：">
        <el-input v-model="cmd.name" style="width: 100%" ></el-input>
      </el-form-item>
      <el-form-item label="实例空间描述：">
        <el-input v-model="cmd.comment" style="width: 100%" ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="active == 0">
        <el-button type="primary" @click="createSpace">下一步</el-button>
      </span>
    <el-form ref="cmd" label-width="130px" :model="cmd" v-if="active == 1">
      <el-form-item label="选择本体：">
        <el-select v-model="cmd.ontologyId" placeholder="请选择本体" style="width: 100%">
          <el-option v-for="item in ontologyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="active == 1">
        <el-button @click="cmdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitModify" :loading="loading">确 定</el-button>
      </span>
  </el-dialog>
</template>

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

let data;
var _this;
export default {
  data() {
    return {
        cmd:{},
        cmdDialogVisible:false,
        spaceList:[],
        active:0,
        ontologyList:[],
    }
  },
  created() {
    _this = this;
  },
  methods: {
      queryOntology() {
          request({
              url: `/ontology/query_list`,
              method: 'post',
              data: {EQI_sourceType: 1}
          }).then(res => {
              _this.ontologyList = res.data;
          });
      },
    openDialog() {
        _this.queryOntology();
        _this.active = 0;
        _this.cmd = {
            ontologyId:"",
            name:"",
            comment:""
        }
        _this.loading = false;
        _this.cmdDialogVisible = true;
    },
    createSpace(){
        if(!_this.cmd.name){
            _this.$message.warning("请输入实例空间名称");
            return false;
        }
        if(!_this.cmd.comment){
            _this.$message.warning("请输入实例空间描述");
            return false;
        }
        _this.active = 1;
    },
    submitModify(){
        if(!_this.cmd.ontologyId){
            _this.$message.warning("请选择本体");
            return false;
        }

        _this.loading = true;
        this.$message({
            message: '正在初始化图空间，请等待...',
            type:"info",
            duration:20000
        });
        request({
            url: '/nebula_operate/createspace',
            method: 'post',
            data: {name:_this.cmd.name,comment:_this.cmd.comment}
        }).then(res => {
            var timer = setTimeout(function(){
                request({
                    url: '/nebula_model/initgraphdatabase/'+_this.cmd.ontologyId+'/'+_this.cmd.name,
                    method: 'get',
                    data: {}
                }).then(res => {
                    _this.$message.success("新建实例成功");
                    clearTimeout(timer);
                    _this.loading = false;
                    _this.cmdDialogVisible = false;
                    _this.$parent.querySpaceList();
                });
            },20000)
        });
    },
  }
}

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