<template>
  <MegaSplitPanes class="setting-user-page">
    <MegaSplitPane size="18">
      <div v-if="treeData.length" class="tree-box">
        <a-tree
          :block-node="true"
          :default-expand-all="true"
          :tree-data="treeData"
          :replace-fields="{
            children: 'children',
            key: 'code',
            value: 'code',
            title: 'label',
          }"
          @select="handleNodeClick"
        >
        </a-tree>
      </div>
      <div v-else>
        {{ $t("NO_DATA") }}
      </div>
    </MegaSplitPane>
    <MegaSplitPane size="82">
      <slot></slot>
    </MegaSplitPane>
  </MegaSplitPanes>
</template>

<script>
import { SplitPanes as MegaSplitPanes } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "",
  components: {
    MegaSplitPanes,
    MegaSplitPane: MegaSplitPanes.Pane,
  },
  data() {
    return {
      fabId: "",
      areaId: "",
      lineId: "",
      treeData: "",
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    // 点击节点查询数据
    handleNodeClick(node, info) {
      this.fabId = "";
      this.areaId = "";
      this.lineId = "";
      if (info.node.dataRef?.type === "S") {
        // eslint-disable-next-line prefer-destructuring
        this.fabId = node[0];
      } else if (info.node.dataRef?.type === "A") {
        // eslint-disable-next-line prefer-destructuring
        this.areaId = node[0];
      } else if (info.node.dataRef?.type === "L") {
        // eslint-disable-next-line prefer-destructuring
        this.lineId = node[0];
      }
      this.$emit(
        "click",
        {
          fabId: this.fabId,
          areaId: this.areaId,
          lineId: this.lineId,
        },
        info
      );
    },
    /**
     *获取左侧完整部门树图
     */
    getTreeData() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp/location-tree`)
        .then((res) => {
          this.treeData = res.data.data?.lineTree;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.setting-user-page {
  position: absolute;
  width: 100%;
  height: 100%;
}
.tree-box {
  width: 100%;
  height: calc(100vh - 106px);
  overflow-y: auto;
}
</style>
