<script>
/* eslint no-console:0 */
import './draggable.less'
import Tree, { TreeNode } from '../index'
import '../assets/index.less'
import { gData } from './util'
import BaseMixin from '../../_util/BaseMixin'

export default {
  mixins: [BaseMixin],
  data () {
    return {
      gData,
      autoExpandParent: true,
      expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key'],
    }
  },
  methods: {
    onDragStart  (info) {
      console.log('start', info)
    },
    onDragEnter (info) {
      console.log('enter', info)
      this.setState({
        expandedKeys: info.expandedKeys,
      })
    },
    onDrop (info) {
      console.log('drop', info)
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey
      const dropPos = info.node.pos.split('-')
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      // const dragNodesKeys = info.dragNodesKeys;
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [...this.gData]
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (info.dropToGap) {
        let ar
        let i
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      } else {
        loop(data, dropKey, (item) => {
          item.children = item.children || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj)
        })
      }
      this.setState({
        gData: data,
      })
    },
    onExpand (expandedKeys) {
      console.log('onExpand', arguments)
      this.setState({
        expandedKeys,
        autoExpandParent: false,
      })
    },
  },

  render () {
    const loop = data => {
      return data.map((item) => {
        if (item.children && item.children.length) {
          return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>
        }
        return <TreeNode key={item.key} title={item.title} />
      })
    }
    return (<div class='draggable-demo'>
      <h2>draggable</h2>
      <p>drag a node into another node</p>
      <div class='draggable-container'>
        <Tree
          expandedKeys={this.expandedKeys}
          onExpand={this.onExpand} autoExpandParent={this.autoExpandParent}
          draggable
          onDragstart={this.onDragStart}
          onDragenter={this.onDragEnter}
          onDrop={this.onDrop}
        >
          {loop(this.gData)}
        </Tree>
      </div>
    </div>)
  },
}

</script>