<template>
  <Maximize v-if="maximize" />
  <Tabs ref="tabsRef" v-if="tabs && layout != 'vertical'">
    <template #menu-right>
      <slot name="menu-right" />
    </template>
  </Tabs>
  <el-main class="lj-main-body" :class="globalStore.assemblySize">
    <!-- {{ JSON.stringify(keepAliveList) }} -->
    <router-view v-slot="{ Component, route }">
      <keep-alive>
        <component :is="Component" :key="getRouteKey(route)" />
      </keep-alive>
    </router-view>
  </el-main>
  <el-footer v-if="footer">
    <Footer />
  </el-footer>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import Maximize from "./components/Maximize.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";
import { TabPaneName } from "element-plus";
import { useRoute } from "vue-router";

const cur_route = useRoute();
const globalStore = useGlobalStore();
const { maximize, isCollapse, layout, asideInverted, tabs, footer, tabsAnimating } = storeToRefs(globalStore);

const keepAliveStore = useKeepAliveStore();
const { keepAliveName, keepAliveList } = storeToRefs(keepAliveStore);

// 注入刷新页面方法
const isRouterShow = ref(true);
// const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);

/**
 * @description 监听路由变化, 刷新缓存互不影响
 */
const refreshTimes = ref<any>([]);

/**
 * @description 刷新时，记录刷新次数，将用于刷新key值
 */
// const refreshCurrentPage = (val: boolean) => {
//   const fullPath = cur_route.fullPath;
//   let routeItem = refreshTimes.value.find((item: any) => item.fullPath == fullPath);
//   if (!routeItem) {
//     routeItem = {
//       fullPath: fullPath,
//       times: 0
//     };
//     refreshTimes.value.push(routeItem);
//   }

//   refreshTimes.value.forEach((item: any) => {
//     if (item.fullPath == fullPath) {
//       item.times++;
//     }
//   });
// };
const refreshCurrentPage = (val: boolean) => {
  // const fullPath = cur_route;
  // let routeItem = keepAliveList.find((item: any) => item.fullPath == fullPath);
  // if (!routeItem) {
  //   routeItem = {
  //     fullPath: fullPath,
  //     times: 0
  //   };
  //   keepAliveList.push(routeItem);
  // }

  console.log("refreshCurrentPage cur_route :>> ", cur_route);
  keepAliveStore.updateKeepAliveName(cur_route);
};

// const getRouteKey = () => {
//   const cur_route = useRoute();
//   let routeItem = keepAliveStore.getKeepAliveName(cur_route.fullPath);
//   return routeItem.fullPath + "_" + routeItem.times;
// // };
// const getRouteKey = computed(() => {
//   const cur_route = useRoute();
//   const keepAliveStore = useKeepAliveStore();
//   let routeItem = keepAliveStore.getKeepAliveName(cur_route.fullPath);
//   return routeItem.fullPath + "_" + routeItem.times;
// });
// };
const getRouteKey = (route: any) => {
  // const cur_route = useRoute();
  // const keepAliveStore1 = useKeepAliveStore();
  let routeItem = keepAliveStore.getKeepAliveName(route.fullPath);
  console.log("getKeepAliveName routeItem getRouteKey:>> ", routeItem, route.fullPath);
  return routeItem.fullPath + "_" + routeItem.times;
};

const tabsRef = ref();
const tabRemove = (fullPath: TabPaneName) => {
  tabsRef.value.tabRemove(fullPath);
};
/**
 * @description 注入刷新页面方法，子页面可调用
 * @param {boolean} val 是否刷新
 */
provide("refresh", refreshCurrentPage);
/**
 * @description 注入标签页删除方法，子页面可调用
 * @param {string} fullPath 标签页的 fullPath
 */
provide("tabRemove", tabRemove);

// 监听当前页面是否最大化，动态添加 class
watch(
  () => maximize.value,
  () => {
    const app = document.getElementById("app") as HTMLElement;
    if (maximize.value) app.classList.add("main-maximize");
    else app.classList.remove("main-maximize");
  },
  { immediate: true }
);

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
  () => layout.value,
  () => {
    const body = document.body as HTMLElement;
    let clsVal: string = layout.value;
    if (layout.value == "vertical" && asideInverted.value) {
      // 反色，增加类名
      clsVal = clsVal.concat(" inverted");
    } else {
      clsVal = clsVal.replace("inverted", "");
    }
    console.log("clsVal :>> ", clsVal);
    body.setAttribute("class", clsVal);
  },
  { immediate: true }
);

// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref(0);
const listeningWindow = useDebounceFn(() => {
  screenWidth.value = document.body.clientWidth;
  if (!isCollapse.value && screenWidth.value < 1380) globalStore.setGlobalState("isCollapse", true);
  // if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
}, 100);
window.addEventListener("resize", listeningWindow, false);
onBeforeUnmount(() => {
  window.removeEventListener("resize", listeningWindow);
});

defineExpose({
  refreshCurrentPage
});
</script>

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

<style lang="scss">
.lj-main-body {
  &.small {
    padding: 4px;
  }
}
.lj-main-body.small {
  .card {
    padding: 8px 10px;
  }
  .card + .card {
    margin-top: 4px;
  }

  .table-box .table-header .el-button,
  .table-main .table-header .el-button {
    margin-bottom: 8px;
  }
  .table-box .table-header .header-button-ri .el-button + .el-dropdown,
  .table-main .table-header .header-button-ri .el-button + .el-dropdown {
    margin-left: 4px;
  }
  .table-box .table-header .header-button-ri .el-dropdown + .el-button,
  .table-main .table-header .header-button-ri .el-dropdown + .el-button {
    margin-left: 4px;
  }
  .el-button + .el-button {
    margin-left: 4px;
  }
  .el-button-group > .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
