<!-- 经典布局 -->
<template>
  <el-container class="layout">
    <RightMenu ref="RightMenuRef" @close="hasRightMenu = false" />
    <el-container class="classic-content">
      <el-container class="classic-main">
        <el-header class="classic-header">
          <div class="logo flx-center" @click="toggleRightMenu">
            <div class="logo-img-box flx-center">
              <img class="logo-img" src="@/assets/images/logo1.svg" alt="logo" />
            </div>
            <span class="logo-text">
              <span class="company">{{ AppCompany }}</span>
              <span>
                {{ AppName }}
              </span>
            </span>
          </div>
          <div class="flx-end">
            <ToolBarRight :functions="['refresh', 'autoLock', 'fullscreen', 'assemblySize']" @goto-refresh="refresh" />
            <Avatar size="small" />
          </div>
        </el-header>
        <Main ref="MainRef"></Main>
      </el-container>
    </el-container>
    <AvatarDrawer @goto-refresh="refresh" />
  </el-container>
</template>

<script setup lang="ts" name="layoutClassic">
import { ref, nextTick, computed, provide, watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import ToolBarLeftAccount from "@/layouts/components/Header/ToolBarLeftAccount.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import RightMenu from "@/layouts/components/Menu/RightMenu.vue";
import { pinyinFilterTree } from "@/utils/pinyin";
import { throttle, at } from "lodash-es";
import Avatar from "../components/Header/components/Avatar.vue";
import AvatarDrawer from "../components/Header/components/AvatarDrawer.vue";

const keepAliveStore = useKeepAliveStore();
const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const showMenuList = ref<any>([]);
watch(
  () => menuList.value,
  (val: any) => {
    showMenuList.value = val;
  }
);
onMounted(() => {
  showMenuList.value = menuList.value;
});

const AppName = import.meta.env.VITE_GLOB_APP_TITLE;
const AppCompany = import.meta.env.VITE_GLOB_APP_COMPANY;

const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);

const LayoutSearchMenuRef = ref();
const clickCollapseSearch = () => {
  if (globalStore.isCollapse) {
    changeCollapse();
  }
  startSearch.value = true;
  nextTick(() => {
    LayoutSearchMenuRef.value.focus();
  });
};
const searchMenuFocus = () => {
  LayoutSearchMenuRef.value.select();
};

const hasRightMenu = ref(false);
const RightMenuRef = ref();

const toggleRightMenu = (val: any) => {
  nextTick(() => {
    if (hasRightMenu.value) {
      RightMenuRef.value.closed();
    } else {
      RightMenuRef.value.show();
    }
    hasRightMenu.value = !hasRightMenu.value;
  });
};
/**
 * @description 局部刷新
 */
const MainRef = ref<any>(null);
const refresh = () => {
  keepAliveStore.removeKeepAliveName(route);
  MainRef.value.refreshCurrentPage(false);
  setTimeout(() => {
    nextTick(() => {
      keepAliveStore.addKeepAliveName(route);
      MainRef.value.refreshCurrentPage(true);
    });
  }, 0);
};

const rightMenu = ref([]);

const changeRightMenu = (val: any) => {
  hasRightMenu.value = true;
  console.log("changeRightMenu val :>> ", val);
  rightMenu.value = val;
};
provide("changeRightMenu", changeRightMenu);

const asideWidth = computed(() => {
  return globalStore.assemblySize === "small" ? "44px" : "65px";
});

provide("layoutRefresh", refresh);

let datatest = ref<any>({});
const autoAddMenuToHome = (data: any) => {
  console.log("autoAddMenuToHome data :>> ", data);
  if (data) {
    datatest.value = data;
  }
  setTimeout(() => {
    datatest.value = {};
  }, 200);
  // return datatest.value;
};
provide("addMenuToHome", autoAddMenuToHome);
provide("addMenuToHomeList", datatest);

const searchMenu = ref("");
const startSearch = ref(false);
const expendedSubMenus = ref<any>([]);

console.log("menuList.value :>> ", menuList.value);
// 节流
const disshow = throttle((val: any) => {
  searchEvent();
}, 500);
const searchProps = "meta.title";
const searchEvent = () => {
  // 关闭展开菜单
  expendedSubMenus.value.map((path: string) => {
    menuRef.value.close(path);
  });
  expendedSubMenus.value = [];
  const filterVal = String(searchMenu.value).trim().toLowerCase();
  if (filterVal) {
    showMenuList.value = pinyinFilterTree(filterVal, menuList.value, searchProps);
    // 遍历菜单中所有的path
    showMenuList.value.forEach((item: any) => {
      expendedSubMenus.value.push(item.path);
      if (item.children && item.children.length) {
        item.children.forEach((subItem: any) => {
          if (subItem?.children && subItem.children.length) {
            expendedSubMenus.value.push(subItem.path);
          }
        });
      }
    });
    // 展开菜单
    nextTick(() => {
      expendedSubMenus.value.map((path: string) => {
        menuRef.value.open(path);
      });
    });
  } else {
    showMenuList.value = menuList.value;
  }
};

const handleCancelSearch = () => {
  searchMenu.value = "";
  startSearch.value = false;
  searchEvent();
  changeCollapse();
};

const menuRef = ref();

defineExpose({
  refresh
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
