<!-- 纵向布局 -->
<template>
  <el-container class="layout">
    <el-aside id="vertical-menu">
      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
        <div class="logo flx-center">
          <div class="logo-img-box flx-center">
            <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
          </div>
          <span class="logo-text" v-show="!isCollapse">
            <span class="company">{{ AppCompany }}</span>
            <span>
              {{ AppName }}
            </span>
          </span>
        </div>
        <!-- <el-input v-model="searchMenu"></el-input> -->
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :router="false"
            :unique-opened="true"
            :collapse-transition="false"
          >
            <SubMenu :menuList="menuList" :is-collapse="false" />
          </el-menu>
        </el-scrollbar>
        <el-menu class="menu-collapse-icon" :router="false" :unique-opened="true">
          <el-menu-item class="flx-center" @click="changeCollapse">
            <i class="iconfont" :class="globalStore.isCollapse ? 'iconleft-indent-01' : 'iconright-indent-01'"></i>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <RightMenu v-if="hasRightMenu" :data="rightMenu" @close="hasRightMenu = false" />
    <el-container v-else class="vertical-main">
      <el-header>
        <!-- <ToolBarLeft :show-more-button="false" /> -->
        <div class="tool-bar-lf">
          <!-- <CollapseIcon id="collapseIcon" /> -->
          <!-- <Breadcrumb id="breadcrumb" v-if="globalStore.breadcrumb" /> -->
          <Tabs :show-more-button="false" />
        </div>
        <ToolBarRight @goto-refresh="refresh" />
      </el-header>
      <Main ref="MainRef" />
    </el-container>
  </el-container>
</template>

<script setup lang="ts" name="layoutVertical">
import { ref, computed, nextTick, provide } 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 ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import RightMenu from "@/layouts/components/Menu/RightMenu.vue";
// import CollapseIcon from "@/layouts/components/Header/components/CollapseIcon.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
// import { storeToRefs } from "pinia";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
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 changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
// const { tabs } = storeToRefs(globalStore);

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

const rightMenu = ref([]);
const hasRightMenu = ref(false);

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

/**
 * @description 局部刷新
 */
const MainRef = ref<any>(null);
const refresh = () => {
  setTimeout(() => {
    keepAliveStore.removeKeepAliveName(route.name as string);
    MainRef.value.refreshCurrentPage(false);
    nextTick(() => {
      keepAliveStore.addKeepAliveName(route.name as string);
      MainRef.value.refreshCurrentPage(true);
    });
  }, 0);
};

const searchMenu = ref("");
</script>

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