﻿<template>
  <div class="flex flex-col w-64 h-full bg-gray-800">
    <!-- Logo区域 -->
    <div class="flex items-center h-16 px-4 bg-gray-900 flex-shrink-0">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-8 w-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 716.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
          </svg>
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-white">翻译管理</div>
          <div class="text-sm text-gray-300">系统后台</div>
        </div>
      </div>
    </div>

    <!-- 导航菜单 - 可滚动区域 -->
    <nav class="flex-1 px-2 py-4 bg-gray-800 space-y-1 overflow-y-auto">
      <NuxtLink 
        to="/dashboard" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/dashboard') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v6a2 2 0 01-2 2H10a2 2 0 01-2-2V5z"></path>
        </svg>
        仪表板
      </NuxtLink>

      <NuxtLink 
        to="/users" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/users') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
        </svg>
        用户管理
      </NuxtLink>

      <NuxtLink 
        to="/orders" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/orders') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        订单管理
      </NuxtLink>

      <NuxtLink 
        to="/finance" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/finance') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
        </svg>
        财务管理
      </NuxtLink>

      <NuxtLink 
        to="/reports" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/reports') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
        </svg>
        数据报表
      </NuxtLink>

      <NuxtLink 
        to="/settings" 
        class="group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-200"
        :class="isActive('/settings') ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'"
      >
        <svg class="mr-3 h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        系统设置
      </NuxtLink>
    </nav>

    <!-- 用户信息和注销 - 固定在底部 -->
    <div class="flex-shrink-0 bg-gray-700 p-4 border-t border-gray-600">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <div class="h-8 w-8 rounded-full bg-gray-500 flex items-center justify-center">
            <ClientOnly>
              <span class="text-sm font-medium text-white">{{ userInitial || '系' }}</span>
              <template #fallback>
                <span class="text-sm font-medium text-white">系</span>
              </template>
            </ClientOnly>
          </div>
        </div>
        <div class="ml-3 flex-1 min-w-0">
          <ClientOnly>
            <p class="text-sm font-medium text-white truncate">{{ userInfo.name || '系统管理员' }}</p>
            <p class="text-xs text-gray-300 truncate">{{ userInfo.role || '管理员' }}</p>
            <template #fallback>
              <p class="text-sm font-medium text-white truncate">系统管理员</p>
              <p class="text-xs text-gray-300 truncate">管理员</p>
            </template>
          </ClientOnly>
        </div>
        <button 
          @click="handleLogout"
          class="ml-3 flex-shrink-0 bg-gray-600 p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-white transition-colors duration-200"
          title="注销"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
// 修复导入 - 从我们的composables导入useClientState
// import { useClientState } from 'vue'

const router = useRouter()
// 临时注释掉useClientState的使用，直接使用localStorage
// const { userInfo, initClientState, logout, setupStorageListener } = useClientState()

// 用户信息
const userInfo = ref({
  name: '系统管理员',
  role: '管理员'
})

// 判断菜单项是否活跃
const isActive = (path) => {
  return router.currentRoute.value.path === path
}

// 加载用户信息
const loadUserInfo = () => {
  if (process.client) {
    const adminUser = localStorage.getItem('adminUser')
    const isAuthenticated = localStorage.getItem('isAuthenticated')
    
    if (isAuthenticated === 'true' && adminUser) {
      try {
        const user = JSON.parse(adminUser)
        userInfo.value = {
          name: user.full_name || user.name || '系统管理员',
          role: user.role === 'admin' ? '管理员' : user.role || '管理员'
        }
      } catch (error) {
        console.error('解析用户信息失败:', error)
      }
    }
  }
}

// 处理退出登录
const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    if (process.client) {
      localStorage.removeItem('user')
      localStorage.removeItem('isAuthenticated')
      localStorage.removeItem('adminUser')
      window.location.replace('/login')
    }
  }
}

// 用户姓名首字母
const userInitial = computed(() => {
  return userInfo.value.name ? userInfo.value.name.charAt(0) : 'A'
})

// 挂载时初始化
onMounted(() => {
  loadUserInfo()
  
  // 设置存储监听器
  if (process.client) {
    window.addEventListener('storage', loadUserInfo)
  }
})

// 监听路由变化
watch(() => router.currentRoute.value.path, () => {
  loadUserInfo()
})
</script>

