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

    <!-- 主要内容区 -->
    <view class="content-container anim-fade-in">
      <view class="main-card border-shadow">
        <!-- 左侧：手机预览 -->
        <view class="preview-panel">
          <view class="phone-mockup">
            <scroll-view class="phone-body" :scroll-y="true">
              
              <!-- 样式1 & 样式2 头部 -->
              <view v-if="selectedStyle === 1 || selectedStyle === 2" class="user-header-gradient">
                <view class="header-top">
                  <view class="avatar-box">
                    <image class="avatar-img" src="/static/logo.png" mode="aspectFill"></image>
                  </view>
                  <view class="user-info">
                    <text class="user-name">用户名称用户名称</text>
                    <view class="bind-phone">
                      <text class="bind-txt">绑定手机号 ></text>
                    </view>
                  </view>
                  <view class="header-icons">
                    <view class="ic-msg">🔔<text class="msg-dot">6</text></view>
                    <view class="ic-set">⚙️</view>
                  </view>
                </view>
                <view class="stats-row">
                  <view class="stat-item">
                    <text class="stat-val">0.00</text>
                    <text class="stat-label">我的余额</text>
                  </view>
                  <view class="stat-item">
                    <text class="stat-val">65749</text>
                    <text class="stat-label">当前积分</text>
                  </view>
                  <view class="stat-item">
                    <text class="stat-val">25</text>
                    <text class="stat-label">优惠券</text>
                  </view>
                </view>

                <!-- 样式1 会员卡 -->
                <view v-if="selectedStyle === 1" class="member-card-s1" @click="handleMember">
                  <view class="mc-content-s1">
                    <view class="mc-left">
                      <text class="mc-ic">👑</text>
                      <text class="mc-txt">会员到期 2022-12-31</text>
                    </view>
                    <view class="mc-right">
                      <text class="mc-btn">立即续费 ></text>
                    </view>
                  </view>
                </view>

                <!-- 样式2 会员卡 -->
                <view v-if="selectedStyle === 2" class="member-card-s2" @click="handleMember">
                  <view class="mc-content-s2">
                    <view class="mc-left">
                      <text class="mc-ic">👑</text>
                      <view class="mc-info-col">
                        <text class="mc-t1">会员可享多项权益</text>
                        <text class="mc-t2">会员剩余360天</text>
                      </view>
                    </view>
                    <view class="mc-right">
                      <text class="mc-btn-white">立即续费 ></text>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 样式3 头部 -->
              <view v-if="selectedStyle === 3" class="user-header-s3">
                <view class="header-top-s3">
                  <view class="header-top-left">
                    <view class="avatar-box-s3">
                      <image class="avatar-img" src="/static/logo.png" mode="aspectFill"></image>
                    </view>
                    <view class="user-info-s3">
                      <text class="user-name-s3">用户名称用户名称</text>
                      <view class="bind-phone-s3">
                        <text class="bind-txt-s3">绑定手机号 ></text>
                      </view>
                    </view>
                  </view>
                  <view class="header-icons-s3">
                    <view class="ic-msg-s3">🔔<text class="msg-dot-s3">6</text></view>
                    <view class="ic-set-s3">⚙️</view>
                  </view>
                </view>
                
                <view class="stats-row-s3">
                  <view class="stat-item">
                    <text class="stat-val-s3">0.00</text>
                    <text class="stat-label-s3">我的余额</text>
                  </view>
                  <view class="stat-item">
                    <text class="stat-val-s3">65749</text>
                    <text class="stat-label-s3">当前积分</text>
                  </view>
                  <view class="stat-item">
                    <text class="stat-val-s3">25</text>
                    <text class="stat-label-s3">优惠券</text>
                  </view>
                </view>
              </view>

              <!-- 样式3 会员卡 -->
              <view v-if="selectedStyle === 3" class="member-card-s3" @click="handleMember">
                <view class="mc-content-s3">
                  <view class="mct-left-s3">
                    <text class="mct-ic-s3">👑</text>
                    <text class="mct-txt-s3">开通会员VIP</text>
                  </view>
                  <view class="mct-right-s3">
                    <text class="mct-more-s3">会员可享多项权益 ></text>
                  </view>
                </view>
              </view>

              <!-- 公共部分：订单中心 -->
              <view class="section-card">
                <view class="section-header">
                  <text class="sh-title">订单中心</text>
                  <text class="sh-more">查看全部 ></text>
                </view>
                <view class="order-grid">
                  <view class="grid-item" v-for="(item, index) in orderItems" :key="index">
                    <view class="gi-ic-box">
                      <text class="gi-ic">{{ item.icon }}</text>
                    </view>
                    <text class="gi-txt">{{ item.name }}</text>
                  </view>
                </view>
              </view>

              <!-- 广告位 -->
              <view class="ad-box">
                <text class="ad-txt">暂无广告数据</text>
              </view>

              <!-- 我的服务 -->
              <view class="section-card">
                <view class="section-header">
                  <text class="sh-title">我的服务</text>
                </view>
                <view class="service-grid">
                  <view class="grid-item-s" v-for="(item, index) in serviceItems" :key="index">
                    <view class="gi-ic-box-s" :style="{backgroundColor: item.color}">
                      <text class="gi-ic-s">{{ item.icon }}</text>
                    </view>
                    <text class="gi-txt-s">{{ item.name }}</text>
                  </view>
                </view>
              </view>

              <!-- 商家管理 -->
              <view class="section-card">
                <view class="section-header">
                  <text class="sh-title">商家管理</text>
                </view>
                <view class="merchant-grid">
                  <view class="grid-item-m" v-for="(item, index) in merchantItems" :key="index">
                    <view class="gi-ic-box-m">
                      <text class="gi-ic-m">{{ item.icon }}</text>
                    </view>
                    <text class="gi-txt-m">{{ item.name }}</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

        <!-- 右侧：设置面板 -->
        <view class="settings-panel">
          <view class="settings-group">
            <view class="group-title">
              <view class="title-line"></view>
              <text class="title-txt">页面设置</text>
            </view>
            <view class="setting-item-row mt-20">
              <text class="item-label">页面风格：</text>
              <view class="radio-group">
                <view class="radio-item" @click="selectedStyle = 1">
                  <view :class="['radio-dot', selectedStyle === 1 ? 'active' : '']"></view>
                  <text class="radio-txt">样式1</text>
                </view>
                <view class="radio-item" @click="selectedStyle = 2">
                  <view :class="['radio-dot', selectedStyle === 2 ? 'active' : '']"></view>
                  <text class="radio-txt">样式2</text>
                </view>
                <view class="radio-item" @click="selectedStyle = 3">
                  <view :class="['radio-dot', selectedStyle === 3 ? 'active' : '']"></view>
                  <text class="radio-txt">样式3</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const selectedStyle = ref(1)

const orderItems = [
  { name: '待付款', icon: '💳' },
  { name: '待发货', icon: '🚚' },
  { name: '待收货', icon: '📦' },
  { name: '待评价', icon: '📝' },
  { name: '售后/退款', icon: '🔄' }
]

const serviceItems = [
  { name: '付费会员', icon: '💎', color: '#FFF7E6' },
  { name: '发票管理', icon: '🧾', color: '#F6FFED' },
  { name: '积分中心', icon: '🪙', color: '#E6FFFB' },
  { name: '联系客服', icon: '🎧', color: '#F0F5FF' },
  { name: '优惠券', icon: '🎫', color: '#FFF1F0' },
  { name: '我的收藏', icon: '⭐', color: '#FFF2E8' },
  { name: '地址信息', icon: '📍', color: '#F9F0FF' },
  { name: '我的余额', icon: '💰', color: '#FCFFE6' },
  { name: '我的推广', icon: '📢', color: '#FFF7E6' },
  { name: '砍价记录', icon: '✂️', color: '#F6FFED' },
  { name: '浏览记录', icon: '🕒', color: '#E6FFFB' },
  { name: '我的等级', icon: '📊', color: '#F0F5FF' }
]

const merchantItems = [
  { name: '客服接待', icon: '🎧' },
  { name: '订单核销', icon: '✅' },
  { name: '统计管理', icon: '📉' }
]

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

const handleMember = () => {
  uni.showToast({ title: '会员功能开发中' })
}
</script>

<style scoped lang="scss">
.admin-decoration-user {
  padding: 0;
  background-color: transparent;
  min-height: auto;
  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: 100;
}

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

.btn-primary {
  background-color: #2d8cf0;
  padding: 6px 20px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-txt { color: #fff; font-size: 14px; }

.content-container {
  flex: 1;
  padding: 0;
  margin-top: 20px;
}

.main-card {
  display: flex;
  flex-direction: row;
  min-height: 800px;
  background-color: #fff;
  border-radius: 4px;
}

/* 左侧预览区 */
.preview-panel {
  width: 420px;
  padding: 40px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  border-right: 1px solid #f0f0f0;
}

.phone-mockup {
  width: 320px;
  height: 640px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.phone-body { height: 100%; }

/* 样式1&2 头部渐变 */
.user-header-gradient {
  background: linear-gradient(135deg, #eb3c2d 0%, #ff5e5e 100%);
  padding: 25px 0 12px;
  position: relative;
}

.header-top { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
  margin-bottom: 20px; 
  padding: 0 15px;
}
.avatar-box { width: 50px; height: 50px; border-radius: 25px; border: 2px solid rgba(255,255,255,0.8); overflow: hidden; margin-right: 12px; }
.avatar-img { width: 100%; height: 100%; }

.user-info { flex: 1; display: flex; flex-direction: column; }
.user-name { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.bind-phone { background-color: rgba(0,0,0,0.15); align-self: flex-start; padding: 2px 8px; border-radius: 10px; }
.bind-txt { color: #fff; font-size: 10px; }

.header-icons { display: flex; flex-direction: row; gap: 15px; padding: 0 15px; }
.ic-msg, .ic-set { font-size: 16px; color: #fff; position: relative; }
.msg-dot { position: absolute; top: -5px; right: -5px; background-color: #fff; color: #f2270c; font-size: 9px; width: 12px; height: 12px; border-radius: 6px; text-align: center; }

.stats-row { display: flex; flex-direction: row; justify-content: space-around; padding: 10px 15px; margin-bottom: 0; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.stat-label { font-size: 10px; color: rgba(255,255,255,0.8); }

/* 会员卡 样式1 */
.member-card-s1 {
  background: linear-gradient(90deg, #fdf1d6 0%, #fbd795 100%);
  margin: 12px 10px 4px;
  border-radius: 12px;
  padding: 15px 16px;
}
.mc-content-s1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.mc-txt { font-size: 11px; color: #7c581c; margin-left: 6px; }
.mc-btn { font-size: 10px; color: #7c581c; font-weight: bold; }

/* 会员卡 样式2 */
.member-card-s2 {
  background-color: rgba(255,255,255,0.25);
  margin: 12px 10px 4px;
  border-radius: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,0.3);
}
.mc-content-s2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.mc-info-col { display: flex; flex-direction: column; margin-left: 8px; }
.mc-t1 { font-size: 11px; color: #fff; font-weight: bold; }
.mc-t2 { font-size: 9px; color: rgba(255,255,255,0.8); }
.mc-btn-white { background-color: #fff; color: #f2270c; font-size: 10px; padding: 4px 12px; border-radius: 12px; font-weight: bold; }

/* 样式3 头部 */
.user-header-s3 { 
  background-color: #fff; 
  padding: 30px 15px 0;
}
.header-top-s3 { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: flex-start;
  margin-bottom: 25px;
}
.header-top-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.avatar-box-s3 { 
  width: 54px; 
  height: 54px; 
  border-radius: 27px; 
  overflow: hidden; 
  margin-right: 12px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
}
.user-info-s3 { 
  display: flex; 
  flex-direction: column; 
}
.user-name-s3 { 
  font-size: 16px; 
  font-weight: bold; 
  color: #333; 
  margin-bottom: 6px; 
}
.bind-phone-s3 { 
  display: flex;
}
.bind-txt-s3 { 
  color: #999; 
  font-size: 11px; 
}

.header-icons-s3 { 
  display: flex; 
  flex-direction: row; 
  gap: 15px; 
  padding-top: 5px;
}
.ic-msg-s3, .ic-set-s3 { 
  font-size: 18px; 
  color: #333; 
  position: relative; 
}
.msg-dot-s3 { 
  position: absolute; 
  top: -6px; 
  right: -6px; 
  background-color: #f2270c; 
  color: #fff; 
  font-size: 9px; 
  width: 14px; 
  height: 14px; 
  border-radius: 7px; 
  text-align: center; 
  line-height: 14px;
}

.stats-row-s3 { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
  padding: 10px 0 20px; 
}
.stat-val-s3 { 
  font-size: 18px; 
  font-weight: bold; 
  color: #333; 
  margin-bottom: 5px; 
}
.stat-label-s3 { 
  font-size: 11px; 
  color: #999; 
}

.member-card-s3 {
  background: #282828;
  margin: 12px 10px;
  border-radius: 12px;
  padding: 18px 16px;
}
.mc-content-s3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.mct-left-s3 { 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
}
.mct-ic-s3 { 
  font-size: 18px; 
  margin-right: 8px; 
}
.mct-txt-s3 { 
  color: #fbd795; 
  font-size: 14px; 
  font-weight: bold; 
}
.mct-right-s3 {
  display: flex;
}
.mct-more-s3 { 
  color: #fbd795; 
  font-size: 11px; 
  opacity: 0.8; 
}

/* 通用区块间卡片 */
.section-card {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  padding: 15px;
}

.section-header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 15px; }
.sh-title { font-size: 13px; font-weight: bold; color: #333; }
.sh-more { font-size: 11px; color: #999; }

.order-grid { display: flex; flex-direction: row; justify-content: space-between; }
.grid-item { display: flex; flex-direction: column; align-items: center; }
.gi-ic { font-size: 20px; margin-bottom: 6px; }
.gi-txt { font-size: 10px; color: #666; }

.ad-box { background-color: #fff; margin: 10px; border-radius: 8px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px dashed #eee; }
.ad-txt { font-size: 12px; color: #999; }

.service-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
.grid-item-s { width: 25%; display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; }
.gi-ic-box-s { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.gi-ic-s { font-size: 16px; }
.gi-txt-s { font-size: 10px; color: #666; }

.merchant-grid { display: flex; flex-direction: row; gap: 40px; }
.grid-item-m { display: flex; flex-direction: column; align-items: center; }
.gi-ic-m { font-size: 20px; margin-bottom: 6px; }
.gi-txt-m { font-size: 10px; color: #666; }

/* 右侧设置区 */
.settings-panel { flex: 1; padding: 30px; }
.group-title { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.title-line { width: 3px; height: 16px; background-color: #2d8cf0; margin-right: 10px; }
.title-txt { font-size: 15px; font-weight: bold; color: #333; }

.setting-item-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.item-label { font-size: 14px; color: #666; margin-right: 20px; }

.radio-group { display: flex; flex-direction: row; gap: 30px; }
.radio-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; }
.radio-dot { width: 16px; height: 16px; border: 1px solid #dcdfe6; border-radius: 8px; margin-right: 8px; position: relative; }
.radio-dot.active { border-color: #2d8cf0; }
.radio-dot.active::after { content: ''; width: 8px; height: 8px; background-color: #2d8cf0; border-radius: 4px; position: absolute; top: 3px; left: 3px; }
.radio-txt { font-size: 14px; color: #333; }

.mt-20 { margin-top: 20px; }

.anim-fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
