<template>
  <a-layout class="layout" :style="menuStyle">
    <!-- 移动设备上的遮罩层 -->
    <div v-if="isMobile && siderVisible" class="mobile-mask" @click="toggleSider"></div>
    <!-- 侧边栏 -->
    <a-layout-sider class="sider hide-scrollbar" @collapse="handleCollapse" :collapsed="collapsed"
      :class="{ 'mobile-sider': isMobile, 'mobile-sider-visible': siderVisible }">
      <div class="logo" v-if="!collapsed">
        <svg t="1779016191270" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21892"
          width="256" height="256" class="custom-svg">
          <path
            d="M886.97857168 763.55H587.02142833v112.69285753h74.95714334a37.54285751 37.54285751 0 0 1 0 75.08571415H362.02142833a37.54285751 37.54285751 0 0 1-1e-8-75.08571415h74.95714336v-112.69285753H137.02142832A75.02142833 75.02142833 0 0 1 62 688.46428583V162.8C62 121.33571417 95.55714247 87.71428583 137.02142832 87.71428583h749.95714336C928.44285753 87.71428583 962 121.33571417 962 162.8v525.66428585c0 41.46428585-33.55714249 75.08571415-75.02142833 75.08571415zM137.02142832 650.92142832h749.95714336V575.83571417H137.02142832v75.08571415z"
            p-id="21893" fill="#ffffff"></path>
        </svg>
        <div class="logo-text-container">
          <span class="logo-text">
            {{ config.APP_TITLE }}
          </span>
          <div class="logo-subtitle">
            {{ config.APP_SUB_TITLE }}
          </div>
        </div>
      </div>
      <div class="logo" v-else>
        <svg t="1779016191270" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21892"
          width="256" height="256" class="custom-svg">
          <path
            d="M886.97857168 763.55H587.02142833v112.69285753h74.95714334a37.54285751 37.54285751 0 0 1 0 75.08571415H362.02142833a37.54285751 37.54285751 0 0 1-1e-8-75.08571415h74.95714336v-112.69285753H137.02142832A75.02142833 75.02142833 0 0 1 62 688.46428583V162.8C62 121.33571417 95.55714247 87.71428583 137.02142832 87.71428583h749.95714336C928.44285753 87.71428583 962 121.33571417 962 162.8v525.66428585c0 41.46428585-33.55714249 75.08571415-75.02142833 75.08571415zM137.02142832 650.92142832h749.95714336V575.83571417H137.02142832v75.08571415z"
            p-id="21893" fill="#ffffff"></path>
        </svg>
      </div>
      <IViewMenu v-model:selectedKeys="selectedKeys" :collapsed="collapsed" :menuConfig="menuConfig"
        :bgColor="themeInfo.bgColor" :textColor="themeInfo.textColor" :selectedTextColor="themeInfo.selectedTextColor"
        :selectedBgColor="themeInfo.selectedBgColor" :hoverTextColor="themeInfo.hoverTextColor"
        :hoverBgColor="themeInfo.hoverBgColor" @item-click="handleMenuItemClick" />
    </a-layout-sider>

    <a-layout class="layout-content" :class="{ collapsed: collapsed && !isMobile, mobile: isMobile }">
      <a-layout-header class="header" :class="{ 'mobile-header': isMobile }">
        <div class="header-left">
          <div class="header-left-icon">
            <menu-unfold-outlined v-if="isMobile ? !siderVisible : collapsed" class="trigger" @click="toggleSider" />
            <menu-fold-outlined v-else class="trigger" @click="toggleSider" />
          </div>
        </div>

        <div class="header-right">
          <a-dropdown :trigger="['click']">
            <a class="user-dropdown">
              <span class="username" :title="unitName">{{ unitName }}</span>
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content class="content hide-scrollbar">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
    <IViewUrlEmbedHost />
  </a-layout>
</template>

<script setup>
import { ref, watch, computed, onMounted, onBeforeMount, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "../store/user";
import { showSuccessTips } from "@/iview/utils/messageTips";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  LogoutOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { menuConfig, getMenuKeyByPath } from "../config/menu";
import config from "@/config/index";
import IViewMenu from "@/iview/IViewMenu.vue";
import IViewUrlEmbedHost from "@/iview/IViewUrlEmbedHost.vue";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const themeInfo = ref({
  siderColor: "#1677ff",
  logoColor: "#FFFFFF",
  textColor: "#FFFFFF",
  selectedTextColor: "#ffffff",
  selectedBgColor: "#0b68ff",
  hoverTextColor: "#ffffff",
  hoverBgColor: "#0b68ff",
});

// 侧边栏折叠状态（桌面端使用）
const collapsed = ref(true); // 默认折叠
// 是否是移动设备
const isMobile = ref(false);
// 侧边栏是否显示（移动端使用）
const siderVisible = ref(false);

// 监听窗口大小变化
const checkIsMobile = () => {
  const newIsMobile = window.innerWidth <= 768;
  // 如果状态变了才更新，避免不必要的渲染
  if (newIsMobile !== isMobile.value) {
    isMobile.value = newIsMobile;
    // 如果变成移动设备，确保侧边栏隐藏
    if (isMobile.value) {
      siderVisible.value = false;
    }
  }
};

// 在组件挂载前初始化移动设备检测
onBeforeMount(() => {
  checkIsMobile();
  window.addEventListener("resize", checkIsMobile);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener("resize", checkIsMobile);
});

// 当前选中的菜单项
const selectedKeys = ref([]);

// 侧边栏折叠状态
const handleCollapse = (collapsed) => {
  collapsed.value = collapsed;
  userStore.saveCollapseSidebar(collapsed);
};

// 计算菜单样式
const menuStyle = computed(() => {
  return {
    "--theme-sider-color": themeInfo.value.siderColor,
    "--theme-logo-color": themeInfo.value.logoColor,
    border: "none",
  };
});

// 根据当前路由路径设置选中菜单项和展开状态
const setSelectedMenu = () => {
  const path = route.path;
  const menuKey = getMenuKeyByPath(path);

  // IViewMenu 只支持一级菜单，直接使用 menuKey
  selectedKeys.value = [menuKey];
};

// 初始化菜单选中状态
onMounted(() => {
  setSelectedMenu();
  // 重新获取用户信息
  if (userStore.isLoggedIn) {
    userStore.getUserProfile();
  }
  collapsed.value = userStore.isCollapseSidebar;
});

// 监听路由变化，更新选中的菜单项
watch(
  () => route.path,
  (newPath) => {
    setSelectedMenu();
    // 在移动设备上，路由变化时隐藏侧边栏
    if (isMobile.value) {
      siderVisible.value = false;
    }
  }
);

// 用户信息
const unitName = computed(() => {
  const info = userStore.userInfo;
  if (!info) return "";
  return [info?.name, info?.username].filter(Boolean).join(" ");
});

// 切换侧边栏状态
const toggleSider = () => {
  if (isMobile.value) {
    // 在移动设备上，切换侧边栏显示/隐藏
    siderVisible.value = !siderVisible.value;
  } else {
    // 在桌面设备上，切换侧边栏折叠/展开
    collapsed.value = !collapsed.value;
    userStore.saveCollapseSidebar(collapsed.value);
  }
};

// 退出登录
const handleLogout = () => {
  userStore.logout();
  router.push("/login");
  showSuccessTips("已退出登录");
};

// 菜单点击处理，在移动端时点击菜单项后自动隐藏侧边栏
const handleMenuClick = (path) => {
  router.push(path);
  if (isMobile.value) {
    siderVisible.value = false;
  }
};

// 处理菜单项点击（IViewMenu 组件使用）
const handleMenuItemClick = (item) => {
  if (item.path) {
    handleMenuClick(item.path);
  }
};
</script>

<style lang="less" scoped>
.layout {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.sider {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--theme-sider-color, #001529);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width 0.3s, transform 0.3s;
  z-index: 10;
}

.mobile-sider {
  transform: translateX(-100%);
  /* 默认隐藏 */
}

.mobile-sider-visible {
  transform: translateX(0);
  /* 显示 */
}

.mobile-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 9;
}

.logo {
  height: 64px;
  padding: 16px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s;
  font-size: 12px;
  color: var(--theme-logo-color, #ffffff);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.logo-text {
  font-size: 16px;
  font-weight: bold;
  margin-left: 5px;
}

.logo-subtitle {
  font-size: 12px;
  color: #ffffff;
  margin-left: 5px;
}

.custom-svg {
  width: 30px;
  height: 30px;
}

.layout-content {
  position: relative;
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.layout-content.mobile {
  margin-left: 0;
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 200px;
  z-index: 8;
  height: 64px;
  background: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  width: calc(100% - 200px);
}

.mobile-header {
  left: 0;
  width: 100%;
}

.header-left {
  padding: 0 16px;
  flex-shrink: 0;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-right {
  padding: 0 16px;
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header-left-icon {
  padding: 0 8px;
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.user-dropdown {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  padding: 0 8px;
  min-width: 0;
  max-width: 100%;
}

.user-avatar {
  margin-right: 8px;
}

.username {
  margin-right: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-role {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.content {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  box-sizing: border-box;
  margin-top: 64px;
  overflow-y: auto;
}

.content-view {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 当侧边栏折叠时调整布局 */
.layout-content.collapsed {
  margin-left: 80px;
  width: calc(100% - 80px);
}

.layout-content.collapsed .header {
  left: 80px;
  width: calc(100% - 80px);
}

/* 移动端适配样式 */
@media (max-width: 768px) {
  .layout-content {
    margin-left: 0;
    width: 100%;
  }

  .header {
    left: 0;
    width: 100%;
  }

  .content {
    padding: 16px;
  }
}
</style>