<template>
    <el-dialog
      title="导图"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleClose"
    >
    <div style="display: flex; width: 100%; justify-content: space-between;  margin-top: -30px;margin-bottom: 10px;">
      <p>说明：请点击右键进行操作，编辑完成后需保存</p>
      <!-- <el-button type="primary" @click="save"> 保存</el-button> -->
    </div>
        <div ref="mindElixirContainer" id="mindContainerID" style="width: 100%; height: 50vh;"></div>
        
        <template slot="footer">

            <el-button type="primary" @click="save"> 保存</el-button>
        </template>

    </el-dialog>

  </template>
  
  <script>
  import MindElixir from 'mind-elixir';
//   import 'mind-elixir/dist/mind-elixir.css';
  
  export default {
    name: 'MindElixirDialog',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      mindData:{
        type: Object,
      }
    },
    data(){
        return {
            dialogVisible : this.visible, // 使用本地数据属性
            mindElixir: null // 记录 MindElixir 实例

        }
    },
    watch: {
        visible(val) {
        this.dialogVisible = val; // 监听 prop 变化
        this.initMindElixir()
        },
        dialogVisible(val) {
        // 触发父组件的同步更新
        this.$emit('update:visible', val);
        }
    },
    mounted(){
        if (this.visible){
            this.initMindElixir()
        }
    },
    beforeDestroy(){
        if(this.mindElixir){
            // this.mindElixir.destroy()
            // this.$refs.mindElixirContainer.innerHTML = '';

        }
    },
    methods: {
      initMindElixir() {
        // 确保 DOM 渲染完成

        if (this.mindElixir) return
        this.$nextTick(() => {
            // console.log(this.refs.mindElixirContainer)

          this.mindElixir = new MindElixir({
            el: this.$refs.mindElixirContainer,
            // el:"#mindContainerID",
            direction: MindElixir.LEFT,
            draggable: true, // default true
            contextMenu: true, // default true
            toolBar: true, // default true
            nodeMenu: true, // default true
            keypress: true, // default true
            locale:'zh_CN',
            newTopicName :"新节点"

            // 其他 MindElixir 配置
          });
          // if (this.mindData) 
          if (Object.keys(this.mindData).length !== 0)
          {
            this.mindElixir.init(this.mindData);
            return
          }
          this.mindElixir.init(MindElixir.new("新节点"));
        });
      },
      handleClose() {
        if (this.mindElixir) {
            // debugger
            // this.$refs.mindElixirContainer.innerHTML = '';
        }
        this.dialogVisible = false; // 关闭对话框时更新本地数据

      },
      save(){

        debugger 
        var data = this.mindElixir.getData()
        // data = JSON.stringify(data)

        this.$emit("save",data)
    
      }
    }
  };
  </script>
  
  <style scoped>
  /* 添加任何必要的样式 */
  </style>
  