<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 100%;height: 4vw;background-color: #42b983;">
      <div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goBook">跳转1</div>
    </div>
    <div style="width: 100%;height: 80%;">
      <div class="gContainer">
        <div id="graph-panel" style="width: 100%;height: 100%;"></div>
      </div>
    </div>




    <!-- 弹窗 -->
    <div v-if="isModalVisible" style="height: 5vw;width: 100%;"  class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <h3>请输入分支内容</h3>
        <label for="fileId">fileId:</label>
        <input type="text" id="fileId" v-model="newBranchFileId" />

        <label for="type">类型:</label>
        <select id="type" name="type">
          <option value="图文">图文</option>
          <option value="视频">视频</option>
          <option value="动画">动画</option>
        </select>

        <label for="txtName">节点名称:</label>
        <input type="text" id="txtName" v-model="newBranchContent" />

        <label for="TxtValue">节点内容:</label>
        <textarea id="TxtValue" v-model="newBranchValue"></textarea>

        <label for="parentId">父级节点ID:</label>
        <input type="text" id="parentId" v-model="newBranchParentId" />

        <label for="relation">关系:</label>
        <input type="text" id="relation" v-model="newBranchRelation"
               @input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')" />

        <label for="level">层级:</label>
        <input type="number" id="level" v-model="newBranchLevel" />

        <button @click="addNewBranch">提交</button>
      </div>
    </div>
  </div>

</template>
<script>
import {getgraphInfo, test, userLogin} from "@/api/login";
import VisGraph from '@/assets/js/graphvis.min.20241008.js'
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
import {config} from '@/assets/defaultConfig.js'
import {addNode, getFileIdByDocId} from "@/api/file";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  data() {
    return{
       infos:[],
      demoData:{},
      graphData: {
        nodes: [],
        links: []
      },
      config,
      visGraph: null, // 组件中保存VisGraph实例
      isModalVisible: false,
      newBranchContent: '',
      selectedNode: null,

      newBranchValue: '',
      newBranchFileId: '',
      newBranchLevel: null,
      newBranchParentId: '',
      newBranchRelation:''

    }
  },
  methods:{
    goBook(){
      this.$router.push({name:'Book',query: {id:'1'}})
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getInfo(){
      var data = {}
      getgraphInfo(data).then((res)=>{
        this.zhengl(res.data);

      })
    },
    async drawGraphData() {
      this.graphData = this.demoData;
      if (this.visGraph === null) {
        this.createGraph();
        // this.genrateGraphData();
        this.visGraph.drawData(this.graphData);
        // this.refreshGraphData();
        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
        this.reLayout();
        // this.goCenter();
      } else {
        this.createGraph();

        this.visGraph.drawData(this.graphData);
        // this.refreshGraphData();
        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
        this.reLayout();
        // this.goCenter();
      }
      this.loading = false;

    },
    // 创建全局绘图客户端对象
    createGraph() {
      const configWithEvents = {
        ...this.config,
        node: {
          ...this.config.node,
          ondblClick: (event, node) => {
            this.showPopup(node);
          }
        }
      };
      this.visGraph = new VisGraph(document.getElementById('graph-panel'), configWithEvents);
    },
    async showPopup(node) {
      console.log("o----------")
      console.log(node)
      this.selectedNode = node;
      this.newBranchParentId = node.properties.docId;


      try {
        const response = await this.getFileIdByDocId({ docId: node.properties.docId });
        this.newBranchFileId = response.fileId;
      } catch (error) {
        console.error('Failed to fetch file ID:', error);
        alert('无法获取文件ID，请稍后再试。');
        return;
      }

      this.newBranchLevel = parseInt(node.properties.level)  + 1;
      this.isModalVisible = true; // 显示模态框
    },
    getFileIdByDocId(data) {
      return getFileIdByDocId(data);
    },
    closeModal() {
      this.isModalVisible = false;
      this.newBranchContent = '';
      this.selectedNode = null;
    },
    async addNewBranch() {
      const content = this.newBranchContent.trim();
      const value = this.newBranchValue.trim();
      const fileId = this.newBranchFileId.trim();
      const relation = this.newBranchRelation.trim();

      if (this.selectedNode && content && value) {
        // 构造数据
        const data = {
          fileId: fileId,
          txtName: content,
          TxtValue: value,
          relation: relation,
          parentId: this.newBranchParentId,
          level: this.newBranchLevel
        };

        try {
          await addNode(data);

          // 创建新节点
          const newNodeId = Date.now().toString(); // 使用时间戳作为唯一ID
          const newNode = {
            id: newNodeId,
            label: content,
            properties: { name: content, docId: newNodeId, level: this.newBranchLevel },
            ...this.getNodeStyle(this.newBranchLevel) // 根据层级应用样式
          };
          const newLink = {
            source: this.selectedNode.id,
            target: newNodeId,
            type: '',
          };
          this.graphData.nodes.push(newNode);
          this.graphData.links.push(newLink);

          // 刷新图谱
          this.visGraph.drawData(this.graphData);
          this.reLayout();
          this.closeModal(); // 关闭模态框
        } catch (error) {
          console.error('Failed to add new branch:', error);
          alert('Failed to add new branch. Please try again.');
        }
      }
    },
    // 执行布局算法
    reLayout(alpha) {
      var that = this;
      if (alpha == null) {
        that.visLayout = null;
        that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
        that.visLayout.resetConfig({
          label: {
            show: true
          },
          friction: 0.8,
          linkDistance: 400,
          linkStrength: 0.2,
          charge: -1000,
          gravity: 0.01,
          noverlap: true,
          size: [that.visGraph.stage.width, that.visGraph.stage.height]
        });
      } else {
        that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
      }

      runLayout();//开始继续动画执行

      //通过动画帧控制控制布局算法的执行，有动画效果
      function runLayout() {
        cancelAnimationFrame(that.layoutLoopName);//停止动画控制
        that.visLayout.runLayout();  //运行布局算法
        that.visGraph.refresh();
        if (that.visLayout.alpha > 0.05) {
          that.layoutLoopName = requestAnimationFrame(runLayout);
        } else {
          if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
            that.visLayout.alpha = 0.1; //继续运动
            that.layoutLoopName = requestAnimationFrame(runLayout);
          } else {
            that.visLayout.alpha = 0; //停止运动
            cancelAnimationFrame(that.layoutLoopName);
          }
        }
      }

      // this.autoLayout();
    },
    zhengl(data) {
      const nodes = []
      const links = [] // 存放节点和关系

      var nodeList = data.nodes;
      var lineList = data.links;
      var allOne = ""

      console.log(nodeList)
      if(nodeList!=undefined){
        allOne = nodeList[0].docId
        for (let a = 0; a < nodeList.length; a++) {
          const group = parseInt(nodeList[a].group, 10);
          const style = this.getNodeStyle(group);

          nodes.push({
            id: nodeList[a].id,
            label: nodeList[a].name,
            properties: { name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne, leve: nodeList[a].group },
            ...style // 展开 style 对象以应用样式属性
          });
        }
      }

      // var allOne = nodeList[0].docId


      if(lineList!=undefined){
        for (let b = 0; b < lineList.length; b++) {

          var bbb = {name: lineList[b].relate}
          links.push({
            source: lineList[b].source,
            target: lineList[b].target,
            type: lineList[b].relate,
            properties: bbb,
            color: '202,202,202',
            lineWidth: 3,
          })
        }
      }


      this.demoData = {
        "nodes": nodes,
        "links": links
      }
      this.drawGraphData();
    },
    getNodeStyle(group) {
      const styles = [
        { size: 450, color: '227,203,0', font: 'normal 70px Arial', fontColor: '255,255,255' },
        { size: 350, width: 350, height: 300, color: '47,47,230', font: 'normal 68px Arial', fontColor: '255,255,255' },
        { size: 300, width: 300, height: 250, color: '255,138,0', font: 'normal 50px Arial', fontColor: '255,255,255' },
        { size: 250, width: 250, height: 250, color: '30,255,0', font: 'normal 40px Arial', fontColor: '0,0,0' },
        { size: 200, width: 200, height: 200, color: '248,143,248', font: 'normal 32px Arial', fontColor: '255,255,255' },
        { size: 150, width: 150, height: 150, color: '65,154,255', font: 'normal 30px Arial', fontColor: '255,255,255' },
        { size: 100, width: 100, height: 100, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0' }
      ];

      return styles[group] || {};
    },
    doLogin(){
      userLogin().then((res)=>{
        console.log(res);
        this.testInfo();
        this.getInfo();
      })
    },
    testInfo(){
      test().then((res)=>{
        console.log(res);
      })
    }
  },
  mounted() {
    this.doLogin();

  }
}
</script>
<style scoped>
.gContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 45vw;
}
</style>
