<template>
  <div class="layout-container">
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>⚡ 工时管理</h2>
        <div class="user-info">
          <div class="avatar">{{ user?.realname?.charAt(0) }}</div>
          <div class="user-detail">
            <div class="name">{{ user?.realname }}</div>
            <div class="role">{{ roleLabel }}</div>
          </div>
        </div>
      </div>
      <nav class="sidebar-nav">
        <router-link v-for="item in menuItems" :key="item.path" :to="item.path"
          class="nav-item" :class="{ active: $route.path === item.path }">
          <span class="icon">{{ item.icon }}</span>
          <span>{{ item.label }}</span>
        </router-link>
      </nav>
      <div class="sidebar-footer">
        <button class="logout-btn" @click="handleLogout">
          <span class="icon">🚪</span>
          <span>退出登录</span>
        </button>
      </div>
    </aside>
    <main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

const router = useRouter()
const userStore = useUserStore()
const user = computed(() => userStore.user)

const roleLabel = computed(() => {
  const map = { admin: '管理员', sales: '销售', rd: '研发' }
  return map[user.value?.role] || ''
})

const menuItems = computed(() => {
  const role = user.value?.role
  if (role === 'admin') {
    return [
      { path: '/dashboard', label: '统计看板', icon: '📊' },
      { path: '/clients', label: '客户/项目管理', icon: '🏢' },
      { path: '/users', label: '账号管理', icon: '👥' },
      { path: '/workdays', label: '工作日设置', icon: '📅' },
      { path: '/data-manage', label: '数据管理', icon: '🗄️' }
    ]
  }

  if (role === 'rd') {
    return [
      { path: '/timesheet', label: '工时填报', icon: '⏰' },
      { path: '/timesheet-details', label: '填报详情', icon: '📅' },
      { path: '/rd-stats', label: '个人统计', icon: '📊' }
    ]
  }
  return []
})

function handleLogout() {
  userStore.logout()
  router.push('/login')
}
</script>
