<template>
  <div class="el-multi" :class="{ 'el-multi--highlight-current': highlightCurrent }">
    <el-multi-node
      v-for="(child, index) in root.childNodes"
      :node="child"
      :props="props"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
    </el-multi-node>
    <div class="el-multi__empty-block" v-if="!root.childNodes || root.childNodes.length === 0">
      <span class="el-multi__empty-text">{{ emptyText }}</span>
    </div>
  </div>
</template>

<script>
  import ElMultiNode from './tree-node.vue';
  import TreeStore from './model/tree-store';
  import {t} from 'nui-v2/src/locale';
  import emitter from 'nui-v2/src/mixins/emitter';

  export default {
    name: 'ElMulti',

    mixins: [emitter],

    components: {
      ElMultiNode
    },

    data() {
      return {
        store: null,
        root: null,
        currentNode: null
      };
    },

    props: {
      data: {
        type: Array
      },
      emptyText: {
        type: String,
        default() {
          return t('el.tree.emptyText');
        }
      },
      nodeKey: String,
      checkStrictly: Boolean,
      defaultExpandAll: Boolean,
      expandOnClickNode: {
        type: Boolean,
        default: true
      },
      autoExpandParent: {
        type: Boolean,
        default: true
      },
      defaultCheckedKeys: Array,
      defaultExpandedKeys: Array,
      renderContent: Function,
      showCheckbox: {
        type: Boolean,
        default: true
      },
      showSelectall: {
        type: Boolean,
        default: true
      },
      showTooltip: {
        type: Boolean,
        default: true
      },
      props: {
        default() {
          return {
            children: 'children',
            label: 'label',
            icon: 'icon',
            mark: 'mark',
            appoint: 'appoint',
            disabled: 'disabled'
          };
        }
      },
      lazy: {
        type: Boolean,
        default: false
      },
      highlightCurrent: Boolean,
      currentNodeKey: [String, Number],
      load: Function,
      filterNodeMethod: Function,
      accordion: {
        type: Boolean,
        default: true
      },
      indent: {
        type: Number,
        default: 15
      },
      cols: {
        type: Number,
        default: 3
      },
      setChildTop: {
        type: Number,
        default: 36
      },
      setPosition: {
        type: Number,
        default: 46
      },
      setIcon: {
        type: String,
        default: 'el-icon-menu'
      },
      leafCheckLimit: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      children: {
        set(value) {
          this.data = value;
        },
        get() {
          return this.data;
        }
      }
    },

    watch: {
      defaultCheckedKeys(newVal) {
        this.store.defaultCheckedKeys = newVal;
        this.store.setDefaultCheckedKey(newVal);
      },
      defaultExpandedKeys(newVal) {
        this.store.defaultExpandedKeys = newVal;
        this.store.setDefaultExpandedKeys(newVal);
      },
      currentNodeKey(newVal) {
        this.store.setCurrentNodeKey(newVal);
        this.store.currentNodeKey = newVal;
      },
      data(newVal) {
        this.store.setData(newVal);
      }
    },

    methods: {
      filter(value) {
        if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
        this.store.filter(value);
      },
      getNodeKey(node, index) {
        const nodeKey = this.nodeKey;
        if (nodeKey && node) {
          return node.data[nodeKey];
        }
        return index;
      },
      getCheckedNodes(leafOnly) {
        return this.store.getCheckedNodes(leafOnly);
      },
      getCheckedKeys(leafOnly) {
        return this.store.getCheckedKeys(leafOnly);
      },
      setCheckedNodes(nodes, leafOnly) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
        this.store.setCheckedNodes(nodes, leafOnly);
      },
      setCheckedKeys(keys, leafOnly) {
        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
        this.store.setCheckedKeys(keys, leafOnly);
      },
      setChecked(data, checked, deep) {
        this.store.setChecked(data, checked, deep);
      },
      handleNodeExpand(nodeData, node, instance) {
        this.broadcast('ElMultiNode', 'multi-node-expand', node);
        this.$emit('node-expand', nodeData, node, instance);
      },
      getRootLeafNodes() {
        return this.root.isLeafNodes;
      }
    },

    created() {
      this.isTree = true;

      this.store = new TreeStore({
        key: this.nodeKey,
        data: this.data,
        lazy: this.lazy,
        props: this.props,
        load: this.load,
        currentNodeKey: this.currentNodeKey,
        checkStrictly: this.checkStrictly,
        defaultCheckedKeys: this.defaultCheckedKeys,
        defaultExpandedKeys: this.defaultExpandedKeys,
        autoExpandParent: this.autoExpandParent,
        defaultExpandAll: this.defaultExpandAll,
        filterNodeMethod: this.filterNodeMethod
      });

      this.root = this.store.root;
    },
    mounted() {
      this.$nextTick(() => {
        // TODO 此功能项可能会有问题
      //        console.log(this.$children);
      //        let nodeHeight = this.$el.getElementsByClassName('el-multi-node-1')[0].childNodes[0].clientHeight;
        for (let i = 0;i < this.$children.length; i++) {
          if (i > 0 && i <= 2) {
          //            console.log(this.$children[i].setChildTop);
            this.$children[i].setChildTop = this.setChildTop * 1;
          } else if (i > 2 && i <= 5) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 2;
          } else if (i > 5 && i <= 8) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 3;
          } else if (i > 8 && i <= 11) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 4;
          } else if (i > 11 && i <= 14) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 5;
          } else if (i > 14 && i <= 17) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 6;
          } else if (i > 17 && i <= 20) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 7;
          } else if (i > 20 && i <= 23) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 8;
          } else if (i > 23 && i <= 26) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 9;
          } else if (i > 26 && i <= 29) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 10;
          } else if (i > 29 && i <= 32) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 10;
          } else if (i > 32 && i <= 35) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 10;
          } else if (i > 35 && i <= 38) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 10;
          } else if (i > 38 && i <= 41) {
            this.$children[i].setChildTop = this.$children[i].setChildTop * 10;
          }
        }
      });
    }
  };
</script>
