<template>
  <view class="admin-decoration-category">
    <!-- 顶部标题与按钮 (PageHeader 标准模式) -->
    <view class="page-header border-shadow">
      <view class="header-left">
        <text class="page-title">商品分类</text>
      </view>
      <view class="header-right">
        <view class="btn-primary" @click="handleSave">
          <text class="btn-txt">保存</text>
        </view>
        <view class="btn-ghost" @click="handleReset">
          <text class="ghost-txt">重置</text>
        </view>
      </view>
    </view>

    <!-- 分类展示区域 (Reason 26: 统一白卡模式) -->
    <view class="content-container anim-fade-in">
      <view class="main-card border-shadow">
        <view class="style-grid">
          
          <!-- 样式 1 -->
          <view class="style-item" @click="selectedStyle = 1">
            <view :class="['mock-phone', selectedStyle === 1 ? 'active' : '']">
              <view class="phone-inner">
                <!-- 顶部栏 -->
                <view class="p-header">
                  <text class="p-title">产品分类</text>
                  <text class="p-dots">••• Ⓞ</text>
                </view>
                <!-- 搜索栏 -->
                <view class="p-search">
                  <text class="p-search-ic">🔍</text>
                  <text class="p-search-txt">点击搜索商品信息</text>
                </view>
                <!-- 内容区 -->
                <view class="p-content-row">
                  <view class="p-side">
                    <text class="p-side-item active">精选水果</text>
                    <text class="p-side-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
                  </view>
                  <view class="p-main">
                    <view class="p-section-title">精选水果</view>
                    <view class="p-item-grid">
                      <view class="p-grid-item" v-for="i in 6" :key="'s1-1-'+i">
                        <view class="p-item-img-box"><text class="p-emoji">🍐</text></view>
                        <text class="p-item-name">{{ ['精品香蕉','坚果优选','猕猴桃','精品香蕉','坚果优选','猕猴桃'][i-1] }}</text>
                      </view>
                    </view>
                    <view class="p-section-title">肉制品</view>
                    <view class="p-item-grid">
                      <view class="p-grid-item" v-for="i in 3" :key="'s1-2-'+i">
                        <view class="p-item-img-box"><text class="p-emoji">🥩</text></view>
                        <text class="p-item-name">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <!-- 底部栏 -->
                <view class="p-tabbar">
                  <view class="p-tab-item"><text class="p-tab-ic">🏠</text><text class="p-tab-txt">首页</text></view>
                  <view class="p-tab-item active"><text class="p-tab-ic">📂</text><text class="p-tab-txt">分类</text></view>
                  <view class="p-tab-item"><text class="p-tab-ic">🛒</text><text class="p-tab-txt">购物车</text></view>
                  <view class="p-tab-item"><text class="p-tab-ic">👤</text><text class="p-tab-txt">我的</text></view>
                </view>
              </view>
            </view>
            <text :class="['style-label', selectedStyle === 1 ? 'active' : '']">样式1</text>
          </view>

          <!-- 样式 2 -->
          <view class="style-item" @click="selectedStyle = 2">
            <view :class="['mock-phone', selectedStyle === 2 ? 'active' : '']">
              <view class="phone-inner">
                <!-- 状态栏 -->
                <view class="p-stat-bar">
                  <text class="p-time">9:41 AM</text>
                  <text class="p-bat">100% 🔋</text>
                </view>
                <!-- 顶部导航 -->
                <view class="p-header-v2">
                   <view class="p-back">🏠</view>
                   <view class="p-search-box-v2">
                     <text class="p-search-ic">🔍</text>
                     <text class="p-search-txt">点击搜索商品信息</text>
                   </view>
                </view>
                <!-- 分类选项卡 -->
                <view class="p-tab-row-v2">
                  <text class="p-tab-v2 active">水果</text>
                  <text class="p-tab-v2">全部</text>
                  <text class="p-tab-v2">热带水果</text>
                  <text class="p-tab-v2">西瓜葡萄</text>
                  <text class="p-arrow-v2">▼</text>
                </view>
                <!-- 内容区 -->
                <view class="p-content-row">
                  <view class="p-side-v2">
                    <text class="p-side-item-v2 active">乳品</text>
                    <text class="p-side-item-v2" v-for="name in ['休闲零食','新鲜蔬菜','美妆护肤','宠物用品','图书玩具']" :key="name">{{name}}</text>
                  </view>
                  <view class="p-main">
                    <view class="p-banner-v2">
                      <text class="p-banner-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
                    </view>
                    <view class="p-prod-list-v2">
                       <view class="p-prod-v2" v-for="i in 2" :key="'s2-'+i">
                         <text class="p-prod-title">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出口租家用小型电冰箱</text>
                         <view class="p-prod-footer-v2">
                           <text class="p-price">¥999.00</text>
                           <text class="p-sales">已售 92</text>
                           <view class="p-buy-btn">立即购买</view>
                         </view>
                       </view>
                    </view>
                  </view>
                </view>
                <!-- 蓝色底部条 -->
                <view class="p-cart-bar">
                   <view class="p-cart-icon-box">🛒<text class="p-cart-badge">7</text></view>
                   <text class="p-cart-total">¥999.00</text>
                   <view class="p-settle-btn">去结算</view>
                </view>
              </view>
            </view>
            <text :class="['style-label', selectedStyle === 2 ? 'active' : '']">样式2</text>
          </view>

          <!-- 样式 3 -->
          <view class="style-item" @click="selectedStyle = 3">
            <view :class="['mock-phone', selectedStyle === 3 ? 'active' : '']">
              <view class="phone-inner">
                <!-- 顶部导航 -->
                <view class="p-header">
                  <text class="p-title">产品分类</text>
                </view>
                <view class="p-header-v3">
                   <view class="p-back">🏠</view>
                   <view class="p-search-box-v3">
                     <text class="p-search-ic">🔍</text>
                     <text class="p-search-txt">搜索商品</text>
                   </view>
                </view>
                <!-- 分类项 -->
                <view class="p-tab-row-v3">
                   <text class="p-tab-item-v3">水果</text>
                   <text class="p-tab-item-v3 active">时令生鲜</text>
                   <text class="p-tab-item-v3">休闲零食</text>
                   <text class="p-tab-item-v3">坚果蜜饯</text>
                   <text class="p-arrow-v3">∨</text>
                </view>
                <!-- 内容区 -->
                <view class="p-content-row">
                  <view class="p-side-v3">
                    <text class="p-side-item-v3 active">乳品</text>
                    <text class="p-side-item-v3" v-for="name in ['休闲零食','新鲜蔬菜','特惠专区','大闸蟹','精选礼盒']" :key="name">{{name}}</text>
                  </view>
                  <view class="p-main-v3">
                    <view class="p-prod-row-v3" v-for="i in 5" :key="'s3-'+i">
                       <view class="p-prod-img-v3"></view>
                       <view class="p-prod-info-v3">
                         <text class="p-prod-name-v3">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
                         <text class="p-prod-price-v3">¥25.99</text>
                       </view>
                       <view class="p-prod-action-v3">🛒</view>
                    </view>
                  </view>
                </view>
                 <!-- 红色底部条 -->
                 <view class="p-cart-bar-v3">
                   <view class="p-cart-icon-box-v3">🛒<text class="p-cart-badge">7</text></view>
                   <text class="p-cart-total-v3">¥999.00</text>
                   <view class="p-settle-btn-v3">去结算</view>
                </view>
              </view>
            </view>
            <text :class="['style-label', selectedStyle === 3 ? 'active' : '']">样式3</text>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const selectedStyle = ref(1)

const handleSave = () => {
  uni.showToast({ title: '保存成功', icon: 'success' })
}

const handleReset = () => {
  selectedStyle.value = 1
}
</script>

<style scoped lang="scss">
.admin-decoration-category {
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.border-shadow {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* PageHeader */
.page-header {
  height: 60px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.page-title { font-size: 16px; font-weight: 600; color: #303133; }
.header-right { display: flex; flex-direction: row; gap: 12px; }

.btn-primary, .btn-ghost {
  height: 32px;
  padding: 0 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-primary { background-color: #2d8cf0; }
.btn-ghost { border: 1px solid #dcdfe6; }
.btn-txt { color: #fff; font-size: 14px; }
.ghost-txt { color: #606266; font-size: 14px; }

/* Content Container */
.content-container {
  margin-top: 20px;
  flex: 1;
}

.main-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px;
  min-height: 800px;
}

/* Responsive Grid (1250px -> 3, 700px -> 1) */
.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 1250px) {
  .style-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .style-grid {
    grid-template-columns: 1fr;
  }
}

.style-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

/* Mock Phone Structure */
.mock-phone {
  width: 300px;
  height: 620px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  padding: 8px;
  background-color: #fff;
  transition: all 0.3s;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  position: relative;
}

.mock-phone.active {
  border-color: #2d8cf0;
  box-shadow: 0 4px 25px rgba(45, 140, 240, 0.15);
}

.phone-inner {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.style-label {
  font-size: 14px;
  color: #333;
}
.style-label.active {
  color: #2d8cf0;
  font-weight: bold;
}

/* Style 1 Specific */
.p-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 12px; background-color: #fff; border-bottom: 1px solid #f0f0f0; }
.p-title { font-size: 15px; font-weight: bold; color: #333; }
.p-dots { font-size: 12px; color: #333; }

.p-search { margin: 8px; height: 32px; background-color: #fff; border-radius: 16px; border: 1px solid #eee; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.p-search-ic { font-size: 10px; margin-right: 6px; color: #999; }
.p-search-txt { font-size: 11px; color: #999; }

.p-content-row { flex: 1; display: flex; flex-direction: row; overflow: hidden; }
.p-side { width: 80px; background-color: #f7f7f7; display: flex; flex-direction: column; }
.p-side-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.p-side-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
.p-side-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }

.p-main { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
.p-section-title { font-size: 12px; font-weight: bold; color: #333; margin-bottom: 12px; }
.p-item-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.p-grid-item { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.p-item-img-box { width: 50px; height: 50px; background-color: #f9f9f9; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.p-emoji { font-size: 24px; }
.p-item-name { font-size: 10px; color: #666; text-align: center; }

.p-tabbar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; }
.p-tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.p-tab-ic { font-size: 18px; color: #999; }
.p-tab-txt { font-size: 9px; color: #999; }
.p-tab-item.active .p-tab-ic, .p-tab-item.active .p-tab-txt { color: #f2270c; }

/* Style 2 Specific */
.p-stat-bar { height: 24px; padding: 0 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff; }
.p-time { font-size: 10px; font-weight: bold; }
.p-bat { font-size: 10px; }

.p-header-v2 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
.p-back { font-size: 16px; }
.p-search-box-v2 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }

.p-tab-row-v2 { height: 40px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
.p-tab-v2 { font-size: 12px; color: #333; }
.p-tab-v2.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; padding-bottom: 2px; }
.p-arrow-v2 { font-size: 10px; color: #999; flex: 1; text-align: right; }

.p-side-v2 { width: 70px; background-color: #f7f7f7; }
.p-side-item-v2 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #333; }
.p-side-item-v2.active { background-color: #fff; font-weight: bold; }

.p-banner-v2 { height: 80px; background-color: #1a56f0; border-radius: 6px; padding: 12px; display: flex; align-items: center; margin-bottom: 12px; }
.p-banner-txt { color: #fff; font-size: 12px; font-weight: bold; line-height: 1.4; }

.p-prod-v2 { border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 12px; }
.p-prod-title { font-size: 11px; color: #333; line-height: 1.4; margin-bottom: 8px; }
.p-prod-footer-v2 { display: flex; flex-direction: row; align-items: center; }
.p-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
.p-sales { font-size: 10px; color: #999; margin-right: 12px; }
.p-buy-btn { background-color: #f2270c; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 12px; }

.p-cart-bar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
.p-cart-icon-box { width: 36px; height: 36px; background-color: #f2270c; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; position: relative; margin-top: -10px; }
.p-cart-badge { position: absolute; top: -4px; right: -4px; background-color: #fff; color: #f2270c; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; border: 1px solid #f2270c; }
.p-cart-total { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
.p-settle-btn { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }

/* Style 3 Specific */
.p-header-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
.p-search-box-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }

.p-tab-row-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; }
.p-tab-item-v3 { font-size: 12px; color: #666; }
.p-tab-item-v3.active { background-color: #f2270c; color: #fff; padding: 4px 10px; border-radius: 14px; }
.p-arrow-v3 { font-size: 10px; color: #ccc; flex: 1; text-align: right; }

.p-side-v3 { width: 75px; background-color: #f7f7f7; }
.p-side-item-v3 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.p-side-item-v3.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
.p-side-item-v3.active::before { content: ''; position: absolute; left: 0; top: 17px; height: 14px; width: 3px; background-color: #f2270c; }

.p-main-v3 { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
.p-prod-row-v3 { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.p-prod-img-v3 { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 12px; }
.p-prod-info-v3 { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.p-prod-name-v3 { font-size: 12px; color: #333; line-height: 1.4; }
.p-prod-price-v3 { font-size: 14px; color: #f2270c; font-weight: bold; }
.p-prod-action-v3 { font-size: 20px; color: #f2270c; }

.p-cart-bar-v3 { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
.p-cart-icon-box-v3 { width: 36px; height: 36px; background-color: #fff; border-radius: 18px; border: 1px solid #f2270c; display: flex; align-items: center; justify-content: center; color: #f2270c; font-size: 18px; position: relative; margin-top: -10px; }
.p-cart-total-v3 { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
.p-settle-btn-v3 { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }

</style>

