<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import {
  Setting,
  Fold,
  Expand,
  ArrowDown,
  DataBoard,
  User,
  Headset,
  Files,
  Avatar,
  Picture,
  ChatDotRound,
  Collection
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const isCollapse = ref(false)

// 检查用户是否是管理员
const isAdmin = computed(() => {
  return userStore.user && userStore.user.role === 1
})

// 在组件挂载后检查权限
onMounted(async () => {
  // 检查本地存储的权限信息
  const token = localStorage.getItem('token')
  const isAdmin = localStorage.getItem('isAdmin')

  console.log('后台管理权限检查:', {
    token,
    isAdmin,
    userStore: userStore.user
  })

  // 如果没有token或不是管理员，重定向到首页
  if (!token) {
    ElMessage.error('请先登录')
    router.push('/login')
    return
  }

  if (isAdmin !== 'true') {
    ElMessage.error('您没有管理员权限')
    router.push('/')
    return
  }

  // 移除测试权限接口的调用

  // 如果没有用户信息，尝试获取
  if (!userStore.user) {
    try {
      await userStore.fetchCurrentUser()
    } catch (error) {
      console.error('获取用户信息失败:', error)
      ElMessage.error('获取用户信息失败，请重新登录')
      router.push('/login')
    }
  }
})

// 退出登录
const logout = () => {
  userStore.logout()
  router.push('/login')
}

// 返回前台
const goToFrontend = () => {
  router.push('/')
}

// 菜单项
const menuItems = [
  {
    index: '/admin',
    icon: 'DataBoard',
    title: '控制台'
  },
  {
    index: '/admin/user',
    icon: 'User',
    title: '用户管理'
  },
  {
    index: '/admin/music',
    icon: 'Headset',
    title: '音乐管理'
  },
  {
    index: '/admin/playlist',
    icon: 'Files',
    title: '歌单管理'
  },
  {
    index: '/admin/singer',
    icon: 'Avatar',
    title: '歌手管理'
  },
  {
    index: '/admin/banner',
    icon: 'Picture',
    title: '轮播图管理'
  },
  {
    index: '/admin/comment',
    icon: 'ChatDotRound',
    title: '评论管理'
  },
  {
    index: '/admin/type',
    icon: 'Collection',
    title: '类型管理'
  }
]
</script>

<template>
  <div class="admin-layout">
    <el-container class="admin-container">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="admin-aside">
        <div class="logo-container">
          <h2 v-if="!isCollapse">后台管理</h2>
          <el-icon v-else><Setting /></el-icon>
        </div>

        <el-menu
          :default-active="$route.path"
          class="admin-menu"
          :collapse="isCollapse"
          router
          background-color="transparent"
          text-color="#d81b60"
          active-text-color="#ff4081"
        >
          <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="admin-header">
          <div class="header-left">
            <el-button type="text" @click="isCollapse = !isCollapse">
              <el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
            </el-button>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="$route.meta.title">{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-right">
            <el-button type="primary" size="small" @click="goToFrontend">
              返回前台
            </el-button>

            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ userStore.user?.nickname || userStore.user?.username }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main class="admin-main">
          <div class="scroll-wrapper">
            <router-view />
          </div>
        </el-main>

        <!-- 页脚 -->
        <el-footer class="admin-footer">
          <div>© 2025 音乐应用后台管理系统</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.admin-layout {
  height: 100vh;
  width: 100%;
}

.admin-container {
  height: 100%;
}

.admin-aside {
  background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
  transition: width 0.3s;
  overflow: hidden;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.logo-container {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1976d2;
  background-color: #e1f5fe;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo-container h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.admin-menu {
  border-right: none;
  --el-menu-bg-color: transparent;
  --el-menu-text-color: #0d47a1;
  --el-menu-active-color: #2196f3;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.3);
}

.admin-menu .el-menu-item {
  margin: 5px 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.admin-menu .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.5) !important;
  color: #ff4081 !important;
  font-weight: bold;
}

.admin-menu .el-menu-item:hover {
  transform: translateX(5px);
}

.admin-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left .el-button {
  margin-right: 15px;
}

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

.header-right .el-button {
  margin-right: 15px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.admin-main {
  background: linear-gradient(135deg, #f8bbd0 0%, #e1bee7 50%, #bbdefb 100%);
  padding: 20px;
}

.scroll-wrapper {
  height: 100%;
  overflow-y: auto;
}

/* 修改卡片样式 */
.el-card {
  border-radius: 12px !important;
  border: 2px solid #b3e5fc !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.el-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* 修改按钮样式 */
.el-button {
  border-radius: 8px !important;
  font-weight: bold !important;
}

.el-button--primary {
  background-color: #4dd0e1 !important;
  border-color: #4dd0e1 !important;
}

.el-button--primary:hover {
  background-color: #26c6da !important;
  border-color: #26c6da !important;
}

.admin-footer {
  text-align: center;
  color: #666;
  font-size: 14px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
