<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <h1 class="logo-text">蜂快 · 运营系统</h1>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        theme="dark"
        mode="inline"
      >
        <a-menu-item key="dashboard">
          <template #icon>
            <dashboard-outlined />
          </template>
          <router-link to="/dashboard">工作台</router-link>
        </a-menu-item>

        <a-sub-menu key="user">
          <template #icon>
            <user-outlined />
          </template>
          <template #title>用户管理</template>
          <a-menu-item key="user-list">
            <router-link to="/user/list">用户列表</router-link>
          </a-menu-item>
          <a-menu-item key="deliveryman-list">
            <router-link to="/deliveryman/list">配送员列表</router-link>
          </a-menu-item>
        </a-sub-menu>
        
        <a-sub-menu key="order">
          <template #icon>
            <shopping-outlined />
          </template>
          <template #title>订单管理</template>
          <a-menu-item key="order-delivery">
            <router-link to="/order/delivery">配送订单</router-link>
          </a-menu-item>
          <a-menu-item key="order-online">
            <router-link to="/order/online">买单订单</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="finance">
          <template #icon>
            <money-collect-outlined />
          </template>
          <template #title>财务管理</template>
          <a-menu-item key="finance-withdraw">
            <router-link to="/finance/withdraw">提现管理</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="community">
          <template #icon>
            <home-outlined />
          </template>
          <template #title>小区管理</template>
          <a-menu-item key="community-list">
            <router-link to="/community/list">小区列表</router-link>
          </a-menu-item>
          <a-menu-item key="building-list">
            <router-link to="/community/building">楼栋列表</router-link>
          </a-menu-item>
          <a-menu-item key="station-list">
            <router-link to="/community/station">驿站列表</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="coupon">
          <template #icon>
            <gift-outlined />
          </template>
          <template #title>优惠券管理</template>
          <a-menu-item key="coupon-template">
            <router-link to="/coupon/template/list">优惠券模板</router-link>
          </a-menu-item>
          <a-menu-item key="coupon-activity">
            <router-link to="/coupon/activity/list">优惠券活动</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="merchant">
          <template #icon>
            <shop-outlined />
          </template>
          <template #title>商家管理</template>
          <a-menu-item key="merchant-list">
            <router-link to="/merchant/list">商家列表</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-categories">
            <router-link to="/merchant/categories">商家分类</router-link>
          </a-menu-item>
          <a-menu-item key="merchant-products">
            <router-link to="/merchant/products">商品列表</router-link>
          </a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="system">
          <template #icon>
            <setting-outlined />
          </template>
          <template #title>系统管理</template>
          <a-menu-item key="system-logs">
            <router-link to="/system/logs">日志查询</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              {{ userInfo.nickname }}
              <down-outlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { ref, defineComponent } from 'vue'
import {
  UserOutlined,
  HomeOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DownOutlined,
  LogoutOutlined,
  DashboardOutlined,
  ShopOutlined,
  SettingOutlined,
  ShoppingOutlined,
  MoneyCollectOutlined,
  GiftOutlined
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'BasicLayout',
  components: {
    UserOutlined,
    HomeOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    DownOutlined,
    LogoutOutlined,
    DashboardOutlined,
    ShopOutlined,
    SettingOutlined,
    ShoppingOutlined,
    MoneyCollectOutlined,
    GiftOutlined
  },
  setup() {
    const router = useRouter()
    const collapsed = ref(false)
    const selectedKeys = ref(['dashboard'])
    const openKeys = ref([])
    
    const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))

    window.addEventListener('storage', (e) => {
      if (e.key === 'userInfo') {
        userInfo.value = JSON.parse(e.newValue || '{}')
      }
    })

    const handleLogout = () => {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      router.push('/login')
    }

    const menuItems = ref([
      {
        key: 'dashboard',
        icon: () => h(DashboardOutlined),
        title: '工作台',
        path: '/dashboard'
      },
      {
        key: 'user',
        icon: () => h(UserOutlined),
        title: '用户管理',
        children: [
          {
            key: 'user-list',
            title: '用户列表',
            path: '/user/list'
          }
        ]
      },
      {
        key: 'deliveryman',
        icon: () => h(UserOutlined),
        title: '配送员管理',
        path: '/deliveryman/list'
      },
      {
        key: 'order',
        icon: () => h(ShoppingOutlined),
        title: '订单管理',
        children: [
          {
            key: 'order-delivery',
            title: '配送订单',
            path: '/order/delivery'
          },
          {
            key: 'order-online',
            title: '买单订单',
            path: '/order/online'
          }
        ]
      },
      {
        key: 'finance',
        icon: () => h(MoneyCollectOutlined),
        title: '财务管理',
        children: [
          {
            key: 'finance-withdraw',
            title: '提现管理',
            path: '/finance/withdraw'
          }
        ]
      },
      {
        key: 'community',
        icon: () => h(HomeOutlined),
        title: '小区管理',
        children: [
          {
            key: 'community-list',
            title: '小区列表',
            path: '/community/list'
          },
          {
            key: 'building-list',
            title: '楼栋列表',
            path: '/community/building'
          },
          {
            key: 'station-list',
            title: '驿站列表',
            path: '/community/station'
          }
        ]
      },
      {
        key: 'coupon',
        icon: () => h(GiftOutlined),
        title: '优惠券管理',
        children: [
          {
            key: 'coupon-template',
            title: '优惠券模板',
            path: '/coupon/template/list'
          },
          {
            key: 'coupon-activity',
            title: '优惠券活动',
            path: '/coupon/activity/list'
          }
        ]
      },
      {
        key: 'merchant',
        icon: () => h(ShopOutlined),
        title: '商家管理',
        children: [
          {
            key: 'merchant-list',
            title: '商家列表',
            path: '/merchant/list'
          },
          {
            key: 'merchant-categories',
            title: '商家分类',
            path: '/merchant/categories'
          },
          {
            key: 'merchant-products',
            title: '商品列表',
            path: '/merchant/products'
          }
        ]
      },
      {
        key: 'system',
        icon: () => h(SettingOutlined),
        title: '系统管理',
        children: [
          {
            key: 'system-logs',
            title: '日志查询',
            path: '/system/logs'
          }
        ]
      },
    ])

    return {
      collapsed,
      selectedKeys,
      openKeys,
      userInfo,
      handleLogout,
      menuItems
    }
  },
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
}
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.trigger:hover {
  color: #1890ff;
}
.logo {
  height: 64px;
  margin: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
}
.logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.3s;
}
:deep(.ant-layout-sider-collapsed) .logo-text {
  display: none;
}
.header-right {
  float: right;
  margin-right: 24px;
  line-height: 64px;
}
.ant-dropdown-link {
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  padding: 0 8px;
}
</style> 