<template>
  <div class="flex pd-20">
    <el-card class="box-card flex1">
      <div slot="header" class="flex jc-sb">
        <span>{{leftNum}}项</span>
        <el-checkbox v-if="showAllCheck" v-model="allChecked" @change="checkChang">默认全部引用</el-checkbox>
      </div>
      <div>
        <el-scrollbar :style="scrollbarStyle">
          <el-tree show-checkbox
            :data="leftTreeData" @check-change="checkChange('leftTree')"
            :props="defaultProps" :expand-on-click-node="false"
            highlight-current node-key="id"
            ref="leftTree" @node-expand="nodeExpand">
          </el-tree>
        </el-scrollbar>
      </div>
    </el-card>
    <div class="flex flex-d-c flex-center" style="width:50px;">
      <div><el-button @click="addTree" size="mini" icon="el-icon-arrow-right"></el-button></div>
      <div><el-button @click="delTree" size="mini" icon="el-icon-arrow-left"></el-button></div>

    </div>
    <el-card class="box-card flex1">
      <div slot="header" class="clearfix">
        <span>{{rightNum}}项</span>
      </div>
      <div>
        <el-scrollbar :style="scrollbarStyle">
          <el-tree show-checkbox
            :data="rightTreeData" @check-change="checkChange('rightTree')"
            :props="defaultProps" :expand-on-click-node="false"
            highlight-current node-key="id"
            ref="rightTree" :default-expanded-keys="rightExpands">
          </el-tree>
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "treeTree",
  props: {
    leftTreeData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    scrollbarStyle:{
      type:String,
      default:'height:calc(100vh - 400px)'
    },
    showAllCheck:{
      type:Boolean,
      default:false
    }
  },
  computed: {

  },
  data(){
    return{
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      leftNum:0,
      rightTreeData:[],
      rightNum:0,
      rightExpands:[],
      allChecked:false,
    }
  },

  methods:{
    addTree(){
      //console.log(this.$refs.leftTree.getCheckedNodes())
      let allTree = JSON.parse(JSON.stringify(this.leftTreeData));

      //把半选和选中的数组key合并
      let keys = this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys());
      //console.log(keys,'keys');
      //console.log(allTree,'allTree');
      this.getRightTree(allTree,keys);
      this.rightTreeData = allTree;
      this.$emit('onAddTree',this.rightTreeData);
    },
    getRightTree(arr,keys){
      //对比所有的node和选中的key
      for (let i = arr.length-1; i >= 0; i--) {
        let isIn = false;
        for (let j = keys.length-1; j >= 0; j--) {
          if(keys[j] == arr[i].id){
            isIn = true;
            //已经匹配到的key移除，节省性能
            keys.splice(j,1);
            break;
          }
        }
        if(isIn){
          //包含在选中的节点，如果有childer继续递归判断
          if(arr[i].children && arr[i].children.length){
            this.getRightTree(arr[i].children,keys);
          }
        }else{
          //不包含在选中key的node删除
          arr.splice(i,1);
        }
      }
    },
    delTree(){
      let delNodes = this.$refs.rightTree.getCheckedNodes();
      //只把选中的节点移除
      delNodes.forEach((node)=>{
        //console.log(node)
        this.$refs.rightTree.remove(node);
        this.$refs.leftTree.setChecked(node.id,false);
      })
      this.getRightNum();
      this.getLeftNum();

      this.$emit('onDelTree',delNodes);
    },

    nodeExpand(data){
      this.rightExpands = this.rightExpands.concat([data.id]);
    },

    checkChange(treeName){
      switch (treeName) {
        case 'leftTree':
          this.getLeftNum();
          break;
        case 'rightTree':
          this.getRightNum();
          break;
      }
    },

    setRightTree(data){
      this.rightTreeData = data;

      let ids = [];
      for (let i = 0; i < data.length; i++) {
        this.getLeafIds(ids,data[i])
      }
      //在左边把右边的节点勾选上
      this.$nextTick(()=>{
        this.$refs.leftTree.setCheckedKeys(ids,true);
      })
    },

    getTreeAllId(treeName){
      let tree = this.$refs[treeName];
      if(this.allChecked){
        tree = this.$refs.leftTree;
      }
      //console.log(tree.data);
      let ids = [];
      for (let i = 0; i < tree.data.length; i++) {
        this.getIds(ids,tree.data[i]);
      }
      //console.log(obj)
      return ids.join(',');
    },
    getIds(ids,data){
      ids.push(data.id);
      if(data.children && data.children.length){
        for (let i = 0; i < data.children.length; i++) {
          this.getIds(ids,data.children[i]);
        }
      }
    },

    getLeafIds(ids,data){
      if(data.children && data.children.length){
        for (let i = 0; i < data.children.length; i++) {
          this.getLeafIds(ids,data.children[i]);
        }
      }else{
        ids.push(data.id)
      }
    },

    checkChang(){
      this.$emit('onCheckAll');
    },

    getLeftNum(){
      let checkNum = this.$refs.leftTree.getCheckedKeys().length;
      let halfNum = this.$refs.leftTree.getHalfCheckedKeys().length;
      this.leftNum = checkNum+halfNum;
    },
    getRightNum(){
      let checkNum = this.$refs.rightTree.getCheckedKeys().length;
      let halfNum = this.$refs.rightTree.getHalfCheckedKeys().length;
      this.rightNum = checkNum+halfNum;
    }
  }
};
</script>
