<template>
  <div class="admin-layout">
    <!-- 移动端遮罩层 -->
    <div 
      v-if="isMobile && !collapsed" 
      class="mobile-overlay"
      @click="collapsed = true"
    ></div>

    <aside :class="['sider', { 'sider-mobile': isMobile, 'sider-collapsed': isMobile && collapsed }]">
      <div class="brand">
        <img class="logo" src="https://vuejs.org/images/logo.png" alt="logo" />
        <span v-show="!collapsed || !isMobile" class="name">管理后台</span>
      </div>
      <el-menu
        class="menu"
        router
        :default-active="$route.name"
        :collapse="collapsed && !isMobile"
        background-color="#001529"
        text-color="#bfcbd9"
        active-text-color="#fff"
        @select="onMenuSelect"
      >

        <el-menu-item v-if="canAccessUsers" index="Users" :route="{ name: 'Users' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5s-5 2.3-5 5s2.3 5 5 5m0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5Z"/></svg></i>
          <span>用户管理</span>
        </el-menu-item>



        <el-menu-item v-if="canAccessLinks" index="Links" :route="{ name: 'Links' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24a2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0-4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24a2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24a.973.973 0 0 1 0-1.42z"/></svg></i>
          <span>链接管理</span>
        </el-menu-item>

        <el-menu-item v-if="canAccessRefund" index="Refund" :route="{ name: 'Refund' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg></i>
          <span>退单管理</span>
        </el-menu-item>
        <el-menu-item v-if="canAccessAnnouncements" index="Announcements" :route="{ name: 'Announcements' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></i>
          <span>公告管理</span>
        </el-menu-item>
        <el-menu-item v-if="canAccessSettings" index="Settings" :route="{ name: 'Settings' }">
          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 8l-2 4h4l-2 4"/></svg></i>
          <span>系统设置</span>
        </el-menu-item>


      </el-menu>
    </aside>
    <section class="main">
      <header class="header">
        <el-button text @click="toggleSidebar" class="collapse-btn">
          <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M3 6h18v2H3V6m0 5h12v2H3v-2m0 5h18v2H3v-2Z"/></svg>
        </el-button>
        <div class="spacer" />
        <!-- 移动端显示当前页面标题 -->
        <span v-if="isMobile" class="mobile-page-title">{{ currentPageTitle }}</span>
        <div v-if="!isMobile" class="spacer" />
        <!-- 积分显示 -->
        <span v-if="isAgent() && pointsBalance !== null" class="points-display">
          积分: {{ formatPoints(pointsBalance) }}
        </span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span class="username">{{ currentUser?.username || '用户' }}</span>
            <i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onProfile">个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="onLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </header>
      <main class="content">
        <router-view />
      </main>
    </section>
  </div>
  
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { clearTokens } from '@/utils/auth'
import { useRouter, useRoute } from 'vue-router'
import { canAccessRoute, getCurrentUser, isAgent } from '@/utils/permission'
import { getPointsBalance } from '@/api/points'
import { formatPoints } from '@/utils/points'

const collapsed = ref(false)
const isMobile = ref(false)
const pointsBalance = ref(null)
const router = useRouter()
const route = useRoute()

// 检测移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
  // 移动端默认收起侧边栏
  if (isMobile.value) {
    collapsed.value = true
  }
}

// 页面标题映射
const pageTitleMap = {
  'Users': '用户管理',
  'Links': '链接管理', 
  'Refund': '退单管理',
  'Announcements': '公告管理',
  'Settings': '系统设置'
}

// 获取当前用户信息
const currentUser = computed(() => getCurrentUser())

// 获取当前页面标题
const currentPageTitle = computed(() => {
  return pageTitleMap[route.name] || '管理后台'
})

// 权限检查
const canAccessUsers = computed(() => canAccessRoute('Users'))
const canAccessLinks = computed(() => canAccessRoute('Links'))
const canAccessRefund = computed(() => canAccessRoute('Refund'))
const canAccessAnnouncements = computed(() => canAccessRoute('Announcements'))
const canAccessSettings = computed(() => canAccessRoute('Settings'))

// 获取积分余额
const fetchPointsBalance = async () => {
  if (!isAgent()) return // 只有代理商才需要显示积分
  
  try {
    const data = await getPointsBalance()
    pointsBalance.value = data.pointsBalance
  } catch (error) {
    console.error('获取积分余额失败:', error)
    pointsBalance.value = null
  }
}

// 切换侧边栏
const toggleSidebar = () => {
  collapsed.value = !collapsed.value
}

// 菜单选择事件（移动端选择后自动收起）
const onMenuSelect = () => {
  if (isMobile.value) {
    collapsed.value = true
  }
}

function onProfile() {
  // 可跳转到个人中心占位页
}

function onLogout() {
  clearTokens()
  router.replace({ name: 'Login' })
}

// 监听窗口大小变化
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
  fetchPointsBalance() // 页面加载时获取积分余额
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  position: relative;
}

/* 移动端遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: block;
}

.sider {
  width: 220px;
  background: #001529;
  color: #bfcbd9;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  z-index: 1000;
}

/* 移动端侧边栏样式 */
.sider-mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(0);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sider-mobile.sider-collapsed {
  transform: translateX(-100%);
}

.brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  color: #fff;
  border-bottom: 1px solid #334050;
}

.logo { 
  width: 24px; 
  height: 24px;
  flex-shrink: 0;
}

.name {
  font-size: 16px;
  font-weight: 600;
}

.menu { 
  border-right: none; 
  flex: 1;
  overflow-y: auto;
}

.main { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  min-width: 0;
  transition: all 0.3s ease;
}

.header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  z-index: 100;
}

.collapse-btn { 
  margin-right: 8px;
  min-width: 32px;
  height: 32px;
  border-radius: 4px;
}

.collapse-btn:hover {
  background-color: #f5f5f5;
}

.spacer { 
  flex: 1; 
}

.mobile-page-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.points-display {
  font-size: 16px;
  color: #409eff;
  font-weight: 500;
  margin-right: 16px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 14px;
}

.el-dropdown-link:hover {
  color: #409eff;
}

.username {
  font-weight: 500;
}

.content { 
  padding: 16px; 
  overflow: auto; 
  background: #f5f7fa; 
  height: calc(100vh - 56px);
  flex: 1;
}

/* 移动端响应式布局 */
@media (max-width: 768px) {
  .main {
    width: 100%;
  }
  
  .header {
    padding: 0 12px;
  }
  
  .content {
    padding: 12px;
  }
  
  .collapse-btn {
    margin-right: 12px;
  }
  
  .mobile-page-title {
    font-size: 15px;
  }
  
  .points-display {
    font-size: 14px;
    margin-right: 12px;
  }
  
  .el-dropdown-link {
    font-size: 16px;
    min-height: var(--mobile-touch-target);
    padding: 8px;
  }
  
  .username {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 8px;
  }
  
  .content {
    padding: 8px;
  }
  
  .brand {
    padding: 0 12px;
  }
  
  .name {
    font-size: 15px;
  }
  
  .mobile-page-title {
    font-size: 14px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .points-display {
    font-size: 13px;
    margin-right: 8px;
  }
  
  .el-dropdown-link {
    font-size: 14px;
    padding: 6px;
  }
  
  .el-dropdown-link span {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .username {
    font-size: 14px;
  }
}

/* 桌面端样式 */
@media (min-width: 769px) {
  .sider-mobile {
    position: relative;
    transform: none !important;
    box-shadow: none;
  }
  
  .mobile-overlay {
    display: none;
  }
}
</style>

