<template>
  <div class="flow-tree">
    <ht-tree
      ref="tree"
      class="ht-tree"
      :tree-data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="expandOnClickNode"
      highlight-current
      :props="defaultProps"
      :filter-node-method="filterNode"
      @node-click="nodeClick"
    >
      <span slot-scope="{ node, data }" class="span-ellipsis">
        <span :title="node.label">
          {{ node.label }}
          <i v-if="data.count" class="tree-item-count">({{ data.count }})</i>
        </span>
      </span>
    </ht-tree>
    <div class="tree-bottom__wrap">
      <span class="bottom-text">
        默认{{
          isExpand
            ? $t('flowTree.defaultExpand')
            : $t('flowTree.defaultCollapse')
        }}
      </span>
      <el-switch v-model="isExpand" @change="handleValChange"></el-switch>
    </div>
  </div>
</template>

<script>
  import {
    getFlowTree,
    getTodoProcessClassifyCount,
    getLeaderTodoProcessClassifyCount,
    getLeaderDoneProcessClassifyCount,
    getDoneProcessClassifyCount,
    getDelegateProcessClassifyCount,
    getNewProcessClassifyCount,
    getCollectionProcessClassifyCount,
    getDraftProcessClassifyCount,
    getCirculatedProcessClassifyCount,
    getReceivedProcessClassifyCount,
    getRequestProcessClassifyCount,
  } from '@/api/process'
  const MATTER_COUNT_API = {
    //我的任务获取各事项流程分类数量
    todo: getTodoProcessClassifyCount,
    leaderTodo: getLeaderTodoProcessClassifyCount,
    done: getDoneProcessClassifyCount,
    leaderDone: getLeaderDoneProcessClassifyCount,
    myDelegate: getDelegateProcessClassifyCount,
    //新建流程
    processOverview: getNewProcessClassifyCount,
    myCollection: getCollectionProcessClassifyCount,
    myDraft: getDraftProcessClassifyCount,
    //传阅事项
    ciculated: getCirculatedProcessClassifyCount,
    received: getReceivedProcessClassifyCount,
    //我的申请
    myRequest: getRequestProcessClassifyCount,
  }
  export default {
    name: 'FlowTree',
    props: {
      isShowAside: {
        type: Boolean,
        default: false,
      },
      tabActiveName: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        isExpand: false,
        filterText: '',
        expandOnClickNode: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        treeData: [],
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      tabActiveName(name) {
        this.getFlowTree()
      },
    },
    created() {
      this.isExpand = this.isShowAside
      this.getFlowTree()
    },
    methods: {
      //流程分类默认展开收起事件
      handleValChange(isExpand) {
        this.$emit('switch-change', isExpand)
      },
      nodeClick(node, i, e) {
        this.$emit('node-click', node)
      },
      getFlowTree() {
        getFlowTree().then((response) => {
          this.treeData = response
          const params = {}
          MATTER_COUNT_API[this.tabActiveName]?.(params)?.then((data) => {
            let map = this.getCountMap(data)
            this.fillCountIntoTree(this.treeData[0], map)
            this.treeData[0].count = this.getTotal(data)
          })
        })
      },
      //过滤函数
      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>
  .flow-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 12px;
    .ht-tree {
      height: calc(100% - 50px);
      overflow: auto;
      .tree-item-count {
        font-style: normal;
      }
    }
    .tree-bottom__wrap {
      height: 30px;
      line-height: 30px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bottom-text {
        font-size: $base-font-size-small;
      }
    }
  }
  .common {
    width: 100%;
    margin-top: 6px;
  }
  .flows {
    display: block;
    margin-left: 24px;
    font-size: 14px;
    color: $base-color-blue;
    text-decoration: none;
  }
  ::v-deep.el-input__inner {
    height: 36px;
  }
  .span-ellipsis {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>