<template>
  <!-- 左右布局（侧边栏模式） -->
  <el-container v-if="layout === 'sidebar'" id="layout-sidebar">
    <el-aside class="sider-com" :trigger="null" collapsible :style="{ width: collapsed ? 'var(--sidebar-collapsed-width)' : 'var(--sidebar-width)' }">
      <el-scrollbar>
        <div class="logo">
          <template v-if="!collapsed">
            <span class="logo-text">智慧清洁</span>
          </template>
          <template v-else>
            <img class="logo-avatar" src="@/Assets/img/newHeadPortrait.png" />
          </template>
        </div>
        <side-menu :collapsed="collapsed"></side-menu>
      </el-scrollbar>
      <div class="collapse-trigger" @click="collapsed = !collapsed">
        <el-icon :size="14" color="#fff">
          <d-arrow-right v-if="collapsed" />
          <d-arrow-left v-else />
        </el-icon>
      </div>
    </el-aside>
    <el-container :style="{ paddingLeft: collapsed ? 'var(--sidebar-collapsed-width)' : 'var(--sidebar-width)' }" direction="vertical">
      <div class="top-bar" :style="{
        width: collapsed ? 'calc(100% - var(--sidebar-collapsed-width))' : 'calc(100% - var(--sidebar-width))',
      }">
        <tags-com-vue class="top-bar-tags"></tags-com-vue>
        <header-com></header-com>
      </div>
      <el-main class="main-content">
        <router-view v-slot="{ Component }" v-if="isRouterAlive">
          <keep-alive :include="tagList">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 上下布局（顶部导航模式） -->
  <el-container v-else id="layout-topnav" direction="vertical">
    <top-menu></top-menu>
    <el-main class="main-content main-content--topnav">
      <div class="page-title-bar" v-if="pageTitle">
        <h2 class="page-title">{{ pageTitle }}</h2>
      </div>
      <router-view v-slot="{ Component }" v-if="isRouterAlive">
        <keep-alive :include="tagList">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { nextTick, provide, ref, computed, watch } from "vue";
import sideMenu from "@/Components/common/sideMenuCom.vue";
import headerCom from "@/Components/common/headerCom.vue";
import tagsComVue from "@/Components/common/tagsCom.vue";
import topMenu from "@/Components/common/topMenuCom.vue";
import templateHooks from "../Hooks/templateHooks";
import { getLayout } from "@/Utils/themeUtils";

const collapsed = ref(false);
const isRouterAlive = ref(true);
const layout = ref(getLayout());
const { $route, $store } = templateHooks();

const tagList = computed(() => {
  return $store.state.tagList.join(',');
});

const pageTitle = computed(() => {
  const sideList = $store.state.sideList;
  return sideList?.get($route.name) || $route.meta?.title || '';
});

const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};

provide("reload", reload);

// 监听 localStorage 变化（主题设置切换布局时触发）
window.addEventListener('storage', (e) => {
  if (e.key === 'theme-layout') {
    layout.value = e.newValue || 'sidebar';
  }
});

// 也监听自定义事件（同页面内切换）
window.addEventListener('layout-change', () => {
  layout.value = getLayout();
});
</script>

<style lang="scss" scoped>
/* ============= 侧边栏布局 ============= */
.logo {
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  .logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    white-space: nowrap;
  }

  .logo-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.15);
    object-fit: cover;
    transition: transform 0.2s;
    &:hover {
      transform: scale(1.06);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }
}

.sider-com {
  overflow: visible;
  height: 100vh;
  position: fixed;
  left: 0;
  background: var(--sidebar-bg);
  z-index: 1001;
  transition: width 0.25s ease;
}

.collapse-trigger {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 40px;
  background: var(--sidebar-bg);
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.25s;

  .sider-com:hover & {
    opacity: 0.6;
  }

  &:hover {
    opacity: 1;
  }
}

.top-bar {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: width 0.2s;
}

.top-bar-tags {
  flex: 1;
  min-width: 0;
}

.main-content {
  padding: var(--content-padding-top) var(--spacing-sm) 0 var(--spacing-sm);
  background: var(--color-bg-page);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

/* ============= 顶部导航布局 ============= */
.main-content--topnav {
  padding: calc(var(--header-height) + var(--spacing-xs)) var(--spacing-sm) 0 var(--spacing-sm);
}

.page-title-bar {
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-md) 0;
}

.page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: 0.5px;
}
</style>
