<script setup lang="ts">
import { ArrowRight, Box, CircleCheck, Loading, Right, Service } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { promotionConfig } from '@/config/constants.ts';
import { useUserStore } from '@/stores';
import { showContactUs } from '@/utils/contact-us.ts';

interface PackageItem {
  id: number;
  name: string;
  desc: string;
  price: number;
  originalPrice?: number;
  perMonth?: number;
  tag: string;
  discount: string;
  goodsName: string;
  discountAmount?: number;
  goodsType?: any;
}

interface BenefitItem {
  name: string;
  value: string;
}

const props = defineProps<{
  packageType: 'member' | 'token';
  packages: PackageItem[];
  selectedId: number | null;
  selectedPrice: number;
  isLoading: boolean;
  isLoadingGoods: boolean;
  benefits: BenefitItem[];
  benefitsExtra?: BenefitItem[];
  isMobile: boolean;
}>();

const emit = defineEmits<{
  (e: 'select-package', pkg: PackageItem): void;
  (e: 'pay'): void;
  (e: 'view-details'): void;
  (e: 'login'): void;
}>();

const userStore = useUserStore();

function selectPackage(pkg: PackageItem) {
  emit('select-package', pkg);
}

function handlePay() {
  emit('pay');
}

function handleLogin() {
  emit('login');
}

function toggleDetails() {
  emit('view-details');
}

function contactService() {
  showContactUs({ scenario: 'regular' });
}

function goToModelLibrary() {
  window.location.href = '/model-library';
}

const selectedPackage = computed(() => {
  return props.packages.find(pkg => pkg.id === props.selectedId);
});
</script>

<template>
  <!-- 移动端布局 -->
  <div v-if="isMobile" class="mobile-layout">
    <!-- 商品加载状态 -->
    <div v-if="isLoadingGoods" class="loading-container">
      <el-icon class="is-loading" :size="40">
        <Loading />
      </el-icon>
      <p>加载商品中...</p>
    </div>

    <!-- 套餐卡片列表 -->
    <div v-else-if="packages.length > 0" class="package-list">
      <div
        v-for="pkg in packages" :key="pkg.id" class="package-card"
        :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
      >
        <!-- 标签 -->
        <div v-if="pkg.discount" class="discount-tag">
          {{ pkg.discount }}
        </div>
        <div v-if="pkg.tag" class="tag">
          {{ pkg.tag }}
        </div>

        <!-- 套餐信息 -->
        <div class="package-info">
          <div class="package-name">
            {{ pkg.name }}
          </div>
          <div class="package-desc">
            {{ pkg.desc }}
          </div>
        </div>

        <!-- 价格区域 -->
        <div class="package-price">
          <!-- Token套餐价格展示 -->
          <template v-if="packageType === 'token'">
            <!-- 1. 官方参考价 -->
            <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
              <div class="price-label-row">
                <span class="label-text">❌ 官方参考价</span>
              </div>
              <div class="official-price">
                ¥{{ pkg.perMonth.toFixed(2) }}
              </div>
            </div>

            <!-- 2. 平台优惠价 -->
            <div v-if="pkg.originalPrice" class="platform-price-section">
              <div class="price-label-row">
                <span class="label-text main-label">⭐ 意心平台优惠价</span>
              </div>
              <div class="platform-price main-price">
                ¥{{ pkg.originalPrice.toFixed(2) }}
              </div>
            </div>

            <!-- 3. 个人优惠券 -->
            <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
              <div class="coupon-header">
                <span class="coupon-icon">🎁</span>
                <span class="coupon-title">您的个人尊享优惠券</span>
              </div>
              <div class="coupon-amount">
                -¥{{ pkg.discountAmount.toFixed(2) }}
              </div>
            </div>

            <!-- 4. 总优惠提示 -->
            <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
              <span class="bar-icon">🎉</span>
              <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
            </div>
          </template>

          <!-- 会员套餐价格展示 -->
          <template v-else>
            <div class="current-price-section">
              <span class="price-label">会员价</span>
              <div class="price-row">
                <span class="price">¥{{ pkg.price }}</span>
                <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
              </div>
            </div>
            <div v-if="pkg.discount" class="discount-info">
              <el-icon class="discount-icon">
                <CircleCheck />
              </el-icon>
              <span class="discount-text">{{ pkg.discount }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 权益预览 -->
    <div class="benefits-preview">
      <div class="cards-stack">
        <!-- Token包累计充值优惠提示 -->
        <div v-if="packageType === 'token'" class="recharge-tip-card">
          <div class="tip-icon">
            💝
          </div>
          <div class="tip-content">
            <div class="tip-title">
              累计充值优惠
            </div>
            <div class="tip-desc">
              充值越多，优惠越多，长期使用更划算
            </div>
          </div>
        </div>

        <!-- 联系客服卡片 -->
        <div class="contact-service-card">
          <div class="service-info">
            <p class="discount-text">
              {{ promotionConfig.rechargeDiscount }}
            </p>
            <p class="tip-text">
              {{ promotionConfig.vipServiceTip }}
            </p>
          </div>
          <el-button
            type="success"
            size="small"
            class="contact-btn"
            @click="contactService"
          >
            <el-icon class="mr-1">
              <Service />
            </el-icon>
            联系客服
          </el-button>
        </div>
      </div>

      <div class="section-title mt-4">
        专属权益
      </div>
      <ul class="benefits-list">
        <li v-for="(b, index) in benefits" :key="index" class="benefit-item">
          <span class="dot"><el-icon><CircleCheck /></el-icon></span>
          <span>
            <span class="benefit-name">{{ b.name }}</span>
            <span v-if="b.value">：{{ b.value }}</span>
          </span>
        </li>
      </ul>

      <!-- 会员套餐显示模型库入口 -->
      <div v-if="packageType === 'member'" class="model-library-section">
        <el-divider />
        <div class="model-library-card">
          <div class="card-icon">
            <el-icon :size="32">
              <Box />
            </el-icon>
          </div>
          <div class="card-content">
            <h4 class="card-title">
              查看支持的模型
            </h4>
            <p class="card-desc">
              查看意心AI支持的所有模型列表及详细信息
            </p>
          </div>
          <el-button
            type="primary"
            class="goto-btn"
            @click="goToModelLibrary"
          >
            前往模型库
            <el-icon class="ml-1">
              <Right />
            </el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 支付区域 -->
    <div class="payment-area">
      <div class="payment-info">
        <div class="actual-payment">
          <span>实际支付：</span>
          <span class="price">¥{{ selectedPrice || 0 }}</span>
        </div>
        <el-button text type="primary" class="view-details-btn" @click="toggleDetails">
          了解更多
        </el-button>
        <el-button
          v-if="userStore.userInfo"
          type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
          @click="handlePay"
        >
          立即支付
        </el-button>
        <el-button
          v-else
          type="primary" class="pay-button"
          @click="handleLogin"
        >
          立即登录/注册
        </el-button>
      </div>
      <div class="note-text">
        可叠加购买次数，过期时间以最后订单为准。<br>
        最终解释权归YiXinAI所有。
      </div>
    </div>
  </div>

  <!-- 桌面端布局 -->
  <div v-else class="flex gap-6 desktop-layout">
    <!-- 商品加载状态 -->
    <div v-if="isLoadingGoods" class="loading-container-desktop">
      <el-icon class="is-loading" :size="50">
        <Loading />
      </el-icon>
      <p>加载商品中...</p>
    </div>

    <!-- 左栏：套餐卡片 + 支付 -->
    <div v-else class="w-[60%] flex flex-col justify-between">
      <div class="flex flex-wrap gap-4 package-cards-container">
        <div
          v-for="pkg in packages" :key="pkg.id" class="package-card"
          :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
        >
          <!-- 标签 -->
          <div v-if="pkg.tag" class="tag">
            {{ pkg.tag }}
          </div>

          <!-- 套餐信息 -->
          <div class="package-info">
            <div class="package-name">
              {{ pkg.name }}
            </div>
            <div class="package-desc">
              {{ pkg.desc }}
            </div>
          </div>

          <!-- 价格区域 -->
          <div class="package-price">
            <template v-if="packageType === 'token'">
              <!-- 1. 官方参考价 -->
              <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
                <div class="price-label-row">
                  <span class="label-text">❌ 官方参考价：</span>
                  <span class="label-text-number">¥{{ pkg.perMonth.toFixed(2) }}</span>
                </div>
              </div>

              <!-- 2. 平台优惠价 -->
              <div v-if="pkg.originalPrice" class="platform-price-section">
                <div class="price-label-row">
                  <span class="label-text main-label">⭐ 意心平台优惠价</span>
                </div>
                <div class="platform-price main-price">
                  ¥{{ pkg.originalPrice.toFixed(2) }}
                </div>
              </div>

              <!-- 3. 个人优惠券 -->
              <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
                <div class="coupon-header">
                  <span class="coupon-icon">🎁</span>
                  <span class="coupon-title">您的个人尊享优惠券</span>
                </div>
                <div class="coupon-amount">
                  -¥{{ pkg.discountAmount.toFixed(2) }}
                </div>
              </div>
            </template>

            <!-- 会员套餐 -->
            <template v-else>
              <div class="current-price-section">
                <span class="price-label">会员价</span>
                <div class="price-row">
                  <span class="price">¥{{ pkg.price }}</span>
                  <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
                </div>
              </div>
              <div v-if="pkg.discount" class="discount-info">
                <el-icon class="discount-icon">
                  <CircleCheck />
                </el-icon>
                <span class="discount-text">{{ pkg.discount }}</span>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- Token包累计充值优惠提示 -->
      <div v-if="packageType === 'token'" class="recharge-tip-card">
        <div class="tip-icon">
          💝
        </div>
        <div class="tip-content">
          <div class="tip-title">
            累计充值优惠
          </div>
          <div class="tip-desc">
            {{ selectedPackage?.discount }}
          </div>
        </div>
      </div>

      <!-- 联系客服卡片 -->
      <div class="contact-service-card">
        <div class="service-info">
          <p class="discount-text">
            {{ promotionConfig.rechargeDiscount }}
          </p>
          <p class="tip-text">
            {{ promotionConfig.vipServiceTip }}
          </p>
        </div>
        <el-button
          type="success"
          size="small"
          class="contact-btn"
          @click="contactService"
        >
          <el-icon class="mr-1">
            <Service />
          </el-icon>
          联系客服
        </el-button>
      </div>

      <!-- 支付按钮 -->
      <div class="payment-section">
        <div class="payment-action">
          <div class="actual-payment">
            <span>实际支付：</span>
            <span class="price">¥{{ selectedPrice || 0 }}</span>
          </div>
          <div>
            <el-button class="pay-button" text type="primary" @click="toggleDetails">
              了解更多
            </el-button>
            <el-button
              v-if="userStore.userInfo"
              type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
              class="pay-button" @click="handlePay"
            >
              立即支付
            </el-button>
            <el-button
              v-else
              type="primary" size="large"
              class="pay-button" @click="handleLogin"
            >
              立即登录/注册
            </el-button>
          </div>
        </div>
        <div class="note-text">
          可叠加购买次数，过期时间以最后订单为准。<br>
          最终解释权归YiXinAI所有。
        </div>
      </div>
    </div>

    <!-- 右栏：套餐权益 -->
    <div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
      <div>
        <div v-if="packageType === 'member'">
          <div class="section-title">
            会员权益
          </div>
          <ul class="benefits-list">
            <li v-for="(b, index) in benefits" :key="index" class="benefit-item">
              <span class="dot"><el-icon><CircleCheck /></el-icon></span>
              <span>
                <span class="benefit-name">{{ b.name }}</span>
                <span v-if="b.value">：{{ b.value }}</span>
              </span>
            </li>
          </ul>
        </div>
        <div v-if="packageType === 'token'">
          <div class="section-title">
            尊享Token包权益
          </div>
          <ul class="benefits-list">
            <li v-for="(b, index) in benefits" :key="index" class="benefit-item">
              <span class="dot"><el-icon><CircleCheck /></el-icon></span>
              <span>
                <span class="benefit-name">{{ b.name }}</span>
                <span v-if="b.value">：{{ b.value }}</span>
              </span>
            </li>
          </ul>
          <br>
          <div v-if="benefitsExtra" class="section-title">
            尊享Token包用途
          </div>
          <ul v-if="benefitsExtra" class="benefits-list">
            <li v-for="(b, index) in benefitsExtra" :key="index" class="benefit-item">
              <span class="dot"><el-icon><CircleCheck /></el-icon></span>
              <span>
                <span class="benefit-name">{{ b.name }}</span>
                <span v-if="b.value">：{{ b.value }}</span>
              </span>
            </li>
          </ul>
        </div>
        <div v-if="packageType === 'member'" class="extra-description">
          <!-- 查看模型库按钮 -->
          <div class="model-library-section-mobile">
            <el-divider />
            <div class="model-library-card-mobile">
              <div class="card-header-mobile">
                <el-icon :size="24">
                  <Box />
                </el-icon>
                <h4 class="card-title-mobile">
                  查看支持的模型
                </h4>
              </div>
              <p class="card-desc-mobile">
                查看意心AI支持的所有模型列表及详细信息
              </p>
              <el-button
                type="primary"
                class="goto-btn-mobile"
                block
                @click="goToModelLibrary"
              >
                前往模型库
                <el-icon class="ml-1">
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="view-details" />
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;

  p {
    margin-top: 16px;
    font-size: 14px;
  }
}

.loading-container-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
  color: #909399;

  p {
    margin-top: 20px;
    font-size: 16px;
  }
}

/* 联系客服卡片 */
.contact-service-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  padding: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
  border-radius: 8px;
  border: 1px solid #fbbf24;
}

/* 移动端样式 */
.mobile-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .package-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;

    /* 优化滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 2px;

      &:hover {
        background: #94a3b8;
      }
    }
  }

  .package-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s;
    cursor: pointer;

    &.selected {
      border: 3px solid #fde19d;
      background-image: url('@/assets/images/product_background.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom;
      box-shadow: 0 4px 6px -1px #fff4e3;
    }

    .discount-tag {
      position: absolute;
      top: -6px;
      left: 8px;
      background-color: #ef4444;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .tag {
      position: absolute;
      top: -6px;
      right: 8px;
      background-color: #f97316;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .package-info {
      margin-bottom: 12px;

      .package-name {
        font-size: 16px;
        font-weight: 600;
      }

      .package-desc {
        font-size: 12px;
        color: #6b7280;
      }
    }

    .package-price {
      display: flex;
      flex-direction: column;
      gap: 8px;

      // 当前价格
      .current-price-section {
        .price-label {
          font-size: 12px;
          color: #6b7280;
          display: block;
          margin-bottom: 4px;
        }

        .price-row {
          display: flex;
          align-items: baseline;
          gap: 6px;
        }

        .price {
          font-size: 24px;
          font-weight: 700;
          color: #f97316;
        }

        .per-month {
          font-size: 12px;
          color: #6b7280;
        }
      }

      // 优惠说明
      .discount-info {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        border-radius: 6px;
        font-size: 11px;
        color: #1e40af;
        line-height: 1.4;

        .discount-icon {
          color: #3b82f6;
          flex-shrink: 0;
          font-size: 14px;
        }

        .discount-text {
          flex: 1;
        }
      }

      // Token套餐价格展示 - 移动端
      .official-price-section {
        padding: 6px 10px;
        background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
        border-radius: 6px;
        border: 1px solid #fecdd3;

        .price-label-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 3px;

          .label-text {
            font-size: 11px;
            color: #9f1239;
            font-weight: 600;
          }
        }

        .official-price {
          font-size: 16px;
          font-weight: 700;
          color: #be123c;
          text-decoration: line-through;
          text-decoration-thickness: 2px;
        }
      }

      .platform-price-section {
        padding: 8px 10px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-radius: 6px;
        border: 1px solid #fbbf24;

        .price-label-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 3px;

          .label-text {
            font-size: 11px;
            color: #78350f;
            font-weight: 600;
          }
        }

        .platform-price {
          font-size: 18px;
          font-weight: 700;
          color: #b45309;
        }
      }

      .coupon-card {
        padding: 8px 10px;
        background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
        border-radius: 6px;
        border: 1px dashed #fb923c;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .coupon-header {
          display: flex;
          align-items: center;
          gap: 4px;

          .coupon-icon {
            font-size: 14px;
          }

          .coupon-title {
            font-size: 10px;
            color: #78350f;
            font-weight: 600;
          }
        }

        .coupon-amount {
          font-size: 16px;
          font-weight: 700;
          color: #ea580c;
        }
      }

      .total-discount-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px;
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        border-radius: 8px;
        border: 1px solid #34d399;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);

        .bar-icon {
          font-size: 14px;
        }

        .bar-text {
          font-size: 11px;
          font-weight: 700;
          color: #065f46;
        }
      }
    }
  }

  /* 移动端卡片堆叠容器 */
  .cards-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  // 累计充值优惠提示卡片样式
  .recharge-tip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 12px;
    border: 1px solid #fcd34d;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
    }

    .tip-icon {
      font-size: 24px;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    }

    .tip-content {
      flex: 1;

      .tip-title {
        font-size: 14px;
        font-weight: 700;
        color: #92400e;
        margin-bottom: 4px;
      }

      .tip-desc {
        font-size: 12px;
        color: #b45309;
        line-height: 1.4;
      }
    }
  }

  /* 联系客服卡片优化 */
  .contact-service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    border: 1px solid #6ee7b7;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
    margin-top: 0; /* 由父容器控制间距 */

    .service-info {
      flex: 1;
      margin-right: 12px;

      .discount-text {
        color: #047857;
        font-weight: 800;
        font-size: 14px;
        margin: 0 0 4px 0;
      }

      .tip-text {
        margin: 0;
        color: #065f46;
        font-size: 12px;
        line-height: 1.4;
      }
    }

    .contact-btn {
      flex-shrink: 0;
      background-color: #10b981;
      border-color: #10b981;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);

      &:hover {
        background-color: #059669;
        border-color: #059669;
      }
    }
  }

  .benefits-preview {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    max-height: 320px;
    overflow-y: auto;

    /* 优化滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 2px;

      &:hover {
        background: #94a3b8;
      }
    }

    .section-title {
      font-weight: 600;
      margin-bottom: 12px;
    }

    .benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;

      .benefit-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 6px;
        font-size: 13px;
        color: #4b5563;
        white-space: normal;
        line-height: 1.4;

        .dot {
          color: #f97316;
          margin-right: 6px;
          margin-top: 2px;
        }

        .benefit-name {
          font-weight: 500;
        }
      }
    }

    .model-library-section {
      margin-top: 12px;

      .model-library-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
        border-radius: 10px;
        border: 2px solid #bae6fd;
        transition: all 0.3s;

        &:hover {
          border-color: #667eea;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
          transform: translateY(-2px);
        }

        .card-icon {
          display: none;
        }

        .card-content {
          flex: 1;
          text-align: center;

          .card-title {
            margin: 0 0 8px 0;
            font-size: 15px;
            font-weight: 700;
            color: #1a1a1a;
          }

          .card-desc {
            margin: 0 0 12px 0;
            font-size: 13px;
            color: #606266;
            line-height: 1.5;
          }
        }

        .goto-btn {
          flex-shrink: 0;
          font-weight: 600;
          width: 100%;

          .ml-1 {
            margin-left: 4px;
          }
        }
      }
    }

    .view-details-btn {
      width: 100%;
      margin-top: 16px;
      justify-content: flex-end;
    }
  }

  .payment-area {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;

    .agreement-text {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .payment-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .actual-payment {
        .price {
          font-size: 18px;
          font-weight: 700;
          color: #f97316;
        }
      }

      .pay-button {
        width: 120px;
      }
    }

    .note-text {
      font-size: 12px;
      color: #9ca3af;
    }
  }
}

/* 桌面端样式 */
.desktop-layout {
  .package-cards-container {
    max-height: 500px;
    //overflow-y: auto;
    //overflow-x: hidden;
    padding-right: 8px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f5f5f5;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d0d7de;
      border-radius: 3px;

      &:hover {
        background: #a8b3c1;
      }
    }
  }

  .package-card {
    cursor: pointer;
    position: relative;
    width: calc(50% - 0.5rem);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(90deg, #f1f2ebb5, white);

    &.selected {
      border: 3px solid #fde19d;
      background-image: url('@/assets/images/product_background.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom;
      box-shadow: 0 4px 6px -1px #fff4e3;
    }

    .discount-tag {
      position: absolute;
      top: -6px;
      left: 8px;
      background-color: #ef4444;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .tag {
      position: absolute;
      top: -6px;
      right: 8px;
      background-color: #f97316;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .package-info {
      margin-bottom: 12px;

      .package-name {
        font-size: 16px;
        font-weight: 600;
      }

      .package-desc {
        font-size: 12px;
        color: #6b7280;
      }
    }

    .package-price {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;

      .current-price-section {
        .price-label {
          font-size: 13px;
          color: #6b7280;
          display: block;
          margin-bottom: 6px;
          font-weight: 500;
        }

        .price-row {
          display: flex;
          align-items: baseline;
          gap: 8px;
        }

        .price {
          font-size: 28px;
          font-weight: 700;
          color: #f97316;
        }

        .per-month {
          font-size: 13px;
          color: #6b7280;
        }
      }

      .discount-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        border-radius: 8px;
        font-size: 12px;
        color: #1e40af;
        line-height: 1.5;

        .discount-icon {
          color: #3b82f6;
          flex-shrink: 0;
          font-size: 16px;
        }

        .discount-text {
          flex: 1;
        }
      }

      // Token套餐价格展示 - 桌面端
      .official-price-section {
        padding: 4px 6px;
        background: linear-gradient(15deg, rgb(155, 155, 155) 0%, #999a9d 100%);
        border-radius: 8px;
        border: 1px solid rgba(156, 163, 175, 0.67);

        .price-label-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 4px;

          .label-text {
            font-size: 12px;
            color: #ffffff;
            font-weight: 700;
          }

          .label-text-number {
            font-size: 14px;
            color: #ffffff;
            font-weight: 700;
            text-decoration: line-through;
          }
        }

        .official-price {
          font-size: 20px;
          font-weight: 700;
          color: #be123c;
          text-decoration: line-through;
          text-decoration-thickness: 2px;
        }
      }

      .platform-price-section {
        padding: 10px 12px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-radius: 8px;
        border: 1px solid #fbbf24;

        .price-label-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 4px;

          .label-text {
            font-size: 12px;
            color: #78350f;
            font-weight: 700;
          }

          .save-tag {
            background: #dc2626;
            color: white;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 600;
          }
        }

        .platform-price {
          font-size: 22px;
          font-weight: 700;
          color: #b45309;
        }
      }

      .coupon-card {
        padding: 10px 12px;
        background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
        border-radius: 8px;
        border: 1px dashed #fb923c;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .coupon-header {
          display: flex;
          align-items: center;
          gap: 6px;

          .coupon-icon {
            font-size: 16px;
          }

          .coupon-title {
            font-size: 11px;
            color: #78350f;
            font-weight: 700;
          }
        }

        .coupon-amount {
          font-size: 20px;
          font-weight: 700;
          color: #ea580c;
        }
      }

      .total-discount-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        border-radius: 10px;
        border: 1px solid #34d399;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);

        .bar-icon {
          font-size: 16px;
        }

        .bar-text {
          font-size: 13px;
          font-weight: 700;
          color: #065f46;
        }
      }
    }
  }

  .recharge-tip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 12px;
    border: 1px solid #fcd34d;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.1);
    margin-top: 16px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
    }

    .tip-icon {
      font-size: 24px;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    }

    .tip-content {
      flex: 1;

      .tip-title {
        font-size: 14px;
        font-weight: 700;
        color: #92400e;
        margin-bottom: 4px;
      }

      .tip-desc {
        font-size: 12px;
        color: #b45309;
        line-height: 1.4;
      }
    }
  }

  .contact-service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    border: 1px solid #6ee7b7;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1);
    margin-top: 12px;

    .service-info {
      flex: 1;
      margin-right: 12px;

      .discount-text {
        color: #047857;
        font-weight: 800;
        font-size: 14px;
        margin: 0 0 4px 0;
      }

      .tip-text {
        margin: 0;
        color: #065f46;
        font-size: 12px;
        line-height: 1.4;
      }
    }

    .contact-btn {
      flex-shrink: 0;
      background-color: #10b981;
      border-color: #10b981;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);

      &:hover {
        background-color: #059669;
        border-color: #059669;
      }
    }
  }

  .payment-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 16px;

    .agreement-text {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .payment-action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .actual-payment {
        .price {
          font-size: 18px;
          font-weight: 700;
          color: #f97316;
        }
      }
    }

    .note-text {
      font-size: 12px;
      color: #9ca3af;
    }
  }

  .right-panel {
    .section-title {
      font-weight: 600;
      margin-bottom: 12px;
    }

    .benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;

      .benefit-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px;
        font-size: 14px;
        color: #4b5563;
        white-space: normal;

        .dot {
          color: #f97316;
          margin-right: 8px;
        }

        .benefit-name {
          font-weight: 500;
        }
      }
    }

    .extra-description {
      margin-top: 24px;

      .description-card {
        background-color: #f9fafb;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;

        .title {
          font-weight: 600;
          margin-bottom: 4px;
        }

        .subtext {
          font-size: 12px;
          color: #6b7280;
          line-height: 1.4;
        }
      }
    }

    .view-details {
      border-top: 1px solid #e5e7eb;
      padding-top: 16px;
      margin-top: 16px;
    }
  }

  /* 模型库卡片样式 - 移动端 */
  .model-library-section-mobile {
    margin-top: 16px;

    .model-library-card-mobile {
      padding: 16px;
      background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
      border-radius: 12px;
      border: 2px solid #bae6fd;
      transition: all 0.3s;

      .card-header-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;

        .el-icon {
          color: #667eea;
          background: white;
          padding: 8px;
          border-radius: 8px;
        }

        .card-title-mobile {
          margin: 0;
          font-size: 16px;
          font-weight: 700;
          color: #1a1a1a;
        }
      }

      .card-desc-mobile {
        margin: 0 0 12px 0;
        font-size: 13px;
        color: #606266;
        line-height: 1.5;
      }

      .goto-btn-mobile {
        font-weight: 600;

        .ml-1 {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
