<template>
  <view class="admin-main">
    <!-- 头部操作区 -->
    <view class="header-container">
      <text class="page-title">主题风格</text>
      <button class="save-btn" type="primary" size="mini" @click="handleSave">保存</button>
    </view>

    <!-- 选项卡/卡片容器 -->
    <view class="card-container selection-area">
      <view class="theme-list">
        <view 
          v-for="(item, index) in themeOptions" 
          :key="index"
          class="theme-item"
          :class="{ active: selectedThemeId === item.id }"
          @click="selectedThemeId = item.id"
        >
          <view class="color-preview" :style="{ backgroundColor: item.color }"></view>
          <text class="theme-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 预览区 -->
    <view class="preview-section">
      <!-- 预览 1: 个人中心 -->
      <view class="preview-card">
        <text class="p-title">个人中心</text>
        <view class="mock-phone">
          <view class="mock-status-bar"></view>
          <view class="mock-content user-center">
            <view class="header-bg" :style="{ backgroundColor: currentThemeColor }">
              <view class="user-info-row">
                <view class="mock-avatar"></view>
                <view class="user-meta">
                  <view class="name-line">
                    <text class="name">我的名字我的名字</text>
                    <view class="vip-badge">SVIP</view>
                  </view>
                  <text class="user-id">ID: 3659884 ></text>
                </view>
                <view class="settings-icons">
                   <text class="ic">🔔</text>
                   <text class="ic">⚙️</text>
                </view>
              </view>
              <view class="stats-row">
                <view class="stat-item"><text class="val">0.00</text><text class="lab">余额</text></view>
                <view class="stat-item"><text class="val">20</text><text class="lab">积分</text></view>
                <view class="stat-item"><text class="val">25</text><text class="lab">优惠券</text></view>
              </view>
            </view>
            <view class="vip-card-banner">
               <view class="vip-left">
                 <text class="vip-l-t1">会员可享多项权益</text>
                 <text class="vip-l-t2">会员剩余434天</text>
               </view>
               <view class="btn-vip">立即续费</view>
            </view>
            
            <view class="order-section">
              <view class="o-title"><text>订单中心</text><text class="more">查看全部 ></text></view>
              <view class="o-icons">
                <view class="o-item">📦<text>待付款</text></view>
                <view class="o-item">🚚<text>待发货</text></view>
                <view class="o-item">🎁<text>待收货</text></view>
                <view class="o-item">⭐<text>待评价</text></view>
                <view class="o-item">🔄<text>售后/退款</text></view>
              </view>
            </view>

            <view class="invite-banner">
               <text class="i-t1">邀请好友赚佣金</text>
               <text class="i-t2">推广好友注册</text>
            </view>

            <view class="service-section">
               <view class="s-title">我的服务</view>
               <view class="s-grid">
                  <view class="s-item">👤<text>会员中心</text></view>
                  <view class="s-item">📢<text>我的推广</text></view>
                  <view class="s-item">📅<text>签到</text></view>
                  <view class="s-item">🎫<text>优惠券</text></view>
               </view>
            </view>

            <view class="mock-tabbar">
               <view class="t-item">🏠<text>首页</text></view>
               <view class="t-item">🔍<text>分类</text></view>
               <view class="t-item">🛒<text>购物车</text></view>
               <view class="t-item active" :style="{ color: currentThemeColor }">👤<text>我的</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 预览 2: 商品详情 -->
      <view class="preview-card">
        <text class="p-title">商品详情</text>
        <view class="mock-phone">
          <view class="mock-status-bar"></view>
          <view class="mock-content product-detail">
             <view class="p-gallery">
               <text class="p-page">1/5</text>
             </view>
             <view class="p-main-info">
               <view class="p-price-row">
                 <text class="p-symbol" :style="{ color: currentThemeColor }">¥</text>
                 <text class="p-price" :style="{ color: currentThemeColor }">199.00</text>
                 <text class="p-old-price">¥ 100.00</text>
                 <view class="p-tag-svip">SVIP</view>
               </view>
               <text class="p-name">企鹅针织条纹四件套新款上市性价比高</text>
               <view class="p-stats">
                 <text>原价: ¥ 234.00</text>
                 <text>累计销量: 2999999件</text>
                 <text>库存: 1452件</text>
               </view>
             </view>
             <view class="p-options">
               <view class="opt-row"><text class="opt-lab">优惠券:</text><view class="tags"><text class="t-red">满100减30</text><text class="t-red">满100减30</text></view><text class="more">></text></view>
               <view class="opt-row"><text class="opt-lab">活动:</text><view class="tags"><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与拼团</text><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与砍价</text><text class="t-action" :style="{ backgroundColor: currentThemeColor }">参与秒杀</text></view><text class="more">></text></view>
             </view>
             <view class="p-footer">
                <view class="f-icons">
                  <view class="fi"><text>💬</text><text>客服</text></view>
                  <view class="fi"><text>⭐</text><text>收藏</text></view>
                  <view class="fi"><text>🛒</text><text>购物车</text></view>
                </view>
                <view class="f-btns">
                  <view class="f-btn cart" :style="{ backgroundColor: currentThemeColor, opacity: 0.7 }">加入购物车</view>
                  <view class="f-btn buy" :style="{ backgroundColor: currentThemeColor }">立即购买</view>
                </view>
             </view>
          </view>
        </view>
      </view>

      <!-- 预览 3: 拼团列表 -->
      <view class="preview-card">
        <text class="p-title">拼团列表</text>
        <view class="mock-phone">
          <view class="mock-status-bar"></view>
          <view class="mock-content group-list">
             <view class="g-header" :style="{ backgroundColor: currentThemeColor }">
               <text class="g-h-title">拼团列表</text>
               <view class="g-participation">
                  <view class="g-avatars"></view>
                  <text>9999人参与</text>
               </view>
             </view>
             <view class="g-item" v-for="i in 4" :key="i">
                <view class="g-img"></view>
                <view class="g-info">
                  <text class="g-name">2021年新款吊灯简约现代大气家用客厅灯北欧风格餐厅卧...</text>
                  <view class="g-bottom">
                    <view class="g-prices">
                      <text class="g-p-old">¥ 199.00</text>
                      <text class="g-p-now" :style="{ color: currentThemeColor }">¥ 124.00</text>
                    </view>
                    <view class="g-btn" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '去拼团' : '已售罄' }}</view>
                  </view>
                </view>
             </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

interface ThemeOption {
  id: string
  name: string
  color: string
}

const themeOptions = ref<ThemeOption[]>([
  { id: 'blue', name: '天空蓝', color: '#1890ff' },
  { id: 'green', name: '生鲜绿', color: '#52c41a' },
  { id: 'red', name: '热情红', color: '#e93323' },
  { id: 'pink', name: '魅力粉', color: '#ff4d9f' },
  { id: 'orange', name: '活力橙', color: '#ff8c00' }
])

const selectedThemeId = ref('red')

const currentThemeColor = computed(() : string => {
  const theme = themeOptions.value.find(t => t.id === selectedThemeId.value)
  return theme ? theme.color : '#e93323'
})

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

<style scoped>
.admin-main {
  padding: 0;
}

.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.page-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.selection-area {
  background-color: #fff;
  padding: 20px;
  margin: 15px;
  border-radius: 4px;
}

.theme-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.theme-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
}

.theme-item.active {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.color-preview {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-right: 8px;
}

.theme-name {
  font-size: 14px;
  color: #606266;
}

.preview-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 0 15px 20px;
  overflow-x: auto;
}

.preview-card {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  width: 292px;
  flex-shrink: 0;
}

.p-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  display: block;
  text-align: center;
}

.mock-phone {
  width: 260px;
  height: 540px;
  border: 1px solid #eee;
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #f8f8f8;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.mock-status-bar {
  height: 20px;
}

.mock-content {
  height: calc(100% - 20px);
  overflow-y: auto;
}

/* User Center Mock */
.user-center .header-bg {
  padding: 20px 15px 40px;
  color: #fff;
}

.user-info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.mock-avatar { width: 50px; height: 50px; background-color: #eee; border-radius: 50%; margin-right: 12px; }
.user-meta { flex: 1; }
.name-line { display: flex; flex-direction: row; align-items: center; margin-bottom: 4px; }
.name { font-size: 14px; font-weight: bold; }
.vip-badge { font-size: 10px; background-color: #333; color: #fadb14; padding: 0 4px; border-radius: 2px; margin-left: 6px; }
.user-id { font-size: 10px; opacity: 0.9; }
.settings-icons { display: flex; flex-direction: row; gap: 10px; }

.stats-row { display: flex; flex-direction: row; justify-content: space-around; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-item .val { font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.stat-item .lab { font-size: 12px; opacity: 0.9; }

.vip-card-banner {
  margin: -30px 15px 15px;
  background: linear-gradient(90deg, #fceabb 0%, #f8b500 100%);
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.vip-left { display: flex; flex-direction: column; }
.vip-l-t1 { font-size: 12px; color: #845506; font-weight: bold; }
.vip-l-t2 { font-size: 10px; color: #845506; opacity: 0.8; }
.btn-vip { font-size: 10px; background: #333; color: #fff; padding: 4px 10px; border-radius: 12px; }

.order-section { background: #fff; margin: 0 15px 15px; border-radius: 8px; padding: 15px; }
.o-title { display: flex; flex-direction: row; justify-content: space-between; font-size: 12px; margin-bottom: 15px; }
.o-icons { display: flex; flex-direction: row; justify-content: space-between; }
.o-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 6px; }

.invite-banner { margin: 0 15px 15px; height: 60px; background: #fff1f0; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; border: 1px dashed #ffa39e; }
.i-t1 { font-size: 12px; color: #cf1322; font-weight: bold; margin-bottom: 4px; }
.i-t2 { font-size: 10px; color: #cf1322; opacity: 0.7; }

.service-section { background: #fff; margin: 0 15px; border-radius: 8px; padding: 15px; }
.s-title { font-size: 12px; font-weight: bold; margin-bottom: 15px; }
.s-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
.s-item { width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 8px; margin-bottom: 10px; }

.mock-tabbar { position: absolute; bottom: 0; width: 100%; height: 50px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; }
.t-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #999; }
.t-item.active { color: #e93323; }

/* Product Mock */
.product-detail .p-gallery { height: 260px; background-color: #eee; position: relative; }
.p-page { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 10px; }
.p-main-info { background: #fff; padding: 15px; margin-bottom: 10px; }
.p-price-row { display: flex; flex-direction: row; align-items: baseline; margin-bottom: 8px; }
.p-symbol { font-size: 14px; font-weight: bold; }
.p-price { font-size: 24px; font-weight: bold; margin: 0 8px; }
.p-old-price { font-size: 12px; color: #999; text-decoration: line-through; margin-right: 8px; }

.p-options { background: #fff; padding: 15px; margin-bottom: 10px; }
.opt-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 12px; }
.opt-lab { width: 50px; font-size: 12px; color: #999; }
.p-footer { position: absolute; bottom: 0; width: 100%; height: 60px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; padding: 8px 15px; align-items: center; }
.f-icons { display: flex; flex-direction: row; gap: 15px; margin-right: 10px; }
.f-btns { flex: 1; display: flex; flex-direction: row; height: 36px; border-radius: 18px; overflow: hidden; }
.f-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }

/* Group List Mock */
.group-list .g-header { padding: 15px; }
.g-h-title { color: #fff; font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; }
.g-item { background: #fff; border-radius: 8px; margin: 12px; padding: 12px; display: flex; flex-direction: row; }
.g-img { width: 90px; height: 90px; background: #eee; border-radius: 4px; margin-right: 12px; }
</style>