<template>
  <div>
    <div style="width:90%;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>类别</span>
        </div>
        <el-tree
          v-loading= "treeLoading"
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :default-expand-all="expandAllNode"
          :expand-on-click-node="expandNodeClick"
          class="filter-tree"
          @node-click = "handleNodeClick"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getTypeList } from '@/api/knowledge'
import { toTreeList } from '@/utils/structure'
export default {
  name: 'TypeTree',
  data() {
    return {
      tree: null, // 树
      defaultProps: {
        children: 'children',
        label: 'typeName'
      }, // 配置项
      treeLoading: false, // 加载状态
      expandAllNode: true, // 是否展开所有节点
      expandNodeClick: false // 是否点击展开
    }
  },
  created() {
    this.fetchTypeTree()
  },
  methods: {
    // 获取组织结构树
    fetchTypeTree() {
      this.treeLoading = true
      getTypeList().then(response => {
        // response.data = [
        //   { typeName: '大类', id: '1', pid: '', deptName: '顶级', num: '1' },
        //   { typeName: '小类1', id: '2', pid: '1', deptName: '顶级', num: '1' },
        //   { typeName: '小类2', id: '3', pid: '1', deptName: '顶级', num: '1' }
        // ]
        this.tree = toTreeList(response.data, '-1', true)
        this.treeLoading = false
      })
    },
    // 点击左侧组织结构项触发
    handleNodeClick(data) {
      this.$emit('change', data.id)
    }
  }
}
</script>

<style scoped>

</style>
