<!-- layout/index.vue -->
<template>
  <div
    class="app-wrapper"
    :style="{
      '--current-color': theme,
      '--current-color-light': theme + '1a',
      '--current-color-dark-bg': theme + '33',
    }"
  >
    <!-- 顶部栏（系统名 + 用户信息） -->
    <div class="top-bar">
      <div class="logo-area">
        <img :src="logoImg" class="logo-img" />
        <span class="logo-text" style="cursor:pointer" @click="router.push('/index')">水利安全生产监管信息系统</span>
      </div>
      <div class="top-right-menu">
        <el-dropdown @command="handleCommand" class="avatar-container" trigger="hover">
          <div class="avatar-wrapper">
            <svg-icon icon-class="user" class="user-icon" />
            <span class="user-realName">{{ userStore.realName || userStore.name }}</span>
            <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/user/profile">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 下方区域：左右结构 -->
    <div class="main-layout">
      <!-- 左侧二三级菜单 -->
      <div class="sidebar-wrapper" :class="{ collapsed: isCollapse }">
        <sidebar v-if="!sidebar.hide" />
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-wrapper">
        <app-main />
        <settings ref="settingRef" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import Sidebar from "./components/Sidebar/index.vue";
import { AppMain, Settings } from "./components";
import useAppStore from "@/store/modules/app";
import useSettingsStore from "@/store/modules/settings";
import useUserStore from "@/store/modules/user";
import logoImg from "@/assets/logo/logo.png";

const settingsStore = useSettingsStore();
const appStore = useAppStore();
const userStore = useUserStore();
const router = useRouter();

const theme = computed(() => settingsStore.theme);
const sidebar = computed(() => appStore.sidebar);
const isCollapse = computed(() => appStore.sidebar.isCollapse);

const settingRef = ref(null);

function handleCommand(command) {
  switch (command) {
    case "logout":
      ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        userStore.logOut().then(() => {
          location.href = "/index";
        });
      }).catch(() => {});
      break;
  }
}
</script>

<style scoped>
.app-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-bar {
  height: 60px;
  background: #3c68cb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  flex-shrink: 0;
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.logo-text {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.top-right-menu {
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0 12px;
  height: 60px;
  max-width: 200px;
}

.avatar-wrapper:hover {
  background: rgba(255, 255, 255, 0.15);
}

.user-icon {
  width: 18px;
  height: 18px;
  color: #fff;
  flex-shrink: 0;
}

.user-realName {
  font-size: 14px;
  color: #fff;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.dropdown-icon {
  font-size: 14px;
  color: #fff;
  transition: transform 0.3s;
}

.avatar-wrapper:hover .dropdown-icon {
  transform: rotate(180deg);
}

.main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar-wrapper {
  width: 210px;
  transition: width 0.3s;
  flex-shrink: 0;
}

.sidebar-wrapper.collapsed {
  width: 64px;
}

.content-wrapper {
  flex: 1;
  overflow: auto;
  //background: #f0f2f6;
}
</style>
