<template>
  <view class="admin-decoration-category">
    <!-- 顶部标题与按钮 -->
    <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>

    <!-- 分类展示区域 -->
    <view class="content-container">
      <view class="style-list">
        
        <!-- 样式1 -->
        <view class="style-card-wrapper">
          <view :class="['style-card', selectedStyle === 1 ? 'active' : '']" @click="selectedStyle = 1">
            <view class="phone-mock">
              <view class="phone-header">
                <text class="p-title">产品分类</text>
                <text class="p-dots">••• Ⓞ</text>
              </view>
              <view class="phone-body">
                <view class="search-bar">
                  <text class="ic-search">🔍</text>
                  <text class="search-ph">点击搜索商品信息</text>
                </view>
                <view class="style1-content">
                  <view class="sidebar-mock">
                    <text class="sb-item active">精选水果</text>
                    <text class="sb-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
                  </view>
                  <view class="main-mock">
                    <view class="category-section">
                      <view class="section-title"><text class="st-txt">精选水果</text></view>
                      <view class="grid-container">
                        <view class="grid-item" v-for="i in 6" :key="i">
                          <view class="item-img-box"><text class="item-placeholder">🍐</text></view>
                          <text class="item-txt">{{ ['精品香蕉','坚果优选','猕猴桃','大肉块','五花肉','鸡腿'][i-1] }}</text>
                        </view>
                      </view>
                    </view>
                    <view class="category-section">
                      <view class="section-title"><text class="st-txt">肉制品</text></view>
                      <view class="grid-container">
                         <view class="grid-item" v-for="i in 3" :key="i">
                          <view class="item-img-box"><text class="item-placeholder">🥩</text></view>
                          <text class="item-txt">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="phone-tabbar">
                <view class="tb-item"><text class="tb-ic">🏠</text></view>
                <view class="tb-item active"><text class="tb-ic">📂</text></view>
                <view class="tb-item"><text class="tb-ic">🛒</text></view>
                <view class="tb-item"><text class="tb-ic">👤</text></view>
              </view>
            </view>
          </view>
          <text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">样式1</text>
        </view>

        <!-- 样式2 -->
        <view class="style-card-wrapper">
          <view :class="['style-card', selectedStyle === 2 ? 'active' : '']" @click="selectedStyle = 2">
            <view class="phone-mock">
               <view class="phone-header-img"></view>
               <view class="phone-header-v2">
                 <text class="p2-title">分类</text>
                 <view class="home-ic">🏠</view>
               </view>
               <view class="phone-body p2-body">
                 <view class="search-bar-v2">
                   <text class="ic-search">🔍</text>
                   <text class="search-ph">点击搜索商品信息</text>
                 </view>
                 <view class="tabs-v2">
                   <text class="t2-item active">水果</text>
                   <text class="t2-item">全部</text>
                   <text class="t2-item">热带水果</text>
                   <text class="t2-item">西瓜葡萄</text>
                   <text class="t2-arrow">▼</text>
                 </view>
                 <view class="style2-content">
                    <view class="sidebar-v2">
                      <text class="s2-item active">乳品</text>
                      <text class="s2-item">午间零食</text>
                      <text class="s2-item">新鲜蔬菜</text>
                      <text class="s2-item">美妆护肤</text>
                      <text class="s2-item">宠物用品</text>
                      <text class="s2-item">户外玩具</text>
                    </view>
                    <view class="main-v2">
                      <view class="banner-mock-v2">
                        <text class="b-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
                      </view>
                      <view class="prod-v2" v-for="i in 2" :key="i">
                        <text class="p-name">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出门租家用小型电冰箱</text>
                        <view class="p-price-row">
                          <text class="p-price">¥999.00</text>
                          <text class="p-sales">已售 92</text>
                          <view class="btn-buy"><text class="buy-txt">立即购买</text></view>
                        </view>
                      </view>
                    </view>
                 </view>
               </view>
               <view class="cart-badge">🛒<text class="badge-num">7</text></view>
               <view class="footer-p2">
                 <text class="f2-total">¥999.00</text>
                 <view class="btn-settle"><text class="settle-txt">去结算</text></view>
               </view>
            </view>
          </view>
          <text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">样式2</text>
        </view>

        <!-- 样式3 -->
        <view class="style-card-wrapper">
          <view :class="['style-card', selectedStyle === 3 ? 'active' : '']" @click="selectedStyle = 3">
            <view class="phone-mock">
              <view class="phone-header">
                <text class="p-title">产品分类</text>
              </view>
              <view class="phone-body">
                <view class="search-bar-v3">
                  <view class="home-btn">🏠</view>
                  <view class="search-input-v3">
                    <text class="ic-search">🔍</text>
                    <text class="search-ph">搜索商品</text>
                  </view>
                </view>
                <view class="tabs-v3">
                  <text class="t3-item active">水果</text>
                  <text class="t3-item specialty">时时生鲜</text>
                  <text class="t3-item">休闲零食</text>
                  <text class="t3-item">坚果蜜饯</text>
                  <text class="t3-arrow">∨</text>
                </view>
                <view class="style3-content">
                  <view class="sidebar-v3">
                     <text class="s3-item active">乳品</text>
                     <text class="s3-item">午间零食</text>
                     <text class="s3-item">新鲜蔬菜</text>
                     <text class="s3-item">特惠专区</text>
                     <text class="s3-item">大闸蟹</text>
                     <text class="s3-item">精选礼盒</text>
                  </view>
                  <view class="main-v3">
                    <view class="prod-v3" v-for="i in 5" :key="i">
                      <view class="pv-img"></view>
                      <view class="pv-info">
                        <text class="pv-name">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
                        <text class="pv-price">¥25.99</text>
                      </view>
                      <view class="pv-add-box">
                         <text class="pv-add">🛒</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="cart-v3">
                <view class="c3-ic-box">🛒<text class="c3-badge">7</text></view>
                <text class="c3-price">¥999.00</text>
                <view class="btn-settle-v3"><text class="settle-txt">去结算</text></view>
              </view>
            </view>
          </view>
          <text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">样式3</text>
        </view>

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

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

const selectedStyle = ref(1)

const handleSave = () => {
  console.log('Saving classification style:', selectedStyle.value)
  uni.showToast({ title: '保存成功', icon: 'success' })
}

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

<style scoped lang="scss">
.admin-decoration-category {
  background-color: #f0f2f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

.page-header {
  height: 60px;
  padding: 0 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.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; position: relative; }

.btn-txt { color: #fff; font-size: 14px; }
.ghost-txt { color: #606266; font-size: 14px; }

.content-container {
  flex: 1;
  padding: 30px 40px;
}

.style-list {
  display: flex;
  flex-direction: row;
  gap: 30px;
  flex-wrap: wrap;
}

.style-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.style-card {
  width: 320px;
  height: 640px;
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.style-card.active {
  border-color: #2d8cf0;
  box-shadow: 0 4px 20px rgba(45, 140, 240, 0.2);
}

.style-name { font-size: 14px; font-weight: bold; }

/* Phone Mockup Common */
.phone-mock { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #fff; }
.phone-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; }
.p-title { font-size: 15px; font-weight: bold; color: #333; }
.p-dots { font-size: 12px; color: #333; }

.phone-body { flex: 1; background-color: #f8f8f8; display: flex; flex-direction: column; overflow: hidden; }

/* Style 1 Specific */
.search-bar { height: 32px; background-color: #f2f2f2; margin: 10px; border-radius: 16px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.ic-search { font-size: 12px; margin-right: 6px; color: #999; }
.search-ph { font-size: 11px; color: #999; }

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

.main-mock { flex: 1; background-color: #fff; padding: 10px; }
.section-title { margin-bottom: 10px; }
.st-txt { font-size: 12px; font-weight: bold; color: #333; }
.grid-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.grid-item { width: 68px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.item-img-box { width: 50px; height: 50px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.item-placeholder { font-size: 24px; }
.item-txt { font-size: 10px; color: #666; }

.phone-tabbar { height: 48px; display: flex; flex-direction: row; border-top: 1px solid #eee; }
.tb-item { flex: 1; display: flex; align-items: center; justify-content: center; }
.tb-ic { font-size: 20px; color: #999; }
.tb-item.active .tb-ic { color: #f2270c; }

/* Style 2 Specific */
.phone-header-img { height: 20px; background-color: #fff; }
.phone-header-v2 { height: 34px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 12px; }
.p2-title { font-size: 14px; font-weight: bold; flex: 1; text-align: center; }
.home-ic { font-size: 16px; margin-right: 20px;}

.search-bar-v2 { height: 30px; background-color: #fff; margin: 8px 12px; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border: 1px solid #eee; }
.tabs-v2 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
.t2-item { font-size: 12px; color: #333; }
.t2-item.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; }
.t2-arrow { font-size: 10px; color: #999; }

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

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

.prod-v2 { border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; margin-bottom: 10px; }
.p-name { font-size: 11px; color: #333; line-height: 1.3; margin-bottom: 8px; max-height: 28px; overflow: hidden; }
.p-price-row { display: flex; flex-direction: row; align-items: center; }
.p-price { font-size: 12px; color: #f2270c; font-weight: bold; margin-right: 6px; }
.p-sales { font-size: 9px; color: #999; flex: 1; }
.btn-buy { background-color: #f2270c; padding: 4px 8px; border-radius: 10px; }
.buy-txt { font-size: 9px; color: #fff; }

.cart-badge { position: absolute; bottom: 65px; left: 15px; width: 34px; height: 34px; background-color: #fff; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.badge-num { position: absolute; top: 0; right: 0; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }

.footer-p2 { height: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-top: 1px solid #eee; }
.f2-total { font-size: 16px; color: #f2270c; font-weight: bold; }
.btn-settle { background-color: #f2270c; padding: 6px 16px; border-radius: 18px; }
.settle-txt { color: #fff; font-size: 14px; }

/* Style 3 Specific */
.search-bar-v3 { height: 44px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; background-color: #fff; }
.home-btn { font-size: 16px; }
.search-input-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }

.tabs-v3 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; background-color: #fff; }
.t3-item { font-size: 12px; color: #666; white-space: nowrap; }
.t3-item.active { color: #f2270c; font-weight: bold; font-size: 14px; }
.t3-item.specialty { background-color: #f2270c; color: #fff; padding: 2px 8px; border-radius: 10px; }
.t3-arrow { font-size: 12px; color: #ccc; flex: 1; text-align: right; }

.style3-content { flex: 1; display: flex; flex-direction: row; background-color: #fff; }
.sidebar-v3 { width: 75px; background-color: #f7f7f7; }
.s3-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.s3-item.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
.s3-item.active::before { content: ''; position: absolute; left: 0; top: 18px; height: 14px; width: 3px; background-color: #f2270c; }

.main-v3 { flex: 1; padding: 10px; }
.prod-v3 { display: flex; flex-direction: row; margin-bottom: 12px; position: relative; }
.pv-img { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 10px; }
.pv-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.pv-name { font-size: 11px; color: #333; line-height: 1.3; overflow: hidden; max-height: 30px; }
.pv-price { font-size: 13px; color: #f2270c; font-weight: bold; }
.pv-add-box { position: absolute; right: 0; bottom: 0; }
.pv-add { font-size: 18px; color: #f2270c; }

.cart-v3 { height: 50px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border-top: 1px solid #eee; position: relative; }
.c3-ic-box { font-size: 24px; color: #f2270c; margin-right: 10px; position: relative; margin-top: -15px;}
.c3-badge { position: absolute; top: 0; right: -5px; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }
.c3-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
.btn-settle-v3 { background-color: #f2270c; padding: 6px 20px; border-radius: 20px; }
</style>
