<template>
	<!-- jsmind容器 -->
    <div
      id="jsmindContainer"
      ref="jsmindContainer"
    ></div>
</template>

<script>
// 引入jsmind方法和樣式
import "jsmind/style/jsmind.css";
import jsMind from "jsmind";

// 引入獲取數(shù)據(jù)的接口
import { getProjectMind } from "@/api/projectManagement";

export default {
  data() {
    return {
      treeData: {},
      jsmind: ""
    };
  },
  created() {
    this.initData();
  },
  beforeDestroy() {
    if (this.jsmind) {
      this.jsmind.destroy();
    }
  },
  methods: {
    initData() {
      let projectId = this.$route.query.projectId;
      getProjectMind(projectId)
        .then(res => {
          if (res.code === 200) {
            this.treeData = res.data;
            const options = {
              container: "jsmindContainer", // 必選，容器ID
              editable: false, // 可選，是否啟用編輯
              theme: "asphalt", // 可選，主題
              shortcut: {
                enable: true // 禁用快捷鍵
              },
              layout: {
                hspace: 50, // 節(jié)點之間的水平間距
                vspace: 20, // 節(jié)點之間的垂直間距
                pspace: 13 // 節(jié)點與連接線之間的水平間距（用于容納節(jié)點收縮/展開控制器）
              },
              mode: "full" // 顯示模式，子節(jié)點只分布在根節(jié)點右側(cè)
            };
            // 初始化jsMind對象
            this.jsmind = new jsMind(options);

			// 讓jsmind對象顯示具體的腦圖數(shù)據(jù)
            this.jsmind.show({
              meta: {
                name: "jsMind",
                author: "",
                version: "0.1"
              },
              format: "node_tree",// 數(shù)據(jù)格式官方文檔有介紹
              data: this.treeData
            });
          }
        })
        .catch(err => {});
    }
  }
};
</script>

// 因為window里面的this不是指向當(dāng)前組件，所以需要提前注冊使用
window.$$this = this;
window.showTask = function(id) {
  // 展示詳情彈窗
  window.$$this.detailShow = true;
  // 詳情彈窗獲取數(shù)據(jù)
  window.$$this.$nextTick(() => {
    window.$$this.$refs.TaskDetail.init(id);
  });
};

beforeDestroy() {
  if (this.jsmind) {
    this.jsmind.destroy();
    window.showTask = undefined;
    window.$$this = undefined;
  }
}