<template>
  <!-- 本体节点信息 -->
  <div style="display: flex">
    <div class="node-box" style="flex:1;padding-right: 20px">
      <div class="form-title">概念描述</div>
      <el-form ref="relationForm" label-width="100px" label-position="left">
        <el-form-item label="概念名">
          <el-input v-model="modifyCmd.tagName" disabled></el-input>
        </el-form-item>
        <el-form-item label="概念描述">
          <el-input v-model="modifyCmd.label" @change="handleNodeCommentChange"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-title">概念属性</div>
      <el-table :data="fields"
                height="500"
                border
                style="width: 100%">
        <el-table-column prop="comment" label="属性描述">
          <template slot-scope="scope">
            <el-select v-model="scope.row.comment" v-if="scope.$index === fields.length - 1"
                       @change="(fieldId) => {handleFieldSelectChange(fieldId, scope.$index)}" filterable>
              <template v-for="field in fieldList">
                <el-option :value="field.id" :label="field.comment" v-if="judgeExist(field)"
                           :key="field.id"></el-option>
              </template>
            </el-select>
            <label v-else>{{ scope.row.comment }}</label>
          </template>
        </el-table-column>
        <!--      <el-table-column prop="comment" label="描述"></el-table-column>-->
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="删除" width="80">
          <template slot-scope="scope">
            <el-button @click.native.prevent="removeField(scope.row,scope.$index)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="node-box" style="flex:1;border-right: 1px solid #EBEEF5;padding-left: 20px;">
      <div class="form-title" style="margin-top: 0px">对象属性</div>
      <el-table :data="relationData"
                height="675"
                border
                style="width: 100%">
        <el-table-column prop="edgeName" label="关系">
          <template slot-scope="scope">
            <el-select v-model="scope.row.label" v-if="scope.$index === relationData.length - 1"
                       @change="handleRelationSelectChange(scope.row.label,scope.row.dstId, scope.$index)" filterable>
              <template v-for="relation in relationOptions">
                <el-option :value="relation.label" :label="relation.label"
                           :key="relation.label"></el-option>
              </template>
            </el-select>
            <label v-else>{{ scope.row.label }}</label>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="尾概念">
          <template slot-scope="scope">
            <el-select v-model="scope.row.dstId" v-if="scope.$index === relationData.length - 1"
                       @change="handleRelationSelectChange(scope.row.label,scope.row.dstId, scope.$index)" filterable>
              <template v-for="node in nodeOptions">
                <el-option :value="node.ownId" :label="node.label"
                           :key="node.ownId"></el-option>
              </template>
            </el-select>
            <label v-else>{{nodeObj[scope.row.dstId]}}</label>
          </template>
        </el-table-column>
        <el-table-column label="删除" width="80">
          <template slot-scope="scope">
            <el-button @click.native.prevent="removeRelation(scope.row,scope.$index)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

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

var vm;
var _ = require('lodash');
export default {
  data() {
    return {
      modifyCmd: {
        id: '',
        tagName: '',
        label: '',
        ownId:'',
        ontologyId:''
      },
      fields: [],
      fieldList: [],
      relationData:[],
      relationOptions:[],
      nodeOptions:[],
      nodeObj:{}
    }
  },
  created() {
    vm = this;
  },
  mounted() {
  },
  methods: {
    updateValue(ontologyId, ownId, id) {
      vm.queryFieldList(ontologyId);
      vm.queryRelations(ontologyId);
      vm.queryNodes(ontologyId, ownId);
      vm.modifyCmd.id = id;
      vm.modifyCmd.ownId = ownId;
      vm.modifyCmd.ontologyId = ontologyId;
      vm.queryField(ontologyId, ownId)
    },
    //查询概念属性
    queryField(ontologyId,ownId){
        request({
            url: `/nebula_model/findnodebyid/${ontologyId}/${ownId}`,
            method: 'get',
            data: {}
        }).then(res => {
            vm.modifyCmd.tagName = _.get(res.data, "properties.tagName", '');
            vm.modifyCmd.label = _.get(res.data, "properties.label", '');
            let _fields = _.get(res.data, "properties.nebulafieldsnapshot", '');
            if (!_fields) {
                _fields = [];
            }
            _fields.push({
                comment: '',
                type: '',
                field:''
            });
            vm.fields = _fields;
        });
    },
    //查询对象属性列表
    queryRelationData(ontologyId,ownId){
        vm.relationData = [];
        request({
            url: `/nebula_model/findlistpathbyid/${ontologyId}/${ownId}`,
            method: 'get',
            data: {}
        }).then(res => {
            if(res.data){
                res.data.forEach(item => {
                    vm.relationData.push({label:item.relation.properties.label,
                        ontologyId:item.relation.properties.ontologyId,srcId:item.relation.srcId,dstId:item.relation.dstId});
                })
            }
            vm.relationData.push({label:"",
                ontologyId:ontologyId,srcId:ownId,dstId:""});
        });
    },
    //查询关系列表
    queryRelations(ontologyId){
        request({
            url: `/ontology-relation/query_list/${ontologyId}`,
            method: 'post',
            data: {}
        }).then(res => {
            vm.relationOptions = res.data;
        });
    },
    //查询尾结点列表
    queryNodes(ontologyId, ownId){
        request({
            url: `/ontology-concept/query_list/${ontologyId}`,
            method: 'post',
            data: {}
        }).then(res => {
            res.data.forEach(item => {
                vm.nodeObj[item.ownId] = item.label
            })
            vm.nodeOptions = res.data;
            vm.queryRelationData(ontologyId,ownId);
        });
    },
    judgeExist(field) {
      let index = vm.fields.findIndex(f => {
        return f.comment === field.comment;
      });
      return index < 0;
    },
    handleFieldSelectChange(fieldId, rowIndex) { // 值属性选择框变化
      let fieldIndex = vm.fieldList.findIndex(f => {
        return f.id === fieldId;
      });
      if (fieldId >= 0) {
        vm.fields[rowIndex] = {
            comment:vm.fieldList[fieldIndex].comment,
            type: vm.fieldList[fieldIndex].type,
            field:vm.fieldList[fieldIndex].field
        };
        request({
            url: '/nebula_model/insertmodelvertex',
            method: 'post',
            data: {vid:vm.modifyCmd.ownId,ontologyId:vm.modifyCmd.ontologyId,tagName:vm.modifyCmd.tagName,label:vm.modifyCmd.label,fields:vm.fields}
        }).then(res => {
            vm.queryField(vm.modifyCmd.ontologyId, vm.modifyCmd.ownId);
            vm.$message.success("添加成功");
        });

      }
    },
      //关系、尾结点选择框变化
    handleRelationSelectChange(label,dstId,rowIndex){
      if(label && dstId){
          request({
              url: '/nebula_model/insertmodeledge',
              method: 'post',
              data: vm.relationData[rowIndex]
          }).then(res => {
              vm.relationData.push({label:"",
                  ontologyId:vm.modifyCmd.ontologyId,srcId:vm.modifyCmd.ownId,dstId:""});
              vm.$message.success("添加成功");
          });
      }
    },
    removeRelation(row,index) { // 删除对象属性
        // 对接接口
        request({
            url: '/nebula_model/deletemodeledge',
            method: 'post',
            data: row
        }).then(res => {
            vm.$message.success("删除成功");
            vm.relationData.splice(index,1);
            vm.relationData.push({label:"",
                ontologyId:vm.modifyCmd.ontologyId,srcId:vm.modifyCmd.ownId,dstId:""});
        });
    },
    queryFieldList(ontologyId) { // 查询全部的值属性
      request({
        url: `/ontology-field/query_list/${ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        vm.fieldList = res.data;
      });
    },
    removeField(row, index) { // 删除值属性
      var newFields = JSON.parse(JSON.stringify(vm.fields));
      newFields.splice(newFields.length - 1,1);
      newFields.splice(index,1);
      // 对接接口
      request({
          url: '/nebula_model/insertmodelvertex',
          method: 'post',
          data: {vid:vm.modifyCmd.ownId,ontologyId:vm.modifyCmd.ontologyId,tagName:vm.modifyCmd.tagName,label:vm.modifyCmd.label,fields:newFields}
      }).then(res => {
          vm.queryField(vm.modifyCmd.ontologyId, vm.modifyCmd.ownId);
          vm.$message.success("删除成功");
      });
    },
    handleNodeCommentChange() { // 概念描述修改，自动保存
      request({
        url: '/ontology-concept/modify',
        method: 'post',
        data: {
          ownId: vm.modifyCmd.ownId,
          label: vm.modifyCmd.label
        }
      }).then(res => {
        vm.$message.success("概念描述修改成功");
        vm.$parent.queryTreeData();
      });

    },
  }
}

</script>

<style scoped>

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