<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '220px'" class="layout-aside">
      <div class="logo-area">
        <img src="/vite.svg" alt="logo" class="logo-img" />
        <transition name="fade">
          <span v-show="!isCollapse" class="logo-text">省胜优铺商城</span>
        </transition>
      </div>
      <el-menu :default-active="activeMenu" :collapse="isCollapse" :router="true" :unique-opened="true"
        background-color="#1d1e1f" text-color="#bfcbd9" active-text-color="#409eff">

        <!-- ① 仪表盘 -->
        <el-menu-item index="/dashboard">
          <el-icon><Odometer /></el-icon>
          <template #title>仪表盘</template>
        </el-menu-item>

        <!-- ② 商品 -->
        <el-sub-menu index="/products-group">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>商品</span>
          </template>
          <el-menu-item index="/products"><el-icon><Goods /></el-icon>商品管理</el-menu-item>
          <el-menu-item index="/categories"><el-icon><Collection /></el-icon>类目管理</el-menu-item>
          <el-menu-item index="/collect"><el-icon><Download /></el-icon>商品采集</el-menu-item>
        </el-sub-menu>

        <!-- ③ 订单 -->
        <el-sub-menu index="/orders-group">
          <template #title>
            <el-icon><List /></el-icon>
            <span>订单</span>
          </template>
          <el-menu-item index="/orders"><el-icon><List /></el-icon>订单管理</el-menu-item>
          <el-menu-item index="/migration"><el-icon><Switch /></el-icon>一键搬家</el-menu-item>
        </el-sub-menu>

        <!-- ④ 会员 -->
        <el-sub-menu index="/users-group">
          <template #title>
            <el-icon><User /></el-icon>
            <span>会员</span>
          </template>
          <el-menu-item index="/users"><el-icon><User /></el-icon>会员管理</el-menu-item>
          <el-menu-item index="/distribution"><el-icon><Connection /></el-icon>分销管理</el-menu-item>
          <el-menu-item index="/exchange"><el-icon><Present /></el-icon>积分商城</el-menu-item>
        </el-sub-menu>

        <!-- ⑤ 营销 -->
        <el-sub-menu index="/marketing-group">
          <template #title>
            <el-icon><Gift /></el-icon>
            <span>营销</span>
          </template>
          <el-menu-item index="/marketing"><el-icon><Gift /></el-icon>营销工具</el-menu-item>
        </el-sub-menu>

        <!-- ⑥ 装修 -->
        <el-sub-menu index="/theme-group">
          <template #title>
            <el-icon><MagicStick /></el-icon>
            <span>装修</span>
          </template>
          <el-menu-item index="/theme-editor"><el-icon><Tools /></el-icon>页面装修</el-menu-item>
          <el-menu-item index="/my-themes"><el-icon><Collection /></el-icon>我的主题</el-menu-item>
          <el-menu-item index="/theme-pages"><el-icon><Document /></el-icon>主题页面</el-menu-item>
          <el-menu-item index="/theme-visual"><el-icon><Brush /></el-icon>主题配色</el-menu-item>
          <el-menu-item index="/assets-mgr"><el-icon><Picture /></el-icon>素材管理</el-menu-item>
          <el-menu-item index="/banner"><el-icon><Monitor /></el-icon>轮播图</el-menu-item>
          <el-menu-item index="/link-mgr"><el-icon><Link /></el-icon>链接管理</el-menu-item>
        </el-sub-menu>

        <!-- ⑦ 内容 -->
        <el-sub-menu index="/content-group">
          <template #title>
            <el-icon><Notebook /></el-icon>
            <span>内容</span>
          </template>
          <el-menu-item index="/cms"><el-icon><Notebook /></el-icon>文章管理</el-menu-item>
        </el-sub-menu>

        <!-- ⑧ AI服务 -->
        <el-sub-menu index="/ai-group">
          <template #title>
            <el-icon><ChatLineSquare /></el-icon>
            <span>AI服务</span>
          </template>
          <el-menu-item index="/ai-service"><el-icon><ChatLineSquare /></el-icon>AI客服</el-menu-item>
          <el-menu-item index="/extra"><el-icon><Grid /></el-icon>拓展管理</el-menu-item>
        </el-sub-menu>

        <!-- ⑨ 终端 -->
        <el-sub-menu index="/terminal-group">
          <template #title>
            <el-icon><Monitor /></el-icon>
            <span>终端</span>
          </template>
          <el-menu-item index="/app-mgr"><el-icon><Monitor /></el-icon>APP管理</el-menu-item>
          <el-menu-item index="/terminal-mgr"><el-icon><Switch /></el-icon>终端管控</el-menu-item>
          <el-menu-item index="/terminal"><el-icon><Cellphone /></el-icon>多终端配置</el-menu-item>
        </el-sub-menu>

        <!-- ⑩ 数据 -->
        <el-menu-item index="/stats">
          <el-icon><DataAnalysis /></el-icon>
          <template #title>数据</template>
        </el-menu-item>
        <el-menu-item index="/funnel">
          <el-icon><Odometer /></el-icon>
          <template #title>转化漏斗</template>
        </el-menu-item>

        <!-- ⑪ 系统 -->
        <el-sub-menu index="/system-group">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统</span>
          </template>
          <el-menu-item index="/settings"><el-icon><Setting /></el-icon>系统设置</el-menu-item>
          <el-menu-item index="/license"><el-icon><Key /></el-icon>授权管理</el-menu-item>
          <el-menu-item index="/notification"><el-icon><Bell /></el-icon>通知管理</el-menu-item>
          <el-menu-item index="/tools"><el-icon><Tools /></el-icon>系统工具</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="layout-header">
        <div style="display:flex;align-items:center;gap:16px">
          <el-button :icon="isCollapse?Expand:Fold" text @click="toggleSidebar" />
          <el-breadcrumb>
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-dropdown trigger="click">
          <div class="user-info"><el-avatar size="small" style="background:#409eff">A</el-avatar><span style="margin-left:8px">管理员</span></div>
          <template #dropdown><el-dropdown-menu><el-dropdown-item @click="logout">退出登录</el-dropdown-item></el-dropdown-menu></template>
        </el-dropdown>
      </el-header>
      <el-main class="layout-content"><router-view /></el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const isCollapse = localStorage.getItem('sidebar_collapsed') === 'true'
const activeMenu = computed(() => route.path)
const currentTitle = computed(() => route.meta?.title || '')

function toggleSidebar() { const n = !isCollapse; localStorage.setItem('sidebar_collapsed', n) }
function logout() { localStorage.removeItem('admin_token'); router.push('/login') }
</script>
<style scoped>
.layout-container{height:100vh}
.layout-aside{overflow-y:auto;transition:width .3s}
.logo-area{height:60px;display:flex;align-items:center;padding:0 16px;gap:8px}
.logo-img{width:32px;height:32px}
.logo-text{font-size:18px;font-weight:700;color:#fff}
.layout-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.layout-content{background:#f5f7fa;min-height:calc(100vh - 60px)}
.user-info{display:flex;align-items:center;cursor:pointer;padding:4px 12px;border-radius:6px}
.user-info:hover{background:#f5f7fa}
</style>
