<!-- 左侧树结构 -->
<template>
  <div class="left-aside">
    <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode">
    </el-tree>
  </div>
</template>
<script>
import { queryCategoryGraph } from "@/api/home"
export default {
  data() {
    return {
      defaultProps: {
        children: 'categoryList',
        label: 'name'
      },
      treeData: []
    };
  },
  mounted() {
    this.getCategoryGraph();
  },
  methods: {
    changeNode(data, node) {
      if (node.isLeaf) {
        this.$emit('changeNode', data)
      }
    },
    //// 接口
    // 获取系统图类型
    getCategoryGraph() {
      const pa = {
        switch: false
      };
      queryCategoryGraph(pa).then(res => {
        this.treeData = res.content;
        if (!res.content.length) {
          this.$emit('noTree')
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.left-aside {
  background: #f7f9fa;
  color: #1F2429;
  width: 100%;
  height: calc(100% - 49px);
  padding-left: 6px;
  .el-tree {
    background: #f7f9fa;
    /deep/ .el-tree-node {
      &.is-current {
        & > .el-tree-node__content {
          background: #e1f2ffff;
          color: #0091ffff;
          &:hover{
            background: #e1f2ffff;
            color: #0091ffff;
          }
        }
      }
      .el-tree-node__content {
        height: 38px;
        line-height: 38px;
        &:hover {
          background: #F5F6F7;
          color: #1F2429;
        }
      }
    }
  }
}
</style>