<template>
  <!-- 实例节点的详细信息 -->
  <div class="node-box">
    <div class="title">添加关系</div>
    <el-form ref="form" label-width="80px" :model="form" :rules="rules" style="height: 600px;overflow-y: auto">
      <el-form-item label="所属关系" prop="edge">
        <el-select v-model="form.edge" >
          <el-option v-for="edge in edgeList" :key="edge.Name" :label="edge.comment"
                     :value="edge.Name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头节点" prop="srcId">
        <el-select v-model="form.srcLabel" placeholder="请选择概念" @change="form.srcId = '';srcOptions = []" filterable>
          <el-option v-for="label in labelList" :key="label.Name" :label="label.comment" :value="label.Name"></el-option>
        </el-select>
        <el-select v-model="form.srcId" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodSrc" @change="changeSelect"
                :loading="srcLoading">
          <el-option
                  v-for="item in srcOptions"
                  :key="item.vid"
                  :label="item.properties.name"
                  :value="item.vid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="尾节点" prop="dstId">
        <el-select v-model="form.dstLabel"  placeholder="请选择概念" @change="form.dstId = '';dstOptions = []" filterable>
          <el-option v-for="label in labelList" :key="label.Name" :label="label.comment" :value="label.Name"></el-option>
        </el-select>
        <el-select v-model="form.dstId" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodDst" @change="changeSelect"
                :loading="dstLoading">
          <el-option
                  v-for="item in dstOptions"
                  :key="item.vid"
                  :label="item.properties.name"
                  :value="item.vid">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <el-button type="primary" @click="submitUpdate">保 存</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
import {getFirstStringProperty} from "@/utils/common";

var vm;
export default {
  data() {
    return {
      space: '',
      form: {
          edge: '',
          srcId: '',
          dstId: '',
          srcLabel: '',
          dstLabel: ''
      },
      rules: {
          edge: [
            {required: true, message: '请选择所属关系'}
          ],
          srcId: [
              {required: true, message: '请选择头节点'}
          ],
          dstId: [
              {required: true, message: '请选择尾节点'}
          ],
      },
      edgeList:[],
      labelList:[],
      srcOptions:[],
      dstOptions:[],
      srcLoading:false,
      dstLoading:false
    }
  },
  created() {
    vm = this;
  },
  mounted() {

  },
  methods: {
    //模糊搜索
    remoteMethodSrc(query) {
        if(vm.form.srcLabel){
            if (query !== '') {
                vm.srcLoading = true;
                request({
                    url: `/nebula_operate/findnodebykeyword/${vm.space}/${vm.form.srcLabel}`,
                    method: 'post',
                    data: {keyword:query}
                }).then(res => {
                    vm.srcOptions = res.data;
                    vm.srcLoading = false;
                });
            } else {
                vm.form.srcId = "";
                vm.srcOptions = [];
            }
        }else{
            vm.$message.warning("请输入头节点概念");
        }

    },
    //模糊搜索
    remoteMethodDst(query) {
        if(vm.form.dstLabel){
          if (query !== '') {
              vm.dstLoading = true;
              request({
                  url: `/nebula_operate/findnodebykeyword/${vm.space}/${vm.form.dstLabel}`,
                  method: 'post',
                  data: {keyword:query}
              }).then(res => {
                  vm.dstOptions = res.data;
                  vm.dstLoading = false;
              });
          } else {
              vm.form.dstId = "";
              vm.dstOptions = [];
          }
        }else{
            vm.$message.warning("请输入尾节点概念");
        }
    },
    changeSelect(){

    },
    queryEdgeList() {
        request({
            url: `/nebula_operate/showedge/${vm.space}`,
            method: 'get',
            data: {}
        }).then(res => {
            vm.edgeList = res.data;
        });
    },
    queryTagList() { // 查询tag列表
      vm.propsInfoVisible = false;
      request({
        url: `/nebula_operate/showtag/${vm.space}`,
        method: 'get',
        data: {}
      }).then(res => {
        vm.labelList = res.data;
      });
    },
    createItem(space) {
      vm.space = space;
      vm.form = {
          edge: '',
          srcId: '',
          dstId: '',
          srcLabel: '',
          dstLabel: ''
      };
      vm.queryEdgeList();
      vm.queryTagList();
    },
    submitUpdate() { // 更新
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return;
        }

        // 添加关系
        request({
          url: `/nebula_operate/insertedgeline/${vm.space}/${vm.form.edge}`,
          method: 'post',
          data: vm.form
        }).then(res => {
          vm.$parent.findOnePathBySrcidAndDctid(vm.form.srcId,vm.form.dstId);
        });
      });
    },
  }
}

</script>

<style scoped>

.form-box {
  height: 900px;
  overflow-y: auto;

}

.el-input__inner {
  height: 40px !important;
}


.btn-box {
  text-align: right;
  margin-top: 25px;
}

.node-box {
  overflow: hidden;
}

.node-box .title {
  font-size: 18px;
  margin-bottom: 35px;
}

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

}

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

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

.loading-box {
  text-align: center;
}


</style>
