<template>
    <div class="min-h-screen bg-gray-50">
      <!-- 状态栏 -->
      <div class="flex justify-between items-center px-4 py-2 bg-gradient-to-r from-blue-50 to-blue-100">
        <div class="text-lg">14:23</div>
        <div class="flex items-center gap-2">
          <div class="text-sm">|||</div>
          <WifiIcon class="w-4 h-4" />
          <BatteryIcon class="w-4 h-4" />
        </div>
      </div>
  
      <!-- 搜索栏 -->
      <div class="p-4 bg-white">
        <div class="flex items-center bg-gray-100 rounded-full px-4 py-2">
          <SearchIcon class="w-5 h-5 text-gray-400" />
          <input 
            type="text" 
            placeholder="香水系列首发" 
            class="ml-2 bg-transparent w-full outline-none text-sm"
          />
          <div class="flex items-center gap-2">
            <button class="p-1">
              <MoreHorizontalIcon class="w-6 h-6" />
            </button>
            <button class="p-1">
              <CircleIcon class="w-6 h-6" />
            </button>
          </div>
        </div>
      </div>
  
      <!-- 分类导航 -->
      <div class="bg-white">
        <div class="flex items-center justify-between px-4 py-2">
          <div class="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
            <div class="flex gap-6">
              <div v-for="category in topCategories" :key="category.id" class="flex flex-col items-center">
                <div class="w-14 h-14 rounded-lg overflow-hidden mb-1">
                  <img :src="category.image" :alt="category.name" class="w-full h-full object-cover" />
                </div>
                <span class="text-xs" :class="{'text-blue-600 font-bold': category.id === 1}">
                  {{ category.name }}
                </span>
              </div>
            </div>
          </div>
          <button 
            @click="showDrawer = true"
            class="ml-2 flex flex-col items-center justify-center px-2"
          >
            <MenuIcon class="w-5 h-5" />
            <span class="text-xs">全部</span>
          </button>
        </div>
      </div>
  
      <!-- 促销横幅 -->
      <div class="p-4">
        <div class="bg-blue-600 rounded-lg p-4 text-white flex justify-between items-center">
          <div>
            <div class="text-lg font-bold">先充值 再购物</div>
            <div class="text-sm opacity-90">电子美通卡1000元值享98折</div>
          </div>
          <button class="bg-yellow-400 text-blue-900 px-4 py-1 rounded-full text-sm">
            点击查看 &gt;
          </button>
        </div>
      </div>
  
      <!-- 商品列表 -->
      <div class="px-4 pb-20">
        <div v-for="product in products" :key="product.id" class="bg-white rounded-lg p-4 mb-4 flex">
          <img :src="product.image" :alt="product.name" class="w-24 h-24 object-cover rounded-lg" />
          <div class="ml-4 flex-1">
            <div class="flex items-start justify-between">
              <div>
                <h3 class="font-medium">{{ product.name }}</h3>
                <p class="text-sm text-gray-500 mt-1">{{ product.description }}</p>
              </div>
              <button class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center">
                <PlusIcon class="w-5 h-5" />
              </button>
            </div>
            <div class="mt-2 flex items-center">
              <span class="text-orange-500 text-lg font-bold">¥{{ product.price }}</span>
              <div v-if="product.plusPrice" class="ml-2 px-2 py-0.5 bg-gray-900 text-xs text-white rounded">
                PLUS ¥{{ product.plusPrice }}
              </div>
            </div>
            <div class="text-xs text-gray-400 mt-1">月销{{ product.monthlySales }}件</div>
          </div>
        </div>
      </div>
  
      <!-- 分类抽屉 -->
      <Transition name="fade">
        <div 
          v-if="isDrawerVisible" 
          class="fixed inset-0 bg-black bg-opacity-50 z-50"
          @click="showDrawer = false"
        >
          <Transition name="slide-down">
            <div 
              v-if="showDrawer"
              class="absolute top-0 left-0 right-0 bg-white rounded-b-xl p-4"
              @click.stop
            >
              <div class="grid grid-cols-5 gap-6">
                <div 
                  v-for="category in allCategories" 
                  :key="category.id" 
                  class="flex flex-col items-center"
                >
                  <div class="w-14 h-14 rounded-full overflow-hidden bg-gradient-to-br from-pink-100 to-pink-200 flex items-center justify-center">
                    <img :src="category.image" :alt="category.name" class="w-10 h-10 object-cover" />
                  </div>
                  <span class="text-xs mt-2">{{ category.name }}</span>
                </div>
              </div>
              <button 
                @click="showDrawer = false"
                class="mt-6 w-full text-center text-gray-500 text-sm"
              >
                点击收起
              </button>
            </div>
          </Transition>
        </div>
      </Transition>
  
      <!-- 底部导航 -->
      <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
        <div class="flex flex-col items-center text-gray-500">
          <HomeIcon class="w-6 h-6" />
          <span class="text-xs">首页</span>
        </div>
        <div class="flex flex-col items-center text-blue-600">
          <LayoutGridIcon class="w-6 h-6" />
          <span class="text-xs">分类</span>
        </div>
        <div class="flex flex-col items-center text-gray-500">
          <ShoppingCartIcon class="w-6 h-6" />
          <span class="text-xs">购物车</span>
        </div>
        <div class="flex flex-col items-center text-gray-500">
          <UserIcon class="w-6 h-6" />
          <span class="text-xs">我的</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  import { 
    Search as SearchIcon,
    Menu as MenuIcon,
    MoreHorizontal as MoreHorizontalIcon,
    Circle as CircleIcon,
    Plus as PlusIcon,
    Wifi as WifiIcon,
    Battery as BatteryIcon,
    Home as HomeIcon,
    LayoutGrid as LayoutGridIcon,
    ShoppingCart as ShoppingCartIcon,
    User as UserIcon
  } from 'lucide-vue-next';
  
  const showDrawer = ref(false);
  const isDrawerVisible = ref(false);
  
  // 控制抽屉的显示和隐藏，添加过渡效果
  watch(showDrawer, (newVal) => {
    if (newVal) {
      isDrawerVisible.value = true;
    } else {
      // 延迟移除DOM元素，等待过渡效果完成
      setTimeout(() => {
        isDrawerVisible.value = false;
      }, 300);
    }
  });
  
  const topCategories = ref([
    { id: 1, name: '家精选', image: '/placeholder.svg?height=56&width=56' },
    { id: 2, name: '肉蛋水产', image: '/placeholder.svg?height=56&width=56' },
    { id: 3, name: '乳品烘焙', image: '/placeholder.svg?height=56&width=56' },
    { id: 4, name: '蔬菜水果', image: '/placeholder.svg?height=56&width=56' },
    { id: 5, name: '休闲零食', image: '/placeholder.svg?height=56&width=56' }
  ]);
  
  const allCategories = ref([
    { id: 1, name: '家精选', image: '/placeholder.svg?height=56&width=56' },
    { id: 2, name: '肉蛋水产', image: '/placeholder.svg?height=56&width=56' },
    { id: 3, name: '乳品烘焙', image: '/placeholder.svg?height=56&width=56' },
    { id: 4, name: '蔬菜水果', image: '/placeholder.svg?height=56&width=56' },
    { id: 5, name: '休闲零食', image: '/placeholder.svg?height=56&width=56' },
    { id: 6, name: '热食冷冻', image: '/placeholder.svg?height=56&width=56' },
    { id: 7, name: '粮油调味', image: '/placeholder.svg?height=56&width=56' },
    { id: 8, name: '水饮冲调', image: '/placeholder.svg?height=56&width=56' },
    { id: 9, name: '中外名酒', image: '/placeholder.svg?height=56&width=56' },
    { id: 10, name: '家清纸品', image: '/placeholder.svg?height=56&width=56' },
    { id: 11, name: '个护美妆', image: '/placeholder.svg?height=56&width=56' },
    { id: 12, name: '家电家居', image: '/placeholder.svg?height=56&width=56' },
    { id: 13, name: '母婴玩具', image: '/placeholder.svg?height=56&width=56' }
  ]);
  
  const products = ref([
    {
      id: 1,
      name: '臻选进口100%NFC椰子水 1L*6',
      description: '泰国原装进口 椰香浓郁 清甜爽口',
      price: '69.90',
      image: '/placeholder.svg?height=96&width=96',
      monthlySales: '1.7万'
    },
    {
      id: 2,
      name: '臻选家庭装湿厕纸 40片*10包',
      description: '除菌99.9%抑菌',
      price: '42.90',
      plusPrice: '39.90',
      image: '/placeholder.svg?height=96&width=96',
      monthlySales: '6783'
    },
    {
      id: 3,
      name: '宜客洗衣凝珠 120颗*12g',
      description: '10倍洁净 7重酵素去污',
      price: '55.90',
      plusPrice: '49.90',
      image: '/placeholder.svg?height=96&width=96',
      monthlySales: '4366'
    }
  ]);
  </script>
  
  <style scoped>
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* 过渡效果 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  .slide-down-enter-active,
  .slide-down-leave-active {
    transition: transform 0.3s ease;
  }
  .slide-down-enter-from,
  .slide-down-leave-to {
    transform: translateY(-100%);
  }
  </style>