<template>
  <a-layout style="min-height: 100vh" class="merchant-layout">
    <a-layout-sider :width="240" theme="dark" collapsible v-model:collapsed="collapsed" :collapsed-width="64" class="merchant-sider">
      <div class="sider-header">
        <a-avatar :size="36" style="background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%)">
          <icon-home />
        </a-avatar>
        <span class="sider-title" v-if="!collapsed">商家后台</span>
      </div>
      <a-menu :selected-keys="[$route.name]" @menu-item-click="onMenuClick" theme="dark">
        <a-menu-item key="merchant-overview">
          <template #icon><icon-dashboard /></template>
          <span v-if="!collapsed">数据概览</span>
        </a-menu-item>
        <a-menu-item key="merchant-products">
          <template #icon><icon-apps /></template>
          <span v-if="!collapsed">商品管理</span>
        </a-menu-item>
        <a-menu-item key="merchant-orders">
          <template #icon><icon-file /></template>
          <span v-if="!collapsed">订单管理</span>
        </a-menu-item>
        <a-menu-item key="merchant-reviews">
          <template #icon><icon-message /></template>
          <span v-if="!collapsed">评价管理</span>
        </a-menu-item>
        <a-menu-item key="merchant-logistics">
          <template #icon><icon-send /></template>
          <span v-if="!collapsed">物流管理</span>
        </a-menu-item>
        <a-menu-item key="merchant-inventory">
          <template #icon><icon-storage /></template>
          <span v-if="!collapsed">库存管理</span>
        </a-menu-item>
        <a-menu-item key="merchant-profile">
          <template #icon><icon-user /></template>
          <span v-if="!collapsed">个人信息</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="merchant-main">
      <a-layout-header class="merchant-header">
        <div class="header-left">
          <span class="page-title">{{ titleMap[$route.name] || '商家后台' }}</span>
        </div>
        <div class="header-right">
          <a-space>
            <a-button @click="goHome">
              <template #icon><icon-home /></template>
              去商城
            </a-button>
            <a-dropdown>
              <a-button shape="circle">
                <template #icon><icon-user /></template>
              </a-button>
              <template #content>
                <a-doption @click="goProfile">
                  <template #icon><icon-settings /></template>
                  个人信息
                </a-doption>
                <a-doption @click="logout">
                  <template #icon><icon-export /></template>
                  退出登录
                </a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content class="merchant-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../../stores/user'
import { IconHome, IconDashboard, IconApps, IconFile, IconMessage, IconSend, IconStorage, IconUser, IconExport, IconSettings } from '@arco-design/web-vue/es/icon'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const collapsed = ref(false)

const titleMap = {
  'merchant-overview': '数据概览',
  'merchant-products': '商品管理',
  'merchant-orders': '订单管理',
  'merchant-reviews': '评价管理',
  'merchant-logistics': '物流管理',
  'merchant-inventory': '库存管理',
  'merchant-profile': '个人信息'
}

const onMenuClick = (key) => {
  router.push({ name: key })
}

const goHome = () => router.push('/')
const goProfile = () => router.push({ name: 'merchant-profile' })
const logout = async () => {
  await userStore.logout()
  router.replace('/login')
}

onMounted(async () => {
  await userStore.fetchMe()
  if (userStore.role !== 'MERCHANT') {
    router.replace('/login')
  }
})
</script>

<style scoped>
.merchant-layout { background: #f0f2f5; }
.merchant-sider { background: #001529; }
.sider-header { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sider-title { font-size: 16px; font-weight: 600; color: #fff; }
.merchant-main { background: #f0f2f5; }
.merchant-header { background: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.page-title { font-size: 18px; font-weight: 600; color: #1f2937; }
.merchant-content { padding: 20px; overflow: auto; }
</style>