<template>
 
    <div id="jsmind_container"></div>

 

</template>

<script>
import '@/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'


export default {
  data() {
    return {
   
      data1: {
        '2022-10-13': [
          {
            id: null,
            address: '測試',
            longitude: null,
            latitude: null,
            startTime: '2022-10-13 17:09:52',
            endTime: '2022-10-14 17:09:52',
            createTime: null,
            fxUserId: '1580379386153140224',
            userType: '1',
            actionDesc: null,
            remarkDesc: null,
            pushStatus: null,
            ldStatus: null,
            sortId: null,
            deleteType: null,
            fxcsFlag: null
          },
          {
            id: null,
            address: '測試1',
            longitude: null,
            latitude: null,
            startTime: '2022-10-13 17:10:52',
            endTime: '2022-10-14 17:11:52',
            createTime: null,
            fxUserId: '1580379386153140224',
            userType: '1',
            actionDesc: null,
            remarkDesc: null,
            pushStatus: null,
            ldStatus: null,
            sortId: null,
            deleteType: null,
            fxcsFlag: null
          }
        ],
        '2022-10-15': [
          {
            id: null,
            address: '測試2',
            longitude: null,
            latitude: null,
            startTime: '2022-10-15 10:48:20',
            endTime: '2022-10-16 10:48:20',
            createTime: null,
            fxUserId: '1580379386153140224',
            userType: '1',
            actionDesc: '睡覺',
            remarkDesc: null,
            pushStatus: null,
            ldStatus: null,
            sortId: null,
            deleteType: null,
            fxcsFlag: null
          }
        ],
        '2022-10-17': [
          {
            id: null,
            address: '測試3',
            longitude: null,
            latitude: null,
            startTime: '2022-10-17 11:06:01',
            endTime: '2022-10-18 11:06:01',
            createTime: null,
            fxUserId: '1580379386153140224',
            userType: '1',
            actionDesc: null,
            remarkDesc: null,
            pushStatus: null,
            ldStatus: null,
            sortId: null,
            deleteType: null,
            fxcsFlag: null
          }
        ]
      },
      mind: {
        /* 元數(shù)據(jù)，定義思維導(dǎo)圖的名稱、作者、版本等信息 */
        meta: {
          name: '軌跡關(guān)系圖',
          author: '',
          version: '0.2'
        },
        /* 數(shù)據(jù)格式聲明 */
        format: 'node_tree',
        /* 數(shù)據(jù)內(nèi)容 */
        data: {
          id: 'root',
          topic: '軌跡關(guān)系圖',

          children: [
            {
              id: 'easy1', // [必選] ID, 所有節(jié)點的ID不應(yīng)有重復(fù)，否則ID重復(fù)的結(jié)節(jié)將被忽略
              topic: '10月1日', // [必選] 節(jié)點上顯示的內(nèi)容
              direction: 'right', // [可選] 節(jié)點的方向，此數(shù)據(jù)僅在第一層節(jié)點上有效，目前僅支持 left 和 right 兩種，默認(rèn)為 right
              expanded: true, // [可選] 該節(jié)點是否是展開狀態(tài)，默認(rèn)為 true
              children: [
                { id: '1', topic: 'Easy to show' },
                { id: '2', topic: 'Easy to edit' },
                { id: '3', topic: 'Easy to store' },
                { id: '4', topic: 'Easy to embed' },
                { id: '5', topic: 'Easy to edit' },
                { id: '6', topic: 'Easy to store' },
                { id: '7', topic: 'Easy to embed' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必選] 容器的ID
        editable: false, // [可選] 是否啟用編輯
        theme: '', // [可選] 主題
        view: {
          engine: 'canvas', // 思維導(dǎo)圖各節(jié)點之間線條的繪制引擎
          hmargin: 100, // 思維導(dǎo)圖距容器外框的最小水平距離
          vmargin: 50, // 思維導(dǎo)圖距容器外框的最小垂直距離
          line_width: 2, // 思維導(dǎo)圖線條的粗細(xì)
          line_color: '#ddd' // 思維導(dǎo)圖線條的顏色
        },
        layout: {
          hspace: 120, // 節(jié)點之間的水平間距
          vspace: 30, // 節(jié)點之間的垂直間距
          pspace: 20 // 節(jié)點與連接線之間的水平間距（用于容納節(jié)點收縮/展開控制器）
        },
        shortcut: {
          enable: false // 是否啟用快捷鍵 默認(rèn)為true
        }
      }
    }
  },

  methods: {


    formatData(data) {
      let objNew = []
      for (let i in data) {
        objNew.push({
          id: i,
          topic: i,
          direction: 'right',
          expanded: true,
          children: data[i]
        })
      }



      const obj = {
        meta: {
          name: '軌跡關(guān)系圖',
          author: '',
          version: '0.2'
        },
        format: 'node_tree',
        data: {
          id: 'root',
          topic: '軌跡關(guān)系圖',
          children: objNew
        }
      }

      this.jm = jsMind.show(this.options, data)
    }
  }
}
</script>

<style lang="less" scoped>
#jsmind_container {
  width: 100%;
  height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  padding: 24px;

  .card {
    margin-left: 20px;
  }
  .blod {
    font-weight: 500;
  }
}
</style>