<template>
  <MegaSplitPanes class="setting-user-page">
    <MegaSplitPane size="18">
      <div class="epms_card_title pl-3 pt-3 mb-3 flex items-center">
        <div class="epms_card_title_line mr-4"></div>
        {{ $t("POSITION_INFORMATION") }}
      </div>
      <div style="display: flex; align-items: center" class="px-3 mb-2">
        <a-input-search
          v-model="searchKey"
          :placeholder="$t('PLACEENTER')"
          class="input-with-select"
          @search="searchTree"
        >
          <template #enterButton>
            <a-button
              type="primary"
              :title="$t('RESET')"
              @click="() => refresh()"
            >
              <a-icon type="reload" />
            </a-button>
          </template>
        </a-input-search>
      </div>
      <div v-if="treeData.length" class="tree-box px-3">
        <a-tree
          :block-node="true"
          :default-expand-all="true"
          :tree-data="treeData"
          :replace-fields="{
            children: 'children',
            key: 'code',
            value: 'code',
            title: 'label',
          }"
          :show-icon="true"
          @select="handleNodeClick"
        >
          <img slot="parent" style="margin-top: 6px" :src="epmsIconFile" />
          <img slot="child" style="margin-top: 6px" :src="epmsIconLine" />
        </a-tree>
      </div>
      <div v-else class="flex justify-center">
        {{ $t("NO_DATA") }}
      </div>
    </MegaSplitPane>
    <MegaSplitPane size="82">
      <slot></slot>
    </MegaSplitPane>
  </MegaSplitPanes>
</template>

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

export default {
  name: "",
  components: {
    Icon,
    MegaSplitPanes,
    MegaSplitPane: MegaSplitPanes.Pane,
  },
  data() {
    return {
      // eslint-disable-next-line
      epmsIconFile: require("@/assets/img/epms_icon_file.png"),
      // eslint-disable-next-line
      epmsIconLine: require("@/assets/img/epms_icon_line.png"),
      fabId: "",
      areaId: "",
      lineId: "",
      searchKey: "", // 查询目录名称展示新的树
      isSearch: false, // 是否为查询的平级树
      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
      );
    },
    refresh() {
      this.directoryCode = "";
      this.searchKey = "";
      this.getTreeData();
    },
    // 搜索名称查询树节点
    searchTree() {
      if (!this.searchKey) {
        this.getTreeData();
      } else {
        this.isSearch = true;
        this.$axios
          .get(`${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp/fac-query`, {
            params: { searchKey: this.searchKey },
          })
          .then((res) => {
            this.treeData = res.data.data;
            this.setIcon(this.treeData);
          });
      }
    },
    /** 设置图标 */
    setIcon(menus) {
      for (let value of menus) {
        if (value.type === "S") {
          // 关键 - 判断是否还有子节点
          value.slots = { icon: "parent" };
        } else {
          value.slots = { icon: "child" };
        }
        if (value.children && value.children.length > 0) {
          this.setIcon(value.children);
        }
      }
      this.treeData = menus;
    },
    /**
     *获取左侧完整部门树图
     */
    getTreeData() {
      this.isSearch = false;
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/epm/eam/eqp/location-tree`)
        .then((res) => {
          this.treeData = res.data.data?.lineTree;
          this.setIcon(this.treeData);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.epms_card_title {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  .epms_card_title_line {
    width: 4px;
    height: 16px;
    background: #006896;
  }
}
.setting-user-page {
  position: absolute;
  width: 100%;
  height: 100%;
  .title {
    font-size: 18px;
    line-height: 32px;
    border-bottom: 1px solid rgba(229, 231, 235, 1);
  }
}
.tree-box {
  width: 100%;
  height: calc(100vh - 183px);
  overflow-y: auto;
}
</style>
