<template>
  <div class="mobile-nav">
    <!-- 移动端头部 -->
    <div class="mobile-header">
      <button 
        class="mobile-menu-button" 
        @click="toggleSidebar"
        :aria-label="sidebarVisible ? '关闭菜单' : '打开菜单'"
      >
        <MenuOutlined v-if="!sidebarVisible" />
        <CloseOutlined v-else />
      </button>
      
      <div class="mobile-title">
        {{ currentPageTitle }}
      </div>
      
      <div class="mobile-user-info">
        <a-dropdown>
          <template #overlay>
            <a-menu>
              <a-menu-item key="profile">
                <UserOutlined />
                个人信息
              </a-menu-item>
              <a-menu-item key="settings">
                <SettingOutlined />
                系统设置
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="logout" @click="handleLogout">
                <LogoutOutlined />
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
          <a-button type="text" size="small">
            <UserOutlined />
          </a-button>
        </a-dropdown>
      </div>
    </div>
    
    <!-- 移动端侧边栏遮罩 -->
    <div 
      v-if="sidebarVisible" 
      class="mobile-sidebar-overlay"
      @click="closeSidebar"
    ></div>
    
    <!-- 移动端侧边栏 -->
    <div 
      class="mobile-sidebar"
      :class="{ 'sidebar-open': sidebarVisible }"
    >
      <div class="sidebar-header">
        <div class="logo">
          <span class="logo-text">智慧养殖监管平台</span>
        </div>
      </div>
      
      <div class="sidebar-content">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          theme="light"
          @click="handleMenuClick"
        >
          <!-- 主要功能模块 -->
          <a-menu-item-group title="核心功能">
            <a-menu-item key="/" :icon="h(HomeOutlined)">
              <router-link to="/">首页</router-link>
            </a-menu-item>
            <a-menu-item key="/dashboard" :icon="h(DashboardOutlined)">
              <router-link to="/dashboard">系统概览</router-link>
            </a-menu-item>
            <a-menu-item key="/monitor" :icon="h(LineChartOutlined)">
              <router-link to="/monitor">实时监控</router-link>
            </a-menu-item>
            <a-menu-item key="/analytics" :icon="h(BarChartOutlined)">
              <router-link to="/analytics">数据分析</router-link>
            </a-menu-item>
          </a-menu-item-group>
          
          <!-- 管理功能模块 -->
          <a-menu-item-group title="管理功能">
            <a-menu-item key="/farms" :icon="h(HomeOutlined)">
              <router-link to="/farms">牛只管理</router-link>
            </a-menu-item>
            <a-sub-menu key="cattle-management" :icon="h(BugOutlined)">
              <template #title>牛只管理</template>
              <a-menu-item key="/cattle-management/archives">
                <router-link to="/cattle-management/archives">牛只档案</router-link>
              </a-menu-item>
              <a-menu-item key="/cattle-management/pens">
                <router-link to="/cattle-management/pens">栏舍设置</router-link>
              </a-menu-item>
              <a-menu-item key="/cattle-management/batches">
                <router-link to="/cattle-management/batches">批次设置</router-link>
              </a-menu-item>
              <a-menu-item key="/cattle-management/transfer-records">
                <router-link to="/cattle-management/transfer-records">转栏记录</router-link>
              </a-menu-item>
              <a-menu-item key="/cattle-management/exit-records">
                <router-link to="/cattle-management/exit-records">离栏记录</router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-menu-item key="/devices" :icon="h(DesktopOutlined)">
              <router-link to="/devices">设备管理</router-link>
            </a-menu-item>
            <a-menu-item key="/alerts" :icon="h(AlertOutlined)">
              <router-link to="/alerts">预警管理</router-link>
            </a-menu-item>
          </a-menu-item-group>
          
          <!-- 业务功能模块 -->
          <!-- <a-menu-item-group title="业务功能">
            <a-menu-item key="/products" :icon="h(ShoppingOutlined)">
              <router-link to="/products">产品管理</router-link>
            </a-menu-item>
            <a-menu-item key="/orders" :icon="h(ShoppingCartOutlined)">
              <router-link to="/orders">订单管理</router-link>
            </a-menu-item> -->
            <!-- <a-menu-item key="/reports" :icon="h(FileTextOutlined)">
              <router-link to="/reports">报表管理</router-link>
            </a-menu-item> 
          </a-menu-item-group> -->
          
          <!-- 系统管理模块 -->
          <!-- <a-menu-item-group title="系统管理" v-if="userStore.userData?.roles?.includes('admin')">
            <a-menu-item key="/users" :icon="h(UserOutlined)">
              <router-link to="/users">用户管理</router-link>
            </a-menu-item>
          </a-menu-item-group> -->
        </a-menu>
      </div>
      
      <!-- 侧边栏底部 -->
      <div class="sidebar-footer">
        <div class="user-info">
          <a-avatar size="small" :icon="h(UserOutlined)" />
          <span class="username">{{ userStore.userData?.username }}</span>
        </div>
        <div class="version-info">
          v2.1.0
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { 
  MenuOutlined, 
  CloseOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  HomeOutlined,
  DashboardOutlined,
  LineChartOutlined,
  BarChartOutlined,
  BugOutlined,
  DesktopOutlined,
  AlertOutlined,
  ShoppingOutlined,
  ShoppingCartOutlined,
  FileTextOutlined
} from '@ant-design/icons-vue'
import { useUserStore } from '../stores/user'

// Store 和路由
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

// 响应式数据
const sidebarVisible = ref(false)
const selectedKeys = ref([])
const openKeys = ref([])

// 计算当前页面标题
const currentPageTitle = computed(() => {
  const titleMap = {
    '/': '首页',
    '/dashboard': '系统概览',
    '/monitor': '实时监控',
    '/analytics': '数据分析',
    '/farms': '养殖场管理',
    '/cattle-management/archives': '牛只档案',
    '/devices': '设备管理',
    '/alerts': '预警管理',
    '/products': '产品管理',
    '/orders': '订单管理',
    '/reports': '报表管理',
    '/users': '用户管理'
  }
  return titleMap[route.path] || '智慧养殖监管平台'
})

// 监听路由变化，更新选中的菜单项
watch(() => route.path, (newPath) => {
  selectedKeys.value = [newPath]
  closeSidebar() // 移动端路由跳转后自动关闭侧边栏
}, { immediate: true })

// 切换侧边栏显示状态
const toggleSidebar = () => {
  sidebarVisible.value = !sidebarVisible.value
}

// 关闭侧边栏
const closeSidebar = () => {
  sidebarVisible.value = false
}

// 处理菜单点击
const handleMenuClick = ({ key }) => {
  if (key !== route.path) {
    router.push(key)
  }
  closeSidebar()
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await userStore.logout()
    message.success('退出登录成功')
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
    message.error('退出登录失败')
  }
}

// 暴露给父组件的方法
defineExpose({
  toggleSidebar,
  closeSidebar
})
</script>

<style scoped>
.mobile-nav {
  position: relative;
}

/* 移动端头部样式 */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 56px;
}

.mobile-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.mobile-menu-button:hover {
  background: #f5f5f5;
}

.mobile-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  flex: 1;
  text-align: center;
  margin: 0 12px;
}

.mobile-user-info {
  display: flex;
  align-items: center;
}

/* 侧边栏遮罩 */
.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1001;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 移动端侧边栏 */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  z-index: 1002;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.mobile-sidebar.sidebar-open {
  transform: translateX(0);
}

/* 侧边栏头部 */
.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  width: 32px;
  height: 32px;
}

.logo-text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* 侧边栏内容 */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

:deep(.ant-menu) {
  border: none;
  background: transparent;
}

:deep(.ant-menu-item-group-title) {
  padding: 8px 16px;
  font-size: 12px;
  color: #8c8c8c;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:deep(.ant-menu-item) {
  height: 48px;
  line-height: 48px;
  margin: 0;
  border-radius: 0;
  padding: 0 16px !important;
  overflow: hidden;
}

:deep(.ant-menu-item:hover) {
  background: #f0f8ff;
}

:deep(.ant-menu-item-selected) {
  background: #e6f7ff !important;
  border-right: 3px solid #1890ff;
}

:deep(.ant-menu-item a) {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

:deep(.ant-menu-item-icon) {
  font-size: 16px;
  margin-right: 12px;
}

/* 侧边栏底部 */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.username {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
}

.version-info {
  font-size: 12px;
  color: #8c8c8c;
  text-align: center;
}

/* 只在移动端显示 */
@media (min-width: 769px) {
  .mobile-nav {
    display: none;
  }
}

/* 响应式断点调整 */
@media (max-width: 480px) {
  .mobile-sidebar {
    width: 100vw;
  }
  
  .mobile-title {
    font-size: 14px;
  }
}

/* 横屏模式调整 */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-header {
    padding: 8px 16px;
    height: 48px;
  }
  
  .mobile-title {
    font-size: 14px;
  }
  
  .sidebar-content {
    padding: 8px 0;
  }
  
  :deep(.ant-menu-item) {
    height: 40px;
    line-height: 40px;
  }
}
</style>
