<template>
  <el-dialog
    :title="title"
    width="1200px"
    class="auth-dialog"
    top="5%"
    :append-to-body="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :closed="hide"
  >
    <VueXmind
      v-if="visible"
      ref="vueXmindDialogRef"
      :nodeData="xmindData.tree"
      :styleData="xmindData.theme"
    ></VueXmind>

    <div slot="footer" class="center-dialog-footer">
      <el-button class="btn btn-gray" @click="visible = false">取消</el-button>
      <el-button class="btn btn-shadow-pay" @click="onConfirm">確認</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import VueXmind from '@/components/VueXmind/index'
  export default {
    components: { VueXmind },
    props: {
      title: {
        type: String,
        default: '在線導圖編輯-創建',
      },
    },
    data() {
      return {
        visible: false,
        currenNode: null,
        currentId: '',
        xmindData: {},
        saveLoading: false,
      }
    },
    methods: {
      async onConfirm() {
        if (this.$refs.vueXmindDialogRef && !this.saveLoading) {
          try {
            this.saveLoading = true
            let data = await this.$refs.vueXmindDialogRef.saveXmindData()
            // 1表格 2圖片 3思維導圖
            let params = {
              bookExamModuleId: this.currenNode.id,

              analysisType: 3,
              analysisDetail: encodeURIComponent(JSON.stringify(data.data)),
              picture: data.imgUrl,
            }
            if (this.currentId) {
              params.id = this.currentId
            }
            this.$emit('updateNodeContent', params)
            this.saveLoading = false
          } catch (e) {}
          this.hide()
        } else {
          console.log('在處理中')
        }
      },
      hide() {
        this.visible = false
      },
      show(node, snode) {
        this.currenNode = node
        this.saveLoading = false

        // console.log(node, snode)
        if (snode) {
          this.currentId = snode.id
          try {
            this.xmindData = JSON.parse(
              decodeURIComponent(snode.analysisDetail),
            )
            this.visible = true
          } catch (e) {
            console.log(e)
            this.xmindData = {}
            this.visible = true
          }
        } else {
          this.xmindData = {}
          this.currentId = ''
          this.visible = true
        }
      },
    },
  }
</script>

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

<template>
  <div>
    <div class="cp-xmind-controller">
      <div class="control-left">
        <span @click="onClickAddMainNode">添加同級節點</span>
        <span @click="onClickAddNode">添加子級節點</span>
        <span @click="deleteSelectNode" title="快捷鍵 Delete">刪除節點</span>
        <span @click="openLatexEdit">插入/編輯公式</span>
      </div>
      <div class="control-right">
        <span @click="onSetSceneTheme">主題設置 （配色選擇）</span>
        <span @click="reSizeBox">排版優化</span>
        <!-- <span @click="savePhoto">保存圖片</span> -->
      </div>
    </div>
    <div class="xmind-node-panel-segment">
      <div class="xmind-node-box">
        <div
          v-if="treeData"
          class="xmind-node-content"
          ref="xmindNodeBoxRef"
          :style="treeBoxStyle"
          @dragover="onGragMove"
          @dblclick="onSelectlayer"
        >
          <XmindSvgLine
            :node="treeData"
            :dwidth="currentTheme.dwidth"
            :canvasSize="canvasSize"
            :lineStyle="currentTheme.lineStyle"
            :drogDate="drogDate"
            :startDrag="startDrag"
            :dragNodeId="dragNodeId"
          ></XmindSvgLine>
          <XmindNode
            :node="treeData"
            ref="xmindsvgRef"
            :dwidth="currentTheme.dwidth"
            :boxStyle="currentTheme.boxStyle"
            :boxColorStyle="currentTheme.boxColorStyle"
            :currentId="currentId"
            :dragNodeId="dragNodeId"
            @updateNodeEnd="updateNodeEnd"
            @selectNodeId="changeSelectNode"
          ></XmindNode>
        </div>
      </div>
      <div class="xmind-node-attribute">
        <NodeAttributes
          :node="currentNode"
          :currentId="currentId"
          @selectTheme="onSelectTheme"
          @updateAttribute="onUpdateAttribute"
        ></NodeAttributes>
      </div>
    </div>
    <!-- <img v-if="imgUrl" :src="imgUrl" /> -->

    <latex-edit-dialog
      ref="latexEditDialogRef"
      @updateNodeContent="onUpdateNodeContent"
    ></latex-edit-dialog>
  </div>
</template>

<script>
  import { API } from '@/api/config'
  import XmindNode from './XmindNode'
  import XmindSvgLine from './XmindSvgLine'
  import NodeAttributes from './NodeAttributes/index'
  import LatexEditDialog from './components/latex-edit-dialog'
  import XmindStyleMixins from './mixins/XmindStyleMixins'
  import XmindDateSaveMixins from './mixins/XmindDateSaveMixins'
  import KeyboardShortcutMixins from './mixins/KeyboardShortcutMixins'
  import {
    executeXmindNodePosition,
    CalculateDragUtil,
    selectNodeByTreeNode,
  } from './util'
  import html2canvas from 'html2canvas'
  export default {
    components: { XmindNode, XmindSvgLine, NodeAttributes, LatexEditDialog },
    mixins: [XmindStyleMixins, XmindDateSaveMixins, KeyboardShortcutMixins],
    watch: {
      treeData() {
        if (this.treeData) {
          if (this.currentId) {
            this.currentNode = selectNodeByTreeNode(
              this.treeData,
              this.currentId,
            )
          }
        }
      },
    },
    props: {
      nodeData: {
        type: Object,
      },
      styleData: {
        type: Object,
      },
    },
    data() {
      return {
        imgUrl: '',
        DemoData: {
          data: '中心主題',
          w: 94,
          h: 42,
          children: [
            { w: 70, h: 40, data: '分支主題', children: [] },
            { w: 70, h: 40, data: '分支主題', children: [] },
          ],
        },
        // 防抖 更新
        updateThrottle: null,
      }
    },

    destroyed() {
      this.updateThrottle.cancel()
      document.ondragend = null
      document.ondragstart = null
    },
    mounted() {
      this.updateThrottle = _.throttle(this.calculateDragExecute, 200)
      // 監聽 鼠標松開的時候
      document.ondragend = (e) => {
        this.onEndDragNode()
      }
      document.ondragstart = (ev) => {
        if (ev.target.id) {
          this.onStartDragNode(ev.target.id)
        }
      }

      if (this.styleData) {
        this.initStyleData(this.styleData)
      }
      if (this.nodeData) {
        this.updateTreeList(this.nodeData)
      } else {
        this.updateTreeList(this.DemoData)
      }

      this.$nextTick(() => {
        this.reSizeBox()
      })
    },
    methods: {
      savePhoto() {
        html2canvas(this.$refs.xmindNodeBoxRef, { useCORS: true }).then(
          (canvas) => {
            let dataURL = canvas.toDataURL('image/png')
            this.imgUrl = dataURL
            if (this.imgUrl !== '') {
              this.dialogTableVisible = true
            }
          },
        )
      },
      getXmindPicture() {
        return new Promise((resolve, reject) => {
          html2canvas(this.$refs.xmindNodeBoxRef, { useCORS: true }).then(
            (canvas) => {
              let dataURL = canvas.toDataURL('image/png')
              resolve(dataURL)
            },
            () => {
              resolve('')
            },
          )
        })
      },
      // 保存數據
      async saveXmindData() {
        this.currentId = ''
        await this.cpsleep(10)
        let imgUrl = await this.getXmindPicture()
        let params = { base64File: imgUrl }
        imgUrl = await this.apiPost(API.CONFIG_UPLOAD_BASE64FILE, params).then(
          (res) => {
            if (this.checkoutRes(res)) {
              return res.data
            } else {
              return ''
            }
          },
          () => {
            return ''
          },
        )
        //  上傳圖片 獲取 url
        return {
          imgUrl: imgUrl,
          data: {
            tree: this.treeData,
            theme: this.currentTheme,
          },
        }
      },
      openLatexEdit(e) {
        if (this.currentId) {
          let cnode = selectNodeByTreeNode(this.treeData, this.currentId)
          if (cnode) {
            this.$refs.latexEditDialogRef.show(cnode.data)
          }
        } else {
          this.showMessage('請選擇要修改的內容')
        }
      },
      onGragMove(ev) {
        // 獲取 應該加到那個 node 上面
        let pos = { x: ev.layerX, y: ev.layerY, id: this.dragNodeId }
        this.updateThrottle(pos)
        ev.preventDefault()
      },
      calculateDragExecute(pos) {
        let dropDate = CalculateDragUtil.calculateDragOverNode(
          this.treeData,
          pos,
        )
        if (dropDate) {
          this.drogDate = dropDate
        } else {
          this.currentId = ''
          this.drogDate = null
        }
      },
      changeSelectNode(node) {
        this.currentId = node.id
        this.currentNode = node
      },
      onSelectlayer() {
        this.currentId = ''
      },
      updateTreeList(data) {
        // 渲染除 node 的位置
        if (data) {
          executeXmindNodePosition(
            data,
            this.currentTheme.dwidth,
            this.currentTheme.dheight,
            this.currentTheme.scaneBox,
          )
          this.treeData = data
        }
      },
      updateNodeEnd() {
        this.$nextTick(() => {
          let datas = JSON.parse(JSON.stringify(this.treeData))
          this.updateTreeList(datas)
        })
      },
      reSizeBox() {
        if (this.$refs.xmindsvgRef) {
          this.$refs.xmindsvgRef.reSizeBox()
          this.$nextTick(() => {
            let datas = JSON.parse(JSON.stringify(this.treeData))
            this.updateTreeList(datas)
          })
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .xmind-node-box {
    height: 600px;
    overflow: auto;
    background-color: #e4e4e4;
  }
  .xmind-node-content {
    background-color: #fff;
    position: relative;
  }

  .cp-xmind-controller {
    padding: 10px;
    display: flex;
    .control-left {
      flex: 1;
    }
    .control-right {
      flex: 1;
      text-align: right;
    }
    span {
      display: inline-block;
      border: 1px solid $color-theme;
      padding: 10px;
      border-radius: 6px;
      margin-left: 20px;
      cursor: pointer;
      user-select: none;
    }
  }
  .xmind-node-panel-segment {
    display: flex;
    .xmind-node-box {
      flex: 1;
    }
    .xmind-node-attribute {
      width: 200px;
    }
  }
</style>