<template>
  <div class="h-full w-full">
    <el-tree
      :data="areaTree"
      :props="defaultProps"
      node-key="id"
      highlight-current
      :current-node-key="siteId"
      accordion
      :expand-on-click-node="false"
      :default-expanded-keys="[siteId]"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ node }">
        <i class="el-icon-location primary"></i>
        {{ node.label }}
      </div>
    </el-tree>
  </div>
</template>

<script>
import { mapState } from "vuex";
import storage from "@/utils/storage";
export default {
  name: "AreaTree",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      siteId: this.$route.params.siteId
        ? this.$route.params.siteId
        : storage.get(2, "siteId"),
    };
  },
  computed: {
    ...mapState("user", ["areaTree"]),
    siteTree() {
      let obj = {
        id: "",
        label: "全部数据",
        type: "site",
        children: [],
      };
      obj.children = this.areaTree;
      return [obj];
    },
  },
  created() {},
  methods: {
    handleNodeClick(data) {
      let form = {
        type: data.type,
        id: data.id,
      };
      this.$emit("change", form);
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-tree) {
  min-width: 100%;
  display: inline-block !important;
}
:deep(.el-tree--highlight-current) {
  .el-tree-node.is-current > .el-tree-node__content {
    color: var(--primary);
    background: #0000;
  }
}

:deep(.el-tree-node__content) {
  align-self: baseline;
}
</style>
