<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes" />
</template>
<script>
import BiVueMindmap, { BtnWrapper } from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
        },
      ],
    };
  },
};
</script>

<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes">
    <template v-slot:operation>
      <BtnWrapper>
        <img
          class="btn-img"
          :style="{ width: '20px', height: '20px' }"
          :src="LOGO_ICON"
        />
      </BtnWrapper>
    </template>
  </BiVueMindmap>
</template>
<script>
import BiVueMindmap, { BtnWrapper } from "bi-vue-mindmap";
import LOGO_ICON from "../assets/logo.png";

export default {
  components: {
    BiVueMindmap,
    BtnWrapper,
  },
  data() {
    return {
      LOGO_ICON,
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
            {
              type: "FILE",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
          ],
        },
        {
          id: "zzz",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 3,
            b: "z",
          },
          resources: [
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
      ],
    };
  },
};
</script>

<template>
  <BiVueMindmap
    :flatNodes="mindmapNodes"
    v-slot="{ id, parentId, orderNo, width, height, extra }"
  >
    <div class="my-node-template">
      <p class="title">{{ extra.myTitle }}</p>
      <button
        tabindex="-1"
        @click.stop="
          onBtnClick({ id, parentId, orderNo, width, height, extra })
        "
      >
        确认
      </button>
    </div>
  </BiVueMindmap>
</template>
<script>
import BiVueMindmap from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
        },
        {
          id: "yyy",
          parentId: "xxx",
          isCustomized: true,
          width: 100,
          height: 32,
          extra: {
            myTitle: "Customized Node",
          },
          calcCellSize: function (node) {
            this.width = 200;
            this.height = 64;
            // ----- or -----
            // node.width = 200;
            // node.height = 64;
          },
        },
      ],
    };
  },
  methods: {
    onBtnClick({ id, parentId, orderNo, width, height }) {},
  },
};
</script>