<template>
    <div class="tree">
        <div class="content">
            <el-tree
                :data="treeData"
                node-key="id"
                default-expand-all
                :expand-on-click-node="expandOnClickNode"
                highlight-current
                :props="defaultProps"
                ref="tree"
                @node-click="treeClick"
                :filter-node-method="filterNode"
                style="margin-bottom:25px;">
                    <span class="span-ellipsis" slot-scope="{ node,data }">
                    <span><el-tag type="success">{{data.count}}</el-tag></span>
		                <span :title="node.label">{{ node.label }}</span>
	                </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
import flow from "@/api/flow.js";
export default {
    name:"flowTree",
    props:{
      loadCount:Function,
      data:Object
    },
    data() {
        return {
            filterText:"",
            expandOnClickNode:false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            treeData:[]
        }
    },
    watch: {
        data: {
            handler(newValue, oldValue) {
                this.$nextTick(()=>{
                    this.getFlowTree();
                });
            },
            deep: true,
            immediate:true
        },
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        getFlowTree(){
            const this_ = this;
            flow.getFlowTree((response)=>{
                this_.treeData = response.data;
                this_.loadCount().then(data=>{
                    let map = this_.getCountMap(data);
                    this_.fillCountIntoTree(this_.treeData[0],map);
                    this_.treeData[0].count = this_.getTotal(data);
                });
            });
        },
        treeClick(n,i,e) {
            this.$emit("currentTree",n);
        },
        //过滤函数
        filterNode(value, data) {
            if(!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        cancelCheck() {
            this.$refs.tree.setCurrentKey(null);
        },
        getCountMap(array){
          let map = {};
          array.forEach(item=>{
            if (item.typeId===null){
              map[""] = item.count;
            }else{
              map[item.typeId] = item.count;
            }

          });
          return map;
        },
        fillCountIntoTree(tree,map){
          tree.count = map[tree.id]?map[tree.id]:0;
          tree.name += " ";
          if (tree.children==null){
            return tree.count;
          }
          for (let i=0;i<tree.children.length;i++){
            let child = tree.children[i];
            let count = this.fillCountIntoTree(child,map);
            tree.count += count;
            if (count===0){
              tree.children.remove(child);
              i--;
            }
          }
          return tree.count;
        },
        getTotal(data){
          let total = 0;
          data.forEach(item=>{
            total += item.count;
          });
          return total;
        }
    },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.tree{
    margin-left: 13px;
}
.common{
    width :100%;
    margin-top :6px;
}
.flows{
    display :block;
    font-size :14px;
    color :$--color-primary;
    text-decoration :none;
    margin-left :24px;
}
/deep/.el-input__inner {
    height:36px;
}
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>
