<!-- 左侧树结构 -->
<template>
  <div class="left-aside">
    <el-tree
      default-expand-all
      :data="treeData"
      :props="defaultProps"
      accordion
      @current-change="changeNode"
    >
    </el-tree>
  </div>
</template>
<script>
import { queryCategoryGraph } from "@/api/home";
import { mapState } from "vuex";
export default {
  data() {
    return {
      defaultProps: {
        children: "categoryList",
        label: "name",
      },
      treeData: [],
    };
  },
  mounted() {},
  computed: {
    ...mapState(["projectId"]),
  },
  watch: {
    projectId: {
      handler: function (val, oldVal) {
        this.getCategoryGraph();
      },
      immediate: true,
    },
  },
  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");
        } else {
          this.$emit("getDataSuc")
        }
      });
    },
  },
};
</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>