<template>
  <div class="process-classify">
    <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"
    >
      <div slot-scope="{ node, data }" class="span-ellipsis">
        <span
          :title="`${node.label}(${data.count || 0})`"
          class="overflow-show-ellipsis"
        >
          <ht-icon name="flowFiles" class="flow-files" scale="0.8"></ht-icon>
          {{ node.label }}({{ data.count || 0 }})
        </span>
      </div>
    </ht-tree>
    <div class="process-classify-bottom">
      <el-switch
        v-model="isExpand"
        :width="30"
        @change="handleValChange"
      ></el-switch>
      <span class="bottom-text">默认{{ isExpand ? '展开' : '收起' }}</span>
    </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,
    //传阅事项
    circulated: getCirculatedProcessClassifyCount,
    received: getReceivedProcessClassifyCount,
    //我的申请
    myRequest: getRequestProcessClassifyCount,
  }
  export default {
    name: 'ProcessClassify',
    props: {
      defaultExpandOrCollapse: {
        type: Boolean,
        default: false,
      },
      tabActiveName: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        isExpand: false,
        filterText: '',
        expandOnClickNode: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        treeData: [],
      }
    },
    computed: {
      currentIsExpand() {
        const isExpandAside = localStorage.getItem(
          `${this.tabActiveName}AsideShow`
        )
        return isExpandAside === true || isExpandAside === 'true'
      },
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      tabActiveName(name) {
        this.getProcessClassifyCount()
      },
    },
    created() {
      this.isExpand = this.currentIsExpand
      this.getProcessClassifyCount()
    },
    methods: {
      //流程分类默认展开收起事件
      handleValChange(isExpand) {
        localStorage.setItem(`${this.tabActiveName}AsideShow`, isExpand)
      },
      nodeClick(node, i, e) {
        this.$emit('node-click', node)
      },
      getProcessClassifyCount() {
        const params = {}
        MATTER_COUNT_API[this.tabActiveName]?.(params)?.then(async (res) => {
          const data = await getFlowTree()
          this.treeData = data
          if (data?.length > 0) {
            this.treeData[0].count = this.getProcessClassifyTotal(res)
            const countMap = this.getCountMap(res)
            this.fillCountIntoTree(data[0], countMap)
          }
        })
      },
      //过滤函数
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      cancelCheck() {
        this.$refs.tree.setCurrentKey(null)
      },
      getCountMap(countList) {
        let map = {}
        countList?.map?.((item) => {
          if (!item.typeId) {
            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
      },
      getProcessClassifyTotal(data) {
        const total = data?.reduce?.((pre, cur) => {
          return pre + cur.count
        }, 0)
        return total
      },
    },
  }
</script>

<style lang="scss" scoped>
  .process-classify {
    display: flex;
    flex-direction: column;
    height: calc(100% - 21px);
    padding: 21px 8px 0 8px;
    .ht-tree {
      height: calc(100% - 50px);
      overflow: auto;
      .flow-files {
        width: 20px;
        vertical-align: 0;
      }
      ::v-deep {
        .el-tree,
        .expanded {
          color: $base-menu-color;
        }
        .el-tree-node__expand-icon {
          font-size: 16px;
        }
        .el-tree--highlight-current
          .el-tree-node.is-current
          > .el-tree-node__content {
          border-radius: $base-radius;
          .span-ellipsis {
            span,
            i {
              color: var(--themeColor);
            }
          }
        }
        .el-tree-node__content {
          height: 32px;
          line-height: 32px;
          &:hover {
            background-color: transparent;
            color: var(--themeColor);
            i {
              color: var(--themeColor);
            }
          }
          .span-ellipsis {
            width: 100%;
          }
          .overflow-show-ellipsis {
            display: block;
            width: calc(100% - 8px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            align-items: center;
            font-weight: 400;
          }
        }
      }
      .tree-item-count {
        margin-left: 6px;
        display: inline-block;
        height: 12px;
        line-height: 12px;
        border-radius: 8px;
        color: #2b3e50 !important;
        background: $base-process-classify-count-bg-color;
      }
    }
    .process-classify-bottom {
      height: 30px;
      line-height: 30px;
      background: $base-color-white;
      display: flex;
      align-items: center;
      ::v-deep {
        .el-switch__core {
          height: 16px;
          &::after {
            width: 12px;
            height: 12px;
          }
        }
        .el-switch.is-checked .el-switch__core {
          &::after {
            margin-left: -12px;
          }
        }
      }
      .bottom-text {
        font-size: $base-font-size-small;
        color: $base-dark-title-color;
        padding-left: 10px;
      }
    }
  }
</style>