<script setup type="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import MindElixir from 'mind-elixir'
import { generateTimestampId, mindTheme } from './helper'

const mindRef = ref()

const data = {
  nodeData: {
    id: generateTimestampId(),
    topic: '产品导图',
    root: true,
    children: [
      {
        topic: '投保信息',
        children: [
          {
            topic: '投保年龄',
            children: [
              {
                topic: '满28天至55周岁',
                children: [],
              },
            ],
          },
          {
            topic: '保障期间',
            children: [
              {
                topic: '终身',
                children: [],
              },
            ],
          },
          {
            topic: '收费期间',
            children: [
              {
                topic: '趸/5/10/15/20/30/35年交',
                children: [],
              },
            ],
          },
          {
            topic: '犹豫期',
            children: [
              {
                topic: '15天',
                children: [],
              },
            ],
          },
          {
            topic: '等待期',
            children: [
              {
                topic: '180天',
                children: [],
              },
            ],
          },
        ],
      },
      {
        topic: '保障责任',
        children: [
          {
            topic: '重大疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '110种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '365日',
                    children: [],
                  },
                ],
              },
              {
                topic: '第一次给付',
                children: [
                  {
                    topic: '因意外导致重疾:[现金价值、已交保费、30%基本保额]三者取大非意外导致重疾:[现金价值、已交保费、100%基本保额]三者取大;',
                    children: [],
                  },
                ],
              },
              {
                topic: '第二次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '第三次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前:120%',
                    children: [],
                  },
                  {
                    topic: '给付金额:80%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '首次重大疾病赔付后，身故或全残保险金责任是否终止',
                children: [
                  {
                    topic: '是',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '中症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '轻症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        topic: '保障责任',
        children: [
          {
            topic: '重大疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '110种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '365日',
                    children: [],
                  },
                ],
              },
              {
                topic: '第一次给付',
                children: [
                  {
                    topic: '因意外导致重疾:[现金价值、已交保费、30%基本保额]三者取大非意外导致重疾:[现金价值、已交保费、100%基本保额]三者取大;',
                    children: [],
                  },
                ],
              },
              {
                topic: '第二次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '第三次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前:120%',
                    children: [],
                  },
                  {
                    topic: '给付金额:80%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '首次重大疾病赔付后，身故或全残保险金责任是否终止',
                children: [
                  {
                    topic: '是',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '中症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '轻症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        topic: '保障责任',
        children: [
          {
            topic: '重大疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '110种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '365日',
                    children: [],
                  },
                ],
              },
              {
                topic: '第一次给付',
                children: [
                  {
                    topic: '因意外导致重疾:[现金价值、已交保费、30%基本保额]三者取大非意外导致重疾:[现金价值、已交保费、100%基本保额]三者取大;',
                    children: [],
                  },
                ],
              },
              {
                topic: '第二次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '第三次给付（可选）',
                children: [
                  {
                    topic: '65周岁前:120%',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前:120%',
                    children: [],
                  },
                  {
                    topic: '给付金额:80%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '首次重大疾病赔付后，身故或全残保险金责任是否终止',
                children: [
                  {
                    topic: '是',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '中症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
          {
            topic: '轻症疾病',
            children: [
              {
                topic: '病种数',
                children: [
                  {
                    topic: '35种',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付次数',
                children: [
                  {
                    topic: '3次',
                    children: [],
                  },
                ],
              },
              {
                topic: '间隔期',
                children: [
                  {
                    topic: '90日',
                    children: [],
                  },
                ],
              },
              {
                topic: '给付金额',
                children: [
                  {
                    topic: '60%基本保额',
                    children: [],
                  },
                ],
              },
              {
                topic: '额外给付',
                children: [
                  {
                    topic: '生效时间及条件:60周岁前',
                    children: [],
                  },
                  {
                    topic: '给付金额:40%基本保额',
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
}

const imgUrl = ref('')
const mind = ref()

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
      resolve(e.target.result)
    }
    // readAsDataURL
    fileReader.readAsDataURL(blob)
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'))
    }
  })
}

async function transforMindToImg() {
  const blob = await mind.value.exportPng(false)
  const url = URL.createObjectURL(blob)
  imgUrl.value = url
  const resaaa = await blobToBase64(blob)
  imgUrl.value = resaaa
  URL.revokeObjectURL(url)
}

onMounted(() => {
  mind.value = new MindElixir({
    el: mindRef.value, // or HTMLDivElement
    direction: MindElixir.RIGHT,
    theme: mindTheme,
    editable: false,
    contextMenu: false,
    mobileMenu: true,
    toolBar: false,
  })
  mind.value.init(data)
  transforMindToImg('png')
})
</script>

<template>
  <div class="mind-map-wrap">
    <img style="width: 100%;" :src="imgUrl" alt="">
    <div ref="mindRef" class="mind" style="display: none;" />
  </div>
</template>

<style scoped>
.mind {
  width: 100%;
  height: 400px;
  margin-top: 10px;
  position: fixed;
  top: -9999px;
  left: -9999px;
}
</style>
