<template>
  <!-- 树形图谱 -->
  <div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="树形图谱" name="first">
        <div style=""></div>
        <el-tree
            :data="treeData"
            node-key="vid"
            :default-expanded-keys="['root']"
            :props="defaultProps"
            @node-drop="handleDrop"
            :expand-on-click-node="false"
            draggable
            :allow-drag="allowDrag"
            style="height: 650px;overflow-y: auto;">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="btn-box">
          <el-button
              type="text"
              size="mini"
              @click="() => appendChild(data)">
            添加子节点
          </el-button>
          <el-button
              type="text"
              size="mini"
              @click="() => removeNode(data)">
            删除
          </el-button>
        </span>
      </span>
        </el-tree>
      </el-tab-pane>
      <!--      <el-tab-pane label="统计信息" name="second">-->
      <!--      </el-tab-pane>-->
    </el-tabs>
    <el-dialog
        title="添加子节点"
        :append-to-body="true"
        :visible.sync="cmdDialogVisible"
        width="40%">
      <el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
        <el-form-item label="子节点类名称" prop="tagName">
          <el-input v-model="cmd.tagName"></el-input>
        </el-form-item>
        <el-form-item label="子节点类描述">
          <el-input v-model="cmd.label"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cmdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAppendChild">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

var vm;
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      activeName: 'first',
      ontologyId: '',
      treeData: [],
      cmdDialogVisible: false,
      cmd: {},
      rules: {
        tagName: [
          {required: true, message: '请输入子节点类名称'}
        ],
      }
    }
  },
  created() {
    vm = this;
  },
  mounted() {

  },
  methods: {
    queryTreeData(ontologyId) {
      if (vm.ontologyId === ontologyId) {
        return;
      }
      vm.refreshTree(ontologyId);
    },
    refreshTree(ontologyId) {
      if (ontologyId) {
        vm.ontologyId = ontologyId;
      }
      request({
        url: `/nebula_model/findtreebyontologyid/${vm.ontologyId}`,
        method: 'post',
        data: {}
      }).then(res => {
        res.data.nodes.forEach(node => {
          node.label = node.properties.label || '未命名';
        });
        vm.treeData = [{
          vid: "root",
          label: '根节点',
          children: tripletToTree({
            nodes: res.data.nodes,
            relations: res.data.relations,
            idName: 'vid',
            sourceName: 'srcId',
            targetName: 'dstId'
          })
        }];
        console.log(vm.treeData);
      });
    },
    handleDrop(draggingNode, dropNode, dropType, ev) { // 树形拖拽完成时触发
      console.log("drop success");
    },
    allowDrag(draggingNode) { // judge node can be drag
      return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
    },
    destroyTree() {
    },
    appendChild(parent) {
      vm.cmdDialogVisible = true;
      vm.$nextTick(() => {
        vm.cmd = {
          tagName: '',
          label: '',
          ontologyId: vm.ontologyId,
          parentId: parent.vid
        };
        vm.$refs.cmd.resetFields();
      });
    },
    submitAppendChild() {
      this.$refs.cmd.validate((valid) => {
        if (valid) {
          request({
            url: `/nebula_model/insertchildmodelvertex/${vm.cmd.parentId}`,
            method: 'post',
            data: vm.cmd
          }).then(res => {
            vm.$message.success("添加成功");
            vm.cmdDialogVisible = false;
            vm.refreshTree();
            vm.$parent.queryTagData();
          });
        }
      });
    },
    removeNode(node) {
      this.$confirm('此操作将永久删除选中节点和关系, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/nebula_model/deletemodelvertex/${node.vid}`,
          method: 'get',
          data: {}
        }).then(res => {
          vm.$message.success("删除成功");
          vm.refreshTree();
          vm.$parent.queryTagData();
        });
      }).catch(() => {
      });
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
  }
}

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

.custom-tree-node {
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  display: flex;
}

.el-tree-node__content .btn-box {
  display: none;
}

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

</style>
