<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item label="高亮当前选中" prop="highlight">
        <el-switch v-model="highlight" />
      </el-form-item>
      <el-form-item label="默认展开所有" prop="expandAll">
        <el-switch v-model="expandAll" />
      </el-form-item>
      <el-form-item label="点击节点伸缩" prop="expandNode">
        <el-switch v-model="expandNode" />
      </el-form-item>
      <el-form-item label="复选框父子节点不联动" prop="strictly">
        <el-switch v-model="strictly" />
      </el-form-item>
      <el-form-item label="可勾选" prop="checkbox">
        <el-switch v-model="checkbox" />
      </el-form-item>
      <el-form-item v-if="checkbox == true" label="点击节点勾选" prop="checkNode">
        <el-switch v-model="checkNode" />
      </el-form-item>
      <el-form-item label="可拖拽" prop="draggable">
        <el-switch v-model="draggable" />
      </el-form-item>
      <el-form-item label="手风琴模式" prop="accordion">
        <el-switch v-model="accordion" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="为空展示文本" prop="emptyText">
        <el-input v-model="emptyText" placeholder="文本" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="树节点的图标" prop="iconClass">
        <el-input v-model="iconClass" placeholder="图标代码" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="节点点击" prop="nodeClick">
        <el-switch v-model="nodeClick" />
      </el-form-item>
      <el-form-item label="右键点击节点" prop="nodeContextmenu">
        <el-switch v-model="nodeContextmenu" />
      </el-form-item>
      <el-form-item label="选中状态改变" prop="checkChange">
        <el-switch v-model="checkChange" />
      </el-form-item>
      <el-form-item label="复选框点击" prop="check">
        <el-switch v-model="check" />
      </el-form-item>
      <el-form-item label="当前选中改变" prop="currentChange">
        <el-switch v-model="currentChange" />
      </el-form-item>
      <el-form-item label="节点展开" prop="nodeExpand">
        <el-switch v-model="nodeExpand" />
      </el-form-item>
      <el-form-item label="节点关闭" prop="nodeCollapse">
        <el-switch v-model="nodeCollapse" />
      </el-form-item>
      <el-form-item label="开始拖拽时" prop="dragStart">
        <el-switch v-model="dragStart" />
      </el-form-item>
      <el-form-item label="拖拽进入时" prop="dragEnter">
        <el-switch v-model="dragEnter" />
      </el-form-item>
      <el-form-item label="拖拽离开时" prop="dragLeave">
        <el-switch v-model="dragLeave" />
      </el-form-item>
      <el-form-item label="拖拽节点时" prop="dragOver">
        <el-switch v-model="dragOver" />
      </el-form-item>
      <el-form-item label="拖拽结束时" prop="dragEnd">
        <el-switch v-model="dragEnd" />
      </el-form-item>
      <el-form-item label="拖拽完成时" prop="drop">
        <el-switch v-model="drop" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemTree',
  extends: ApDevItemBase,
  data() {
    return {
      emptyText: '', // 内容为空时展示的文本
      highlight: false, // 是否高亮当前选中节点
      expandAll: false, // 是否默认展开所有节点
      expandNode: true, // 是否在点击节点的时候展开或者收缩节点
      checkNode: false, // 是否在点击节点的时候选中节点
      strictly: false, // 是否严格的遵循父子不互相关联的做法
      checkbox: false, // 节点是否可被选择
      accordion: false, // 是否每次只打开一个同级树节点展开
      draggable: false, // 是否开启拖拽节点功能
      iconClass: '', // 自定义树节点的图标
      nodeClick: false, // 节点被点击时的回调
      nodeContextmenu: false, // 当某一节点被鼠标右键点击时会触发该事件
      checkChange: false, // 节点选中状态发生变化时的回调
      check: false, // 当复选框被点击的时候触发
      currentChange: false, // 当前选中节点变化时触发的事件
      nodeExpand: false, // 节点被展开时触发的事件
      nodeCollapse: false, // 节点被关闭时触发的事件
      dragStart: false, // 节点开始拖拽时触发的事件
      dragEnter: false, // 拖拽进入其他节点时触发的事件
      dragLeave: false, // 拖拽离开某个节点时触发的事件
      dragOver: false, // 在拖拽节点时触发的事件
      dragEnd: false, // 拖拽结束时触发的事件
      drop: false // 拖拽成功完成时触发的事件
    }
  },
  watch: {
    emptyText() {
      this.initOpt()
    },
    highlight() {
      this.initOpt()
    },
    expandAll() {
      this.initOpt()
    },
    expandNode() {
      this.initOpt()
    },
    checkNode() {
      this.initOpt()
    },
    strictly() {
      this.initOpt()
    },
    checkbox() {
      this.initOpt()
    },
    accordion() {
      this.initOpt()
    },
    draggable() {
      this.initOpt()
    },
    iconClass() {
      this.initOpt()
    },
    nodeClick() {
      this.initOpt()
    },
    nodeContextmenu() {
      this.initOpt()
    },
    checkChange() {
      this.initOpt()
    },
    check() {
      this.initOpt()
    },
    currentChange() {
      this.initOpt()
    },
    nodeExpand() {
      this.initOpt()
    },
    nodeCollapse() {
      this.initOpt()
    },
    dragStart() {
      this.initOpt()
    },
    dragEnter() {
      this.initOpt()
    },
    dragLeave() {
      this.initOpt()
    },
    dragOver() {
      this.initOpt()
    },
    dragEnd() {
      this.initOpt()
    },
    drop() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      this.template = `<el-tree :data="data" :props="defaultProps" @emptyText@ @highlight@ @expandAll@ @expandNode@ @checkNode@ @strictly@ @checkbox@ @accordion@ @draggable@ @iconClass@ @nodeClick@ @nodeContextmenu@ @checkChange@ @check@ @currentChange@ @nodeExpand@ @nodeCollapse@ @dragStart@ @dragEnter@ @dragLeave@ @dragOver@ @dragEnd@ @drop@></el-tree>`

      this.data = `{
                    data: [ {
                        label: '一级 1',
                        children: [{
                            label: '二级 1-1',
                            children: [{
                                label: '三级 1-1-1'
                            }]
                        }]
                    }, {
                        label: '一级 2',
                        children: [{
                            label: '二级 2-1',
                            children: [{
                                label: '三级 2-1-1'
                            }]
                        }]
                    }],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },@highlight@@expandAll@@expandNode@@checkNode@@strictly@@checkbox@@accordion@@draggable@
                }`

      this.methods = `{
                @nodeClick@@nodeContextmenu@@checkChange@@check@@currentChange@@nodeExpand@@nodeCollapse@@dragStart@@dragEnter@@dragLeave@@dragOver@@dragEnd@@drop@
            }`

      if (this.emptyText == '') {
        this.replaceTemplate(' @emptyText@', '')
      } else {
        this.replaceTemplate('@emptyText@', `empty-text="${this.emptyText}"`)
      }

      if (this.highlight) {
        this.replaceTemplate('@highlight@', ':highlight-current="highlightFlag"')
        this.replaceData('@highlight@', '\n\t\thighlightFlag: true,')
      } else {
        this.replaceTemplate(' @highlight@', '')
        this.replaceData('@highlight@', '')
      }

      if (this.expandAll) {
        this.replaceTemplate('@expandAll@', ':default-expand-all="expandAllFlag"')
        this.replaceData('@expandAll@', '\n\t\texpandAllFlag: true,')
      } else {
        this.replaceTemplate(' @expandAll@', '')
        this.replaceData('@expandAll@', '')
      }

      if (this.expandNode) {
        this.replaceTemplate(' @expandNode@', '')
        this.replaceData('@expandNode@', '')
      } else {
        this.replaceTemplate('@expandNode@', ':expand-on-click-node="expandNodeFlag"')
        this.replaceData('@expandNode@', '\n\t\texpandNodeFlag: false,')
      }

      if (this.checkNode) {
        this.replaceTemplate('@checkNode@', ':check-on-click-node="checkNodeFlag"')
        this.replaceData('@checkNode@', '\n\t\tcheckNodeFlag: true,')
      } else {
        this.replaceTemplate(' @checkNode@', '')
        this.replaceData('@checkNode@', '')
      }

      if (this.strictly) {
        this.replaceTemplate('@strictly@', ':check-strictly="strictlyFlag"')
        this.replaceData('@strictly@', '\n\t\tstrictlyFlag: true,')
      } else {
        this.replaceTemplate(' @strictly@', '')
        this.replaceData('@strictly@', '')
      }

      if (this.checkbox) {
        this.replaceTemplate('@checkbox@', ':show-checkbox="checkboxFlag"')
        this.replaceData('@checkbox@', '\n\t\tcheckboxFlag: true,')
      } else {
        this.replaceTemplate(' @checkbox@', '')
        this.replaceData('@checkbox@', '')
      }

      if (this.accordion) {
        this.replaceTemplate('@accordion@', ':accordion="accordionFlag"')
        this.replaceData('@accordion@', '\n\t\taccordionFlag: true,')
      } else {
        this.replaceTemplate(' @accordion@', '')
        this.replaceData('@accordion@', '')
      }

      if (this.draggable) {
        this.replaceTemplate('@draggable@', ':draggable="draggableFlag"')
        this.replaceData('@draggable@', '\n\t\tdraggableFlag: true,')
      } else {
        this.replaceTemplate(' @draggable@', '')
        this.replaceData('@draggable@', '')
      }

      if (this.iconClass == '') {
        this.replaceTemplate(' @iconClass@', '')
      } else {
        this.replaceTemplate('@iconClass@', `icon-class="${this.emptyText}"`)
      }

      // 事件
      if (this.nodeClick) {
        this.replaceTemplate('@nodeClick@', `@node-click="nodeClickFn"`)
        this.replaceMethods('@nodeClick@', `nodeClickFn() {
                    console.log('节点被点击');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @nodeClick@', ``)
        this.replaceMethods('@nodeClick@', ``)
      }

      if (this.nodeContextmenu) {
        this.replaceTemplate('@nodeContextmenu@', `@node-contextmenu="nodeContextmenuFn"`)
        this.replaceMethods('@nodeContextmenu@', `nodeContextmenuFn() {
                    console.log('节点被鼠标右键点击');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @nodeContextmenu@', ``)
        this.replaceMethods('@nodeContextmenu@', ``)
      }

      if (this.checkChange) {
        this.replaceTemplate('@checkChange@', `@check-change="checkChangeFn"`)
        this.replaceMethods('@checkChange@', `checkChangeFn() {
                    console.log('节点选中状态发生变化');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @checkChange@', ``)
        this.replaceMethods('@checkChange@', ``)
      }

      if (this.check) {
        this.replaceTemplate('@check@', `@check="checkFn"`)
        this.replaceMethods('@check@', `checkFn() {
                    console.log('复选框被点击');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @check@', ``)
        this.replaceMethods('@check@', ``)
      }

      if (this.currentChange) {
        this.replaceTemplate('@currentChange@', `@current-change="currentChangeFn"`)
        this.replaceMethods('@currentChange@', `currentChangeFn() {
                    console.log('当前选中节点变化');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @currentChange@', ``)
        this.replaceMethods('@currentChange@', ``)
      }

      if (this.nodeExpand) {
        this.replaceTemplate('@nodeExpand@', `@node-expand="nodeExpandFn"`)
        this.replaceMethods('@nodeExpand@', `nodeExpandFn() {
                    console.log('节点展开');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @nodeExpand@', ``)
        this.replaceMethods('@nodeExpand@', ``)
      }

      if (this.nodeCollapse) {
        this.replaceTemplate('@nodeCollapse@', `@node-collapse="nodeCollapseFn"`)
        this.replaceMethods('@nodeCollapse@', `nodeCollapseFn() {
                    console.log('节点关闭');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @nodeCollapse@', ``)
        this.replaceMethods('@nodeCollapse@', ``)
      }

      if (this.dragStart) {
        this.replaceTemplate('@dragStart@', `@node-drag-start="dragStartFn"`)
        this.replaceMethods('@dragStart@', `dragStartFn() {
                    console.log('节点开始拖拽');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @dragStart@', ``)
        this.replaceMethods('@dragStart@', ``)
      }

      if (this.dragEnter) {
        this.replaceTemplate('@dragEnter@', `@node-drag-enter="dragEnterFn"`)
        this.replaceMethods('@dragEnter@', `dragEnterFn() {
                    console.log('拖拽进入其他节点');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @dragEnter@', ``)
        this.replaceMethods('@dragEnter@', ``)
      }

      if (this.dragLeave) {
        this.replaceTemplate('@dragLeave@', `@node-drag-leave="dragLeaveFn"`)
        this.replaceMethods('@dragLeave@', `dragLeaveFn() {
                    console.log('拖拽离开节点');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @dragLeave@', ``)
        this.replaceMethods('@dragLeave@', ``)
      }

      if (this.dragOver) {
        this.replaceTemplate('@dragOver@', `@node-drag-over="dragOverFn"`)
        this.replaceMethods('@dragOver@', `dragOverFn() {
                    console.log('拖拽节点时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @dragOver@', ``)
        this.replaceMethods('@dragOver@', ``)
      }

      if (this.dragEnd) {
        this.replaceTemplate('@dragEnd@', `@node-drag-leave="dragEndFn"`)
        this.replaceMethods('@dragEnd@', `dragEndFn() {
                    console.log('拖拽结束时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @dragEnd@', ``)
        this.replaceMethods('@dragEnd@', ``)
      }

      if (this.drop) {
        this.replaceTemplate('@drop@', `@node-drag-leave="dropFn"`)
        this.replaceMethods('@drop@', `dropFn() {
                    console.log('拖拽完成时');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @drop@', ``)
        this.replaceMethods('@drop@', ``)
      }
    }
  }
}
</script>
