<template>
  <a-card :class="[{ [$style.treewrap]: !hideleftbtn }, { [$style.collapse]: fold }]">
    <a-spin :spinning="spinning" :class="$style.spin" />
    <a-empty v-if="!spinning && treeData.length === 0" />
    <a-tree
      show-icon
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :type="type"
      :tree-data="treeData"
      :replace-fields="replacefields"
      :default-selected-keys="selectedkey"
      @select="onSelect"
      @expand="onExpand"
    >
      <template slot="title" slot-scope="{ text, props }">
        <span :title="text">{{ text }}</span
        ><span v-if="props.count > 0">（{{ props.count }}）</span>
      </template>
    </a-tree>
    <a-button v-show="!hideleftbtn" type="primary" :class="$style.fold" @click="foldClick">
      <a-icon :type="icontype" />
    </a-button>
  </a-card>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-favorites-tree-import'
// 给所有对象增加scopedSlots属性
const addSlot = (obj) => {
  for (let i = 0; i < obj.length; i++) {
    Object.assign(obj[i], { scopedSlots: { title: 'title' } })
    if (obj[i].children) {
      addSlot(obj[i].children)
    }
  }
}
export default {
  name: 'KmFavoritesTree',

  components,
  mixins: [storeMixin],
  props: {
    hideleftbtn: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      spinning: true,
      icontype: 'left',
      fold: false,
      treeData: [],
      autoExpandParent: true,
      replacefields: {
        title: 'text',
        key: 'id',
      },
      expandedKeys: [], // 默认展开的结点,
      selectedkey: [], // 默认选中节点,
    }
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    getTreeData() {
      this.treeData = []
      KmKnowledageService.getFavoritesTree(this.type).then((res) => {
        if (res.data) {
          this.spinning = false
          const data = res.data
          addSlot(data)
          this.treeData = data
          this.expandedKeys = [data[0].id] // 默认展开顶结点
          this.selectedkey = [data[0].id] // 默认选中节点
          this.$emit('treeSelectd', parseInt(res.data[0].id), 'flag')
        }
      })
    },
    // 刷新树
    refresh(selectedId) {
      this.treeData = []
      KmKnowledageService.getFavoritesTree(this.type).then((res) => {
        if (res.data) {
          this.spinning = false
          const data = res.data
          addSlot(data)
          this.treeData = data
          this.expandedKeys.push(selectedId) // 之前展开的节点
        }
      })
    },
    // 树展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    // 树选中调用
    onSelect(selectedKeys) {
      this.selectedkey = selectedKeys
      this.$emit('treeSelectd', selectedKeys)
    },
    // 小箭头点击事件
    foldClick() {
      this.fold = !this.fold
      if (this.fold) {
        this.icontype = 'right'
      } else {
        this.icontype = 'left'
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.treewrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 20%;
  .fold {
    position: absolute;
    top: calc(50% - 30px);
    right: -15px;
    z-index: 2;
    width: 15px;
    height: 75px;
    padding: 0;
    border-radius: 0 10px 10px 0;
  }

  height: 100%;
  margin-right: $padding-lg;
  transition: width 0.2s;
  :global(.ant-tree) {
    height: 100%;
    overflow: hidden;
    overflow-x: scroll;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :global(.ant-card-body) {
    height: 100%;
    background: $white;
  }
}
.collapse {
  width: 0;
  padding-right: 0;
  padding-left: 0;
  :global(.ant-card-body) {
    background: transparent;
    :global(.ant-empty) {
      display: none;
    }
  }
}
</style>
