<template>
  <div class="node-box" style="position: relative">
    <transition name="el-zoom-in-center">
      <div v-show="infoVisible" class="graph-info-box">
        <div class="info-item-title">
          <label>{{ graphName }}</label>
        </div>
        <el-tabs type="border-card" @tab-click="handleTabClick">
          <el-tab-pane :label="'概念(' + ontologyCount.conceptc +')'">
            <div class="tree-box">
              <el-tree :data="treeData" :props="defaultProps"
                       @node-click="handleNodeTreeClick"
                       node-key="ownId"
                       :default-expanded-keys="['0']"
                       :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :style="activeSelectTreeNodeId === ('node' + data.ownId) ? 'color: #409EFF' : ''">{{ node.label }}</span>
                  <span class="set-btn">
                    <i class="el-icon-tickets" @click.stop="showNodeInfo(data)" v-show="data.ownId != '0'"></i>
                    <i class="el-icon-circle-plus-outline" @click.stop="showAddNodeChild(data)"></i>
                    <i class="el-icon-circle-close" @click.stop="removeNode(data)" v-show="data.ownId != '0'"></i>
                    <i class="el-icon-edit" @click.stop="showModifyNode(data)" v-show="data.ownId != '0'"></i>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'对象属性(' + ontologyCount.relationc +')'">
            <div class="tree-box">
              <el-tree :data="edgeData" :props="defaultProps"
                       @node-click="handleEdgeTreeClick"
                       node-key="id"
                       :default-expanded-keys="['0']"
                       :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :style="activeSelectTreeNodeId === ('edge' + data.id) ? 'color: #409EFF' : ''">{{ node.label }}</span>
                  <span class="set-btn">
                    <i class="el-icon-circle-plus-outline" @click.stop="showAddEdgeChild(data)"></i>
                    <i class="el-icon-circle-close" @click.stop="removeEdge(data)" v-show="data.id != '0'"></i>
                    <i class="el-icon-edit" @click.stop="showModifyEdge(data)" v-show="data.id != '0'"></i>
                    <el-button
                        v-show="data.id != '0'"
                        type="text"
                        @click.stop="() => setNodeForEdge(data)">
                      设置概念
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'值属性(' +ontologyCount.fieldc+ ')'">
            <div class="tree-box">
              <el-tree :data="valueData" :props="valueDataProps"
                       @node-click="handleFieldTreeClick"
                       node-key="id"
                       :default-expanded-keys="['0']"
                       :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                   <span :style="activeSelectTreeNodeId === ('field' + data.id) ? 'color: #409EFF' : ''">{{ node.label }}</span>
                  <span class="set-btn">
                    <i class="el-icon-circle-plus-outline" @click.stop="showAddFieldChild(data)"></i>
                    <i class="el-icon-circle-close" @click.stop="removeField(data)" v-show="data.id != '0'"></i>
                    <i class="el-icon-edit" @click.stop="showModifyField(data)" v-show="data.id != '0'"></i>
                    <el-button
                        v-show="data.id != '0'"
                        type="text"
                        @click.stop="() => setNodeForField(data)">
                      设置概念
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </transition>
    <!-- 统计信息，对象属性和值属性关联的概念数量 -->
    <transition name="el-zoom-in-center">
      <div v-show="analysisInfoVisible" class="tree-graph-info">
        <el-tabs type="border-card">
          <el-tab-pane label="对象属性">
            <el-table :data="edgeTableData" style="width: 100%" class="right-table" height="600">
              <el-table-column type="index" label="行号" width="50"></el-table-column>
              <el-table-column prop="relation" label="属性名"></el-table-column>
              <el-table-column prop="srccount" label="起点概念数量"></el-table-column>
              <el-table-column prop="dstcount" label="终点概念数量"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="值属性">
            <el-table :data="valueTableData" style="width: 100%" class="right-table" height="600">
              <el-table-column type="index" label="行号" width="50"></el-table-column>
              <el-table-column prop="comment" label="属性名"></el-table-column>
              <el-table-column prop="count" label="所属概念数量"></el-table-column>
              <el-table-column prop="type" label="值类型"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <i class="el-icon-d-arrow-right" @click="analysisInfoVisible = false;"></i>
      </div>
    </transition>
    <!-- 针对概念的统计，查看概念关联的值属性 -->
    <transition name="el-zoom-in-center">
      <div v-show="noumenonInfoVisible" class="tree-graph-info" style="width: 900px;">
        <noumenon-info ref="noumenonInfo"></noumenon-info>
        <!--<i class="el-icon-d-arrow-right" @click="closeNoumenonInfo"></i>-->
        <i class="el-icon-close" @click="closeNoumenonInfo" style="top: 0;right: 20px;position: absolute;font-size: 20px;cursor: pointer"></i>
      </div>
    </transition>
    <!-- 为图谱准备一个具备大小（宽高）的Dom -->
    <div class="tree-container" style="position: relative">
      <div class="icon-box">
        <div v-if="showFlag" style="display: inline-block;margin-right: 50px">
          <el-select
                  v-model="searchValue"
                  filterable style="width: 400px"
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod" @change="changeSelect"
                  :loading="loading">
            <el-option
                    v-for="item in searchOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
            </el-option>
          </el-select>
        </div>
<!--        <div class="icon icon-analysis" @click="showAnalysisTrans">-->
<!--          <i title="查看统计"></i>-->
<!--        </div>-->
        <div class="icon icon-search" @click="showFlag = !showFlag">
          <i title="搜索"></i>
        </div>
        <div class="icon icon-save" @click="backGraph">
          <i title="返回"></i>
        </div>
      </div>
      <div id="mountNode" style="width: 100%; height: 1000px"></div>
    </div>
    <el-dialog :title="dialogName" :visible.sync="nodeDialogVisible" width="400">
      <el-form ref="nodeForm" label-width="80px" :model="cmd" :rules="rules">
        <el-form-item label="概念名称" prop="label">
          <el-input v-model="cmd.label"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nodeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNode">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="dialogName" :visible.sync="edgeDialogVisible" width="400">
      <el-form ref="edgeForm" label-width="100px" :model="cmd" :rules="rules">
        <el-form-item label="对象属性名称" prop="label">
          <el-input v-model="cmd.label"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="edgeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdge">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="dialogName" :visible.sync="fieldDialogVisible" width="400">
      <el-form ref="fieldForm" label-width="100px" :model="cmd" :rules="rules">
        <el-form-item label="值属性名称" prop="field">
          <el-input v-model="cmd.field"></el-input>
        </el-form-item>
        <el-form-item label="值属性描述" prop="comment">
          <el-input v-model="cmd.comment"></el-input>
        </el-form-item>
        <el-form-item label="值域" prop="type">
          <el-select v-model="cmd.type" placeholder="请选择值域" style="width: 100%">
            <el-option v-for="item in typeList" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fieldDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitField">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置概念" :visible.sync="setNodeForEdgeVisible" width="40%">
      <el-row :gutter="5">
        <el-col :span="12">
          <div class="tree-box">
            <div class="label-item">定义域</div>
            <el-tree :data="treeData" :props="defaultProps"
                     node-key="ownId"
                     :default-expanded-keys="['0']"
                     :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="data.ownId !== '0'"><el-checkbox v-model="edgeStartCheck[data.ownId]">{{
                    node.label
                  }}</el-checkbox></span>
                <span v-if="data.ownId === '0'">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="tree-box">
            <div class="label-item">值域</div>
            <el-tree :data="treeData" :props="defaultProps"
                     node-key="ownId"
                     :default-expanded-keys="['0']"
                     :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="data.ownId !== '0'"><el-checkbox v-model="edgeEndCheck[data.ownId]">{{
                    node.label
                  }}</el-checkbox></span>
                <span v-if="data.ownId === '0'">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setNodeForEdgeVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSetNodeForEdge">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置概念" :visible.sync="setNodeForFieldVisible" width="25%">
      <div class="tree-box">
        <el-tree :data="treeData" :props="defaultProps"
                 node-key="ownId"
                 :default-expanded-keys="['0']"
                 :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="data.ownId !== '0'">
                  <el-checkbox v-model="edgeStartCheck[data.ownId]" :data-a="checked" @change="checked = !checked">{{node.label }}</el-checkbox>
                </span>
                <span v-if="data.ownId === '0'">{{ node.label }}</span>
              </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setNodeForFieldVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSetNodeForField">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';
import {config} from '@/components/graph/config';
import G6 from '@antv/g6';
import {listToTree} from "@/utils/common";
import noumenonInfo from '@/components/dialog/NoumenonInfo';

var vm;
var graph;
var graphData;
var _ = require('lodash');
var nodeProps = {
  id: 'vid',
  label: 'properties.label',
  name: 'properties.tagName',
  labelName: 'properties.label'
};
var edgeProps = {
  source: 'srcId',
  target: 'dstId',
  name: 'properties.edgeName',
  label: 'properties.label',
  arrow: 'properties.arrow',
  labelName: 'properties.label'
}
// const subjectColors = ['#5F95FF', '#61DDAA', '#65789B', '#F6BD16', '#7262FD', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'];
// const colorSets = G6.Util.getColorSetsBySubjectColors(subjectColors, '#fff', 'default', '#777');
export default {
  components: {
    'noumenon-info': noumenonInfo,
  },
  data() {
    return {
      treeData: [], // 概念树
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      valueDataProps: {
        children: 'children',
        label: 'comment'
      },
      infoVisible: true,
      edgeData: [], // 对象属性列表
      valueData: [], // 值属性列表
      qo: {}, // 上一页列表的查询条件，供返回的时候使用
      graphName: '', // 当前操作的图谱名称
      setNodeForEdgeVisible: false, // 操作对象属性的两头概念的弹窗开关
      setNodeForFieldVisible: false,// 操作值属性的父级概念的弹窗开关
      setNodeCmd: {}, // 值属性和对象属性设置概念通用的cmd
      dialogName: '', // 弹窗名称
      nodeDialogVisible: false, // 新建编辑概念弹窗开关
      cmd: {},
      activeSelectTreeNodeId: '', // 当前点击选中的树形的节点ID
      rules: {
        label: [
          {required: true, message: '请填写名称'},
        ],
        field: [
          {required: true, message: '请填写值属性名称'},
        ],
        comment: [
          {required: true, message: '请填写值属性描述'},
        ],
        type: [
            {required: true, message: '请选择值域'},
        ],
      },
      edgeDialogVisible: false, // 新建编辑对象属性弹窗开关
      fieldDialogVisible: false, // 新建编辑值属性弹窗开关
      edgeStartCheck: {},
      edgeEndCheck: {},
      ontologyCount: { // 三个tab的数量统计
        "conceptc": "0",
        "relationc": "0",
        "fieldc": "0"
      },
      analysisInfoVisible: false, // 统计弹窗开关
      edgeTableData: [], // 对象属性统计
      valueTableData: [], // 值属性统计
      noumenonInfoVisible: false, // 概念的属性弹窗开关
      showFlag:false,//展示搜索框
      searchOptions:[],
      searchValue:"",
      loading:false,
      infoData:{},
      typeList:[],
      checked:false
    }
  },
  created() {
    vm = this;
    vm.ontologyId = this.$route.query.id;
    vm.qo = {
      pageNo: this.$route.query.pageNo,
      name: this.$route.query.name
    };
    vm.graphName = this.$route.query.graphName;
  },
  mounted() {
    vm.queryCount();
    vm.initGraph();
    vm.queryTreeData();
    vm.queryDataType();
  },
  methods: {
    //模糊搜索
    remoteMethod(query) {
        if (query !== '') {
            vm.loading = true;
            request({
                url: `/ontology-concept/like_list/${vm.ontologyId}`,
                method: 'post',
                data: {label:query}
            }).then(res => {
                vm.searchOptions = res.data;
                vm.loading = false;
            });
        } else {
            vm.searchValue = "";
            vm.searchOptions = [];
        }
    },
    //选中值
    changeSelect(){
        var obj = {};
        vm.searchOptions.forEach(item => {
            if(item.id == vm.searchValue){
                obj = item;
            }
        })
        vm.handleNodeTreeClick(obj);
    },
    queryDataType() { // 查询值域
        request({
            url: `/nebula_model/getdatatype`,
            method: 'get',
            data: {}
        }).then(res => {
            vm.typeList = res.data
        });
    },
    queryTreeData() { // 查询概念树
      request({
        url: `/ontology-concept/query_list/${vm.ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        vm.treeData = [{
          label: "根概念",
          ownId: "0",
          children: listToTree(res.data, 'ownId', null)
        }];
      });
    },
    handleTabClick(tab) { // 监听左侧tab点击
      /**
       * 这么做是为了提高效率
       */
      if (tab.index === "1") { // 对象属性tab点击
        if (vm.edgeData.length > 0) {
          return;
        }
        vm.queryEdgeData();
      } else if (tab.index === "2") { // 值属性tab点击
        if (vm.valueData.length > 0) {
          return;
        }
        vm.queryValueData();
      }
    },
    queryEdgeData() { // 查询对象属性数据
      request({
        url: `/ontology-relation/query_list/${vm.ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        vm.edgeData = [{
          label: "根对象属性",
          id: "0",
          children: listToTree(res.data, 'id', "parentId")
        }];
      });
    },
    queryValueData() { // 查询值属性数据
      request({
        url: `/ontology-field/query_list/${vm.ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        vm.valueData = [{
          comment: "根值属性",
          id: "0",
          children: listToTree(res.data, 'id', "parentId")
        }];
      });
    },
    initGraph: function () { // 初始化图谱
      this.destroyGraph();
      let mountNodeDom = document.getElementById("mountNode");
      let _width = mountNodeDom.clientWidth, _height = mountNodeDom.clientHeight;
      // 创建 G6 图实例
      if (graph == undefined || graph == null) {
        graph = new G6.Graph(config({width: _width, height: _height, id: 'mountNode'}));

        graph.on('aftercreateedge', (e) => {
          vm.showAddEdge(e.edge._cfg.model);
        });
      }
      vm.queryTagData();
    },
    destroyGraph() { // 销毁图谱dom和对象
      try {
        if (graph != undefined && graph != null) {
          graph.clear();
          graph = null;
          document.getElementById("mountNode").innerHTML = "";
        }
      } catch (err) {
        console.log(err);
      }
    },
    queryTagData() { // 查询图空间内节点关系
      vm.activeSelectTreeNodeId = "";
      request({
        url: `/nebula_model/findrelationbyontologyid/${vm.ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        graphData = resolveGraphData(res.data);
        // 读取数据
        graph.data(graphData);
        // 渲染图
        graph.render();
      });
    },
    showAddNodeChild(item) { // 概念新增
      vm.dialogName = "新增概念";
      vm.cmd = {
        label: "",
        ontologyId: vm.ontologyId,
        parentId: item.ownId
      };
      vm.nodeDialogVisible = true;
    },
    showModifyNode(item) { // 概念编辑
      vm.dialogName = "编辑概念";
      vm.cmd = {
        id: item.id,
        label: item.label,
      };
      vm.nodeDialogVisible = true;
    },
    removeNode(item) { // 概念删除
      this.$confirm('此操作将永久删除此概念, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/ontology-concept/delete/${item.id}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.$message.success("删除成功");
          vm.queryTreeData();
          vm.queryCount();
        });
      });
    },
    submitNode() { // 提交概念的创建和编辑
      this.$refs.nodeForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (vm.cmd.id) {
          request({
            url: '/ontology-concept/modify',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("编辑成功");
            vm.nodeDialogVisible = false;
            vm.queryTreeData();
          });
        } else {
          request({
            url: '/ontology-concept/create',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("新增成功");
            vm.nodeDialogVisible = false;
            vm.queryTreeData();
            vm.queryCount();
          });
        }
      });
    },
    showAddEdgeChild(item) { // 对象属性新增
      vm.dialogName = "新增对象属性";
      vm.cmd = {
        label: "",
        ontologyId: vm.ontologyId,
        parentId: item.id
      };
      vm.edgeDialogVisible = true;
    },
    showModifyEdge(item) { // 对象属性编辑
      vm.dialogName = "编辑对象属性";
      vm.cmd = {
        id: item.id,
        label: item.label,
      };
      vm.edgeDialogVisible = true;
    },
    removeEdge(item) { // 对象属性删除
      this.$confirm('此操作将永久删除此对象属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/ontology-relation/delete/${item.id}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.$message.success("删除成功");
          vm.queryEdgeData();
          vm.queryCount();
        });
      });
    },
    submitEdge() { // 提交概念的创建和编辑
      this.$refs.edgeForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (vm.cmd.id) {
          request({
            url: '/ontology-relation/modify',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("编辑成功");
            vm.edgeDialogVisible = false;
            vm.queryEdgeData();
          });
        } else {
          request({
            url: '/ontology-relation/create',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("新增成功");
            vm.edgeDialogVisible = false;
            vm.queryEdgeData();
            vm.queryCount();
          });
        }
      });
    },
    showAddFieldChild(item) { // 值属性新增
      vm.dialogName = "新增值属性";
      vm.cmd = {
        comment: "",
        field: "",
        ontologyId: vm.ontologyId,
        parentId: item.id
      };
      vm.fieldDialogVisible = true;
    },
    showModifyField(item) { // 值属性编辑
        console.log(item)
      vm.dialogName = "编辑值属性";
      vm.cmd = {
        id: item.id,
        comment: item.comment,
        field: item.field,
        type:item.type
      };
      vm.fieldDialogVisible = true;
    },
    removeField(item) { // 值属性删除
      this.$confirm('此操作将永久删除此值属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/ontology-field/delete/${item.id}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.$message.success("删除成功");
          vm.queryValueData();
          vm.queryCount();
        });
      });
    },
    submitField() { // 提交概念的创建和编辑
      this.$refs.fieldForm.validate((valid) => {
        if (!valid) {
          return;
        }
        if (vm.cmd.id) {
          request({
            url: '/ontology-field/modify',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("编辑成功");
            vm.fieldDialogVisible = false;
            vm.queryValueData();
          });
        } else {
          request({
            url: '/ontology-field/create',
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("新增成功");
            vm.fieldDialogVisible = false;
            vm.queryValueData();
            vm.queryCount();
          });
        }
      });
    },
    handleNodeTreeClick(item) { // 点击概念刷新图谱
      if(item.ownId === '0') {
        vm.queryTagData();
        return;
      }
      vm.activeSelectTreeNodeId = 'node' + item.ownId;
      request({ // 查询当前对象属性所有的关系
        url: `/nebula_model/findpathbyid/${vm.ontologyId}/${item.ownId}`,
        method: 'get',
        data: {}
      }).then(res => {
        graphData = resolveGraphData(res.data);
        // 读取数据
        graph.data(graphData);
        // 渲染图
        graph.render();
      });
    },
    handleEdgeTreeClick(item) {// 点击对象属性刷新图谱
      if(item.id === '0') {
        vm.queryTagData();
        return;
      }
      vm.activeSelectTreeNodeId = 'edge' + item.id;
      request({ // 查询当前对象属性所有的关系
        url: `/nebula_model/findpathbyedgelabel/${vm.ontologyId}/${item.label}`,
        method: 'get',
        data: {}
      }).then(res => {
        graphData = resolveGraphData(res.data);
        // 读取数据
        graph.data(graphData);
        // 渲染图
        graph.render();
      });
    },
    handleFieldTreeClick(item) {// 点击值属性刷新图谱
      if(item.id === '0') {
        vm.queryTagData();
        return;
      }
      vm.activeSelectTreeNodeId = 'field' + item.id;
      request({ // 查询当前值属性所有的关系
        url: `/nebula_model/findnodesbyfield/${vm.ontologyId}/${item.field}`,
        method: 'get',
        data: {}
      }).then(res => {
        graphData = resolveGraphData({nodes: res.data, relations: []});
        // 读取数据
        graph.data(graphData);
        // 渲染图
        graph.render();
      });
    },

    setNodeForEdge(item) { // 对象属性树点击，打开添加两头概念弹窗
      request({ // 查询当前对象属性所有的关系
        url: `/nebula_model/findpathbyedgelabel/${vm.ontologyId}/${item.label}`,
        method: 'get',
        data: {}
      }).then(res => {
        let startCheck = {}, endCheck = {};
        if (res.data && res.data.relations) {
          res.data.relations.forEach(edge => {
            startCheck[edge.srcId] = true;
            endCheck[edge.dstId] = true;
          });
        }
        vm.edgeStartCheck = startCheck;
        console.log(vm.edgeStartCheck)
        vm.edgeEndCheck = endCheck;
        vm.setNodeCmd = {
          id: item.id,
          label: item.label
        };
        vm.setNodeForEdgeVisible = true;
      });
    },
    submitSetNodeForEdge() { // 提交保存设置对象属性的概念
      let cmd = {
        dctIds: [],
        srcIds: [],
        id: vm.setNodeCmd.id
      };
      Reflect.ownKeys(vm.edgeStartCheck).forEach(key => {
        if (vm.edgeStartCheck[key] === true) {
          cmd.srcIds.push(key);
        }
      });
      Reflect.ownKeys(vm.edgeEndCheck).forEach(key => {
        if (vm.edgeEndCheck[key] === true) {
          cmd.dctIds.push(key);
        }
      });
      request({
        url: '/ontology-relation/createrelations',
        method: 'post',
        data: cmd
      }).then(res => {
        vm.$message.success("保存成功");
        vm.setNodeForEdgeVisible = false;
        vm.handleEdgeTreeClick(vm.setNodeCmd);
      });
    },
    setNodeForField(item) { // 对象属性树点击，打开添加两头概念弹窗
      request({ // 查询当前值属性所有的关系
        url: `/nebula_model/findnodesbyfield/${vm.ontologyId}/${item.field}`,
        method: 'get',
        data: {}
      }).then(res => {
        let startCheck = [];
        if (res.data) {
          res.data.forEach(node => {
            startCheck[node.vid] = true;
          });
        }
        vm.edgeStartCheck = startCheck;
        vm.setNodeCmd = {
          id: item.id,
          field: item.field
        };
        console.log(startCheck);
        console.log(vm.treeData);
        vm.setNodeForFieldVisible = true;
      });
    },
    submitSetNodeForField() { // 提交保存设置值属性的概念
      let cmd = {
        conceptIds: [],
        id: vm.setNodeCmd.id
      };
      Reflect.ownKeys(vm.edgeStartCheck).forEach(key => {
        if (vm.edgeStartCheck[key] === true) {
          cmd.conceptIds.push(key);
        }
      });
      request({
        url: '/ontology-field/createconceptfield',
        method: 'post',
        data: cmd
      }).then(res => {
        vm.$message.success("保存成功");
        vm.setNodeForFieldVisible = false;
        vm.handleFieldTreeClick(vm.setNodeCmd);
      });
    },
    showAnalysisTrans() { // 查询值属性和对象属性的统计
      if(vm.edgeTableData.length === 0) {
        request({
          url: `/nebula_model/groupcountvexbyedgebyontologyid/${vm.ontologyId}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.edgeTableData = res.data;
        });
      }
      if(vm.valueTableData.length === 0) {
        request({
          url: `/nebula_model/groupfieldbyontologyid/${vm.ontologyId}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.valueTableData = res.data;
        });
      }
      vm.analysisInfoVisible = true;
    },
    showNodeInfo(item) {
      vm.noumenonInfoVisible = true;
      vm.handleNodeTreeClick(item);
      vm.infoData = item;
      vm.$nextTick(() => {
        vm.$refs["noumenonInfo"].updateValue(vm.ontologyId, item.ownId, item.id);
      });
    },
    queryCount() { // 查询三个tab类型的数量
      request({
        url: `/ontology-concept/countallbyontologyid/${vm.ontologyId}`,
        method: 'get',
        data: {}
      }).then(res => {
        vm.ontologyCount = res.data;
      });
    },
    backGraph() { // 返回
      vm.$router.push({path: "/graphModel", query: {pageNo: vm.qo.pageNo, name: vm.qo.name}})
    },
    //关闭弹框
    closeNoumenonInfo(){
        vm.handleNodeTreeClick(vm.infoData);
        vm.noumenonInfoVisible = false;
    }
  }
}

function resolveGraphData(data) {
  data.nodes.forEach(node => {
    Reflect.ownKeys(nodeProps).forEach(key => {
      node[key] = _.get(node, nodeProps[key], '');
    });
  });
  data.relations.forEach(edge => {
    Reflect.ownKeys(edgeProps).forEach(key => {
      edge[key] = _.get(edge, edgeProps[key], '');
    });
    // 是否指向自己
    edge.type = edge.srcId === edge.dstId ? 'loop' : '';
    // 是否显示箭头
    edge.style = {endArrow: edge.arrow};
  });
  return {
    nodes: data.nodes,
    edges: data.relations
  }
}

</script>

<style scoped>

.info-item-title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.info-item-title label {
  font-size: 18px;
  font-weight: bold;
  color: #2f2f2f;
}

.custom-tree-node {
  width: 100%;
}

.set-btn {
  display: none;
  float: right;
}

.set-btn .el-button {
  padding: 0;
}


.set-btn i {
  font-size: 16px;
  margin-right: 10px;
}


.el-tree-node__content:hover .set-btn {
  display: inline;
}


.tree-box {
  height: 615px;
  overflow-y: auto;
}

.tree-box .label-item {
  text-align: center;
  font-size: 20px;
}


.graph-name-box {
  position: absolute;
  top: 25px;
  left: 65px;
  width: 700px;
  font-size: 18px;
  font-weight: bold;
}


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

}

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

.graph-info-box, .tree-graph-info {
  position: absolute;
  width: 450px;
  top: 0px;
  overflow: hidden;
  bottom: 0;
  background-color: #fff;
  padding: 15px;
  z-index: 999;
  border-right: 1px solid rgba(52, 100, 224, 0.15);
  box-shadow: 0px 2px 21px 0px rgba(52, 100, 224, 0.15);
}

.graph-info-box {
  left: 0px;
}

.tree-graph-info {
  right: 0;
}

.graph-info-child {
  width: 100%;
  height: 100%;
  position: relative;
}

.el-icon-d-arrow-left, .el-icon-d-arrow-right {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
}

.el-icon-d-arrow-left {
  right: 0px;
}

.el-icon-d-arrow-right {
  left: 0px;
}

.info-line-item {
  margin-bottom: 35px;
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

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

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu div {
  list-style: none;
  padding: 5px 10px;
  color: black;
  border-bottom: 1px dashed #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.menu div:hover {
  color: #659bc5;
  background: #f3f6fa;
}

.menu div:last-child {
  border-bottom: none;
}

ul#menuBox li {
  cursor: pointer;
  margin: 5px 0;
}

ul#menuBox li:hover {
  color: #1c63e0;
}

.tree-container {
  position: relative;
  padding-left: 500px;
}

div.icon-box {
  position: absolute;
  top: 25px;
  right: 75px;
}

div.icon {
  display: inline-block;
  cursor: pointer;
  padding: 15px;
  background-color: #fff;
  border-radius: 40px;
  margin-left: 15px;
}

div.icon i {
  width: 25px;
  height: 25px;
  margin: auto;
  display: inline-block;
}

div.icon-save i {
  background: url("../../assets/image/icon/fanhui.png") no-repeat center/contain;
}

div.icon-search i {
  background: url("../../assets/image/icon/search.png") no-repeat center/contain;
}

div.icon-analysis i {
  background: url("../../assets/image/icon/tongji.png") no-repeat center/contain;
}


.node-box {
  height: 100%;
}


</style>
