<!--
  revit思维导图，与revit进行交互
 -->
<template>
  <div style="height:100%;width:100%;" id="jsmind_container"></div>
</template>

<script>
import "@/assets/js/jsmind";
import "@/assets/css/jsmind.css";
import { getBussTypes2 } from "@/api/request";
export default {
  data() {
    return {
      data: {
      }
    };
  },
  created() { },
  mounted() {
    this.getJson();
  },
  methods: {
    getJson() {
      getBussTypes2({}).then(res => {
        this.data = res.data.Content;
        // this.data = this.data.Content;
        var mind = {
          /* 元数据，定义思维导图的名称、作者、版本等信息 */
          meta: {
            name: "jsMind-demo-tree",
            author: "hizzgdev@163.com",
            version: "0.2"
          },
          /* 数据格式声明 */
          format: "node_tree",
          /* 数据内容 */
          data: {
            id: "root",
            topic: "jsMind",
            children: [
              {
                id: "easy",
                topic: "Easy",
                direction: "left",
                expanded: false,
                children: [
                  { id: "easy1", topic: "Easy to show" },
                  { id: "easy2", topic: "Easy to edit" },
                  { id: "easy3", topic: "Easy to store" },
                  { id: "easy4", topic: "Easy to embed" }
                ]
              },
              {
                id: "open",
                topic: "Open Source",
                direction: "right",
                expanded: true,
                children: [
                  { id: "open1", topic: "on GitHub" },
                  { id: "open2", topic: "BSD License" }
                ]
              },
              {
                id: "powerful",
                topic: "Powerful",
                direction: "right",
                children: [
                  { id: "powerful1", topic: "Base on Javascript" },
                  { id: "powerful2", topic: "Base on HTML5" },
                  { id: "powerful3", topic: "Depends on you" }
                ]
              },
              {
                id: "other",
                topic: "test node",
                direction: "left",
                children: [
                  { id: "other1", topic: "I'm from local variable" },
                  { id: "other2", topic: "I can do everything" }
                ]
              }
            ]
          }
        };
        mind.data = this.changeData(this.data);
        var options = {
          container: "jsmind_container",
          editable: true, //是否启用编辑
          theme: "greensea", //主题
          mode: "side", //显示模式
          support_html: true //是否支持节点里的HTML元素
        };

        var jm = new jsMind(options);
        // 让 jm 显示这个 mind 即可
        jm.show(mind);
        this.setBgColor([this.data], jm)

        //禁止编辑
        jm.options.editable = false
      });
    },
    setBgColor(data, jm) {
      data.map(item => {
        if (item.IsStandby) {
          jm.set_node_color(item.EId, "yellow", "#000")
        }
        if (item.Childrens && item.Childrens.length) {
          this.setBgColor(item.Childrens, jm)
        }
      })
    },
    changeData(arr) {
      if (arr && arr instanceof Array) {
        return arr.map(item => {
          if (item.Childrens && item.Childrens.length) {
            return {
              id: item.EId,
              topic: item.EName,
              children: this.changeData(item.Childrens),
              theme: item.IsStandby ? "orange" : "greensea"
            };
          } else {
            return {
              id: item.EId,
              topic: item.EName,
              theme: item.IsStandby ? "orange" : "greensea"
            };
          }
        });
      } else {
        return {
          id: "root",
          topic: arr.EName,
          children: this.changeData(arr.Childrens)
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>
