<template>
  <el-container style="height: 100%;">
    <!-- Header -->
    <el-header  class="header">
      <el-row type="flex" justify="space-between" style="width:100%;" align="middle">
        <!-- Logo -->
        <el-col :span="6" class="logo-container">
          <img src="@/assets/logo.png" alt="Logo" style="height: 120px;">
        </el-col>
        <!-- Logout Button -->
        <el-col :span="6" style="text-align: right;">
          <el-button type="danger" @click="logout">退出登录</el-button>
        </el-col>
      </el-row>
    </el-header>

    <!-- Main Content -->
    <el-container style="height: 80%;">
      <!-- Aside (Left Sidebar) -->
      <el-aside class="custom-aside">
          <el-menu :default-active="activeMenu" :router="true" class="custom-menu">
            <el-menu-item index="/">
              <i class="el-icon-house"></i>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/profile1">
              <i class="el-icon-user"></i>
              <span>个人信息</span>
            </el-menu-item>
			<el-menu-item index="/edit">
			  <i class="el-icon-edit"></i>
			  <span>写文章</span>
			</el-menu-item>
            <el-menu-item index="/display">
              <i class="el-icon-display"></i>
              <span>文章列表</span>
            </el-menu-item>
			<el-menu-item index="/accounts">
			  <i class="el-icon-accounts"></i>
			  <span>账号安全</span>
			</el-menu-item>
          </el-menu>
        </el-aside>

      <!-- Main Section (Right Content) -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>

    <el-footer>
      <span
        style="height: 20px; position: fixed; bottom: 0; left: 0; right: 0;  color: #333;  text-align: center;">&copy;
        2024 My Blog. All rights reserved.</span>
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';

const activeMenu = ref('/profile1'); // 默认激活“个人信息”页面
const router = useRouter();
const userStore = useUserStore();

// 在组件挂载时，检查用户是否已登录，如果已登录则导航到 /profile1
onMounted(() => {
  if (userStore.isAuthenticated) {
    router.push('/profile1');
  }
});

// 退出登录功能
const logout = () => {
  // userStore.logoutUser();
  router.push("/");
};
</script>

<style scoped>
  .header {
    height: 100px;
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 确保元素分布 */
    overflow: hidden;
  }


  .logo {
    height: 120px;
    object-fit: contain;
    overflow: hidden;
    /* 防止 logo 超出容器 */
  }
  .el-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

.custom-aside {
  width: 220px;
  height:100vh;
  background-color: white; /* 更亮的背景色 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.custom-menu {
  border: none;
}

.custom-menu .el-menu-item {
  margin: 10px 0;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s; /* 平滑的动画效果 */
}

.custom-menu .el-menu-item:hover {
  background-color: #e6f7ff; /* 悬停背景 */
  color: #1890ff; /* 悬停字体颜色 */
}

.custom-menu .el-menu-item.is-active {
  background-color: #bae7ff; /* 激活状态背景 */
  color: #096dd9; /* 激活状态字体颜色 */
}

</style>
