<template>
    <div class="ztree" :id="ztreeId"></div>
</template>

<script>
  import $ from 'jquery'
  // todo 暂时没找到 2022/12/12
  // import './zTreeStyle/zTreeStyle.css'

  if (!window.jQuery) {
    window.jQuery = $
    window.$ = $
  }

  require('@ztree/ztree_v3/js/jquery.ztree.all')
  let index = 0

  export default {
    props: {
      setting: {
        type: Object,
        require: false,
        default() {
          return {}
        }
      },
      nodes: {
        type: Array,
        require: true,
        default() {
          return []
        }
      }
    },
    data() {
      const vm = this
      return {
        ztreeId: `ztree_${parseInt(Math.random() * 1e10, 10)}`,
        ztreeObj: null,
        list: [],
        ztreeSetting: {
          data: {
            simpleData: {
              enable: true,
              idKey: "entClsID"
            }
          },
          view: {
            showLine: false,
            showIcon: true // default to hide icon
          },
          callback: {
            beforeDrop(event, treeId, treeNodes) {
              this.$emit('beforeDrop', event, treeId, treeNodes)
            },
            onAsyncError: (...arg) => {
              this.$emit('onAsyncError', ...arg)
            },
            onAsyncSuccess: (...arg) => {
              this.$emit('onAsyncSuccess', ...arg)
            },
            onCheck: (...arg) => {
              this.$emit('onCheck', ...arg)
            },
            onClick: (...arg) => {
              this.$emit('onClick', ...arg)
            },
            onCollapse: (...arg) => {
              this.$emit('onCollapse', ...arg)
            },
            onDblClick: (...arg) => {
              this.$emit('onDblClick', ...arg)
            },
            onDrag: (...arg) => {
              this.$emit('onDrag', ...arg)
            },
            onDragMove: (...arg) => {
              this.$emit('onDragMove', ...arg)
            },
            onDrop: (...arg) => {
              this.$emit('onDrop', ...arg)
            },
            onExpand: (...arg) => {
              this.$emit('onExpand', ...arg)
            },
            onMouseDown: (...arg) => {
              this.$emit('onMouseDown', ...arg)
            },
            onMouseUp: (...arg) => {
              this.$emit('onMouseUp', ...arg)
            },
            onRemove: (...arg) => {
              this.$emit('onRemove', ...arg)
            },
            onRename: (...arg) => {
              this.$emit('onRename', ...arg)
            },
            onRightClick: (event, treeId, treeNodes) => {
              try {
                event.target.parentElement.classList.add('rightSelectNode')
              } catch (e) {
                console.error(e)
              }
              this.$emit('onRightClick', event, treeId, treeNodes)
            },
            onNodeCreated(event, treeId, treeNodes) {
              // index++
              // console.log('vm.list.length', vm.list.length)
              // if (index === vm.list.length) {
              //   console.log('onNodeCreated', vm.ztreeObj.getNodes())
              // }
            }
          }
        }
      }
    },
    watch: {
      nodes: {
        handler(nodes) {
          this.list = nodes

          // update tree
          if (this.ztreeObj) {
            this.ztreeObj.destroy()
          }
          this.$nextTick(() => {
            this.ztreeObj = $.fn.zTree.init($(`#${this.ztreeId}`), Object.assign({}, this.ztreeSetting, this.setting),
              this.list)
            this.$emit('onCreated', this.ztreeObj)
          })
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
