<script setup lang="ts">
import type { GoodsItem } from '@/api/pay';
import { ElMessage } from 'element-plus';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { createOrder, getOrderStatus } from '@/api';
import { getGoodsList, GoodsCategoryType } from '@/api/pay';
import ProductPage from '@/pages/products/index.vue';
import { useUserStore } from '@/stores';
import ActivationGuide from './ActivationGuide.vue';
import NewbieGuide from './NewbieGuide.vue';
import PackageTab from './PackageTab.vue';

const emit = defineEmits(['close']);
const router = useRouter();

// 商品数据类型定义
interface PackageItem {
  id: number;
  name: string;
  desc: string;
  price: number; // 用户实际支付价格（最终专属价）
  originalPrice?: number; // 原价（官方价格）
  perMonth?: number; // 会员：月均价；Token：模型官方价格
  tag: string;
  discount: string; // 累计优惠描述，如"根据累加充值已优惠 ¥47.00"
  goodsName: string; // 用于创建订单
  discountAmount?: number; // 优惠金额（从discount字段解析）
  goodsType?: any; // 商品枚举
}

// 商品数据（从接口获取）
const packagesData = ref<{
  member: PackageItem[];
  token: PackageItem[];
}>({
  member: [],
  token: [],
});

const userStore = useUserStore();

const visible = ref(true);
const activeTab = ref('member');
const selectedId = ref<number | null>(null);
const selectedPrice = ref(0);
const selectPackageObject = ref<PackageItem | null>(null);
const showDetails = ref(false);
const isMobile = ref(false);
const isLoading = ref(false);
const isLoadingGoods = ref(false); // 商品加载状态
const paymentWindow = ref<Window | null>(null);
const pollInterval = ref<NodeJS.Timeout | null>(null);

function checkMobile() {
  isMobile.value = window.innerWidth < 768;
}

// 获取商品列表（逻辑不变，仅保留字段映射正确性）
async function fetchGoodsList() {
  isLoadingGoods.value = true;
  try {
    const [vipRes, tokenRes] = await Promise.all([
      getGoodsList(GoodsCategoryType.Vip),
      getGoodsList(GoodsCategoryType.PremiumPackage),
    ]);

    // 转换VIP商品数据
    packagesData.value.member = (vipRes.data || []).map((item: GoodsItem, index: number) => ({
      id: index + 1,
      name: item.goodsName,
      desc: '',
      price: item.goodsPrice,
      originalPrice: item.originalPrice !== item.goodsPrice ? item.originalPrice : undefined,
      perMonth: item.referencePrice,
      tag: item.remark || '',
      discount: item.discountDescription || '',
      goodsName: item.goodsName,
      goodsType: item.goodsType,
    }));

    // 转换Token商品数据（字段含义保持原定义）
    packagesData.value.token = (tokenRes.data || []).map((item: GoodsItem, index: number) => {
      let discountAmount = 0;
      if (item.discountDescription) {
        const match = item.discountDescription.match(/¥([\d.]+)/);
        if (match) {
          discountAmount = Number.parseFloat(match[1]);
        }
      }

      return {
        id: index + 100, // 避免ID冲突
        name: item.goodsName,
        desc: '',
        price: item.goodsPrice, // 用户专属价格（最终支付价格）
        originalPrice: item.originalPrice, // 意心平台优惠价（主价格）
        perMonth: item.referencePrice, // 模型官方价格
        tag: item.remark || '',
        discount: item.discountDescription || '',
        goodsName: item.goodsName,
        goodsType: item.goodsType,
        discountAmount,
      };
    });

    // 设置默认选中第一个会员套餐
    if (packagesData.value.member.length > 0) {
      const defaultPackage = packagesData.value.member[0];
      selectedId.value = defaultPackage.id;
      selectedPrice.value = defaultPackage.price;
      selectPackageObject.value = defaultPackage;
    }
  }
  catch (error) {
    console.error('获取商品列表失败:', error);
    ElMessage.error('获取商品列表失败，请刷新重试');
  }
  finally {
    isLoadingGoods.value = false;
  }
}

onMounted(() => {
  checkMobile();
  window.addEventListener('resize', checkMobile);
  fetchGoodsList();
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkMobile);
  cleanupPayment();
});

// 支付相关逻辑（无修改）
function cleanupPayment() {
  if (pollInterval.value) {
    clearInterval(pollInterval.value);
    pollInterval.value = null;
  }
  retryCount = 0;
}

const tabs = [
  { key: 'member', label: '会员套餐' },
  { key: 'token', label: '尊享Token包' },
  { key: 'newbie', label: '新人特惠' },
  { key: 'activation', label: '激活码' },
];

const benefitsData = {
  member: [
    { name: '站点全模型解锁使用', value: '' },
    { name: '全站所有Ai日常“无限制”使用，（除尊享外）', value: '' },
    { name: 'Ai专线超级加速', value: '' },
    { name: '专属Api接口提供', value: '' },
    { name: '支持文件/图片/知识库功能', value: '' },
    { name: '支持各类第三方工具集成（IDE/翻译/Utools等）', value: '' },
    { name: '支持Mcp/FunctionCall开发', value: '' },
    { name: '支持安卓/ios/web/客户端使用', value: '' },
    { name: '支持售后群服务，一起畅玩前沿Ai', value: '' },
    { name: '如果需大量使用Agent，请选择尊享Token包', value: '' },
  ],
  token: [
    { name: '超值优惠', value: '相比官方价格，我们的价格更实惠' },
    { name: '灵活计费', value: '按调用量扣费，用多少付多少' },
    { name: '支持多模型', value: '适配多种主流AI模型' },
    { name: 'Token用途', value: '用于调用API或模型生成内容' },
    { name: '永久有效', value: 'Token永不过期，随时使用' },
  ],
};
const benefitsData2 = {
  qy: [
    { name: '需先成为意心会员后方可购买使用', value: '' },
    { name: '意心会员过期后，尊享Token包会临时冻结', value: '' },
    { name: '尊享Token = 实际消耗Token * 当前模型倍率，模型倍率可前往【模型库】查看', value: '' },
    { name: 'Token长期有效，无限流限制', value: '' },
    { name: '几乎是全网最低价，让人人用的起Agent', value: '' },
    { name: '附带claude code独家教程，手把手对接', value: '' },
    { name: '一手直连！非跑路！非套壳！非黑产！（行业普遍现象）', value: '' },
    { name: '橙子老哥担保，拒绝套路、拒绝跑路，可进售后群', value: '' },
  ],
  yt: [
    { name: '可全站解锁claude4.5地表编程最强模型', value: '' },
    { name: '可直接接入claude code地表编程最强模Agent工具', value: '' },
    { name: '可暴力使用claude4.5，无黑名单限流机制', value: '' },
    { name: '可使用claude接口/openai接口格式，接入claude4.5', value: '' },
  ],
};

const fullBenefitsData = {
  member: [
    { category: 'YiXinAI AI Pro', free: '1项', vip: '5项', value: '价值68/月' },
    { category: '基础对话', free: '3条/天', vip: '不限条款', value: 'DeepSeek-R1 32b蒸馏版、AI-4o mini' },
    { category: '高级对话', free: '-', vip: '400条/月', value: 'DeepSeek-R1 671b满血版、4o、Cd3.5s、Code、文档对话' },
    { category: 'AI基础绘画', free: '-', vip: '500条/月', value: '' },
    { category: 'AI高级绘画', free: '-', vip: '50条/月', value: '' },
    { category: 'AI-4.0联网搜索', free: '-', vip: '支持', value: '' },
    { category: 'AI PPT', free: '1项', vip: '12项', value: '价值99/月' },
    { category: 'AI 思维导图', free: '1项', vip: '8项', value: '价值99/月' },
    { category: '文档对话', free: '0项', vip: '6项', value: '价值99/月' },
    { category: 'AI 绘图', free: '0项', vip: '5项', value: '价值99/月' },
    { category: 'AI 写作', free: '1项', vip: '6项', value: '价值99/月' },
  ],
};

const currentPackages = computed(() => packagesData.value[activeTab.value as 'member' | 'token']);
const currentBenefits = computed(() => benefitsData[activeTab.value]);

function selectPackage(pkg: any) {
  selectedId.value = pkg.id;
  selectedPrice.value = pkg.price;
  selectPackageObject.value = pkg;
}

watch(activeTab, () => {
  if (activeTab.value === 'activation') {
    return;
  }
  const packages = packagesData.value[activeTab.value as 'member' | 'token'];
  if (packages && packages.length > 0) {
    const firstPackage = packages[0];
    selectedId.value = firstPackage.id;
    selectedPrice.value = firstPackage.price;
    selectPackageObject.value = firstPackage;
  }
});

function handleClickLogin() {
  userStore.openLoginDialog();
}

async function pay() {
  if (!selectedId.value || !selectPackageObject.value) {
    ElMessage.warning('请选择一个套餐');
    return;
  }

  isLoading.value = true;
  try {
    const returnUrl = `${window.location.origin}/pay-result`;
    const params = {
      GoodsType: selectPackageObject.value.goodsType,
      ReturnUrl: returnUrl,
    };

    const response = await createOrder(params);
    if (response.data.paymentPageHtml) {
      handlePaymentPage(response.data.paymentPageHtml, response.data.orderId, response.data.outTradeNo);
    }
    else {
      throw new Error('未获取到支付页面');
    }
  }
  catch (error: any) {
    console.error('支付失败:', error);
    ElMessage.error(`支付失败: ${error.message || '未知错误'}`);
  }
  finally {
    isLoading.value = false;
  }
}

function handlePaymentPage(html: string, orderId: string, outTradeNo: string) {
  close();
  paymentWindow.value = window.open('', '_blank');
  if (!paymentWindow.value) {
    ElMessage.error('无法打开支付窗口，请检查浏览器弹窗设置或允许弹窗');
    return;
  }

  paymentWindow.value.document.open();
  paymentWindow.value.document.write(html);
  setTimeout(() => {
    startPolling(outTradeNo);
  }, 3000);
}

function startPolling(outTradeNo: string) {
  cleanupPayment();
  checkPaymentStatus(outTradeNo);
  pollInterval.value = setInterval(() => {
    checkPaymentStatus(outTradeNo);
  }, 3000);
}

let retryCount = 0;
async function checkPaymentStatus(outTradeNo: string) {
  try {
    const result = await getOrderStatus(outTradeNo);
    if (result.data.tradeStatus === 'TRADE_SUCCESS') {
      cleanupPayment();
      ElMessage.success('支付成功！');
      close();
    }
    else if (result.data.tradeStatus === 'TRADE_CLOSED' || result.data.tradeStatus === 'TRADE_FAILED') {
      cleanupPayment();
      ElMessage.warning(`支付失败: ${result.data.tradeStatusDesc || '未知原因'}`);
    }
  }
  catch (error) {
    console.error('检查订单状态失败:', error);
    if (retryCount > 3) {
      cleanupPayment();
      ElMessage.error('检查支付状态失败，请手动刷新页面确认');
    }
    retryCount++;
  }
}

function toggleDetails() {
  showDetails.value = !showDetails.value;
}

function close() {
  visible.value = false;
  emit('close');
}

function onClose() {
  emit('close');
}

function goToActivation() {
  close();
  // 使用 router 进行跳转，避免完整页面刷新
  setTimeout(() => {
    router.push('/console/activation');
  }, 300); // 等待对话框关闭动画完成
}
</script>

<template>
  <el-dialog
    v-model="visible" :width="isMobile ? '90%' : '1000px'" :fullscreen="isMobile && showDetails"
    :show-close="false" destroy-on-close class="product-package-dialog" @close="onClose"
  >
    <!-- 详情页（无修改） -->
    <div v-if="showDetails" class="details-view">
      <div class="flex items-center mb-6 sticky top-0 bg-white z-10 pt-2 pb-4">
        <el-button text circle size="small" class="mr-2" @click="toggleDetails">
          ←
        </el-button>
        <div class="text-xl font-bold">
          YiXinAI会员详细权益
        </div>
      </div>
      <ProductPage />
      <div v-if="false" class="benefits-table">
        <div class="table-header">
          <div class="table-cell">
            服务项
          </div>
          <div class="table-cell">
            免费用户
          </div>
          <div class="table-cell">
            AI大会员
          </div>
        </div>
        <div v-for="(item, index) in fullBenefitsData.member" :key="index" class="table-row">
          <div class="table-cell font-medium">
            {{ item.category }}
          </div>
          <div class="table-cell">
            {{ item.free }}
          </div>
          <div class="table-cell">
            <div>{{ item.vip }}</div>
            <div v-if="item.value" class="text-gray-500 text-xs">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主页面 -->
    <div v-else>
      <!-- 顶部标题和关闭按钮（无修改） -->
      <div class="flex justify-between items-center mb-4">
        <div class="text-xl font-bold">
          购买套餐
        </div>
        <el-button circle size="small" @click="close">
          ✕
        </el-button>
      </div>

      <!-- Tab 切换 -->
      <div class="tabs-container">
        <div
          v-for="tab in tabs" :key="tab.key"
          class="tab-item"
          :class="{ 'tab-active': activeTab === tab.key }"
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
        </div>
      </div>

      <!-- 新人特惠页面 -->
      <NewbieGuide v-if="activeTab === 'newbie'" />

      <!-- 激活码引导页 -->
      <ActivationGuide v-else-if="activeTab === 'activation'" @close="close" />

      <!-- 会员套餐和Token包 -->
      <PackageTab
        v-else
        :package-type="activeTab as 'member' | 'token'"
        :packages="currentPackages"
        :selected-id="selectedId"
        :selected-price="selectedPrice"
        :is-loading="isLoading"
        :is-loading-goods="isLoadingGoods"
        :benefits="activeTab === 'token' ? benefitsData2.qy : currentBenefits"
        :benefits-extra="activeTab === 'token' ? benefitsData2.yt : undefined"
        :is-mobile="isMobile"
        @select-package="selectPackage"
        @pay="pay"
        @view-details="toggleDetails"
        @login="handleClickLogin"
      />
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.product-package-dialog {
  .el-dialog__header { display: none; }

  /* Tab 切换样式 */
  .tabs-container {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */

    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
    }

    .tab-item {
      flex-shrink: 0;
      padding: 12px 20px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
      color: #6b7280;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.3s;
      white-space: nowrap;
      user-select: none;

      &:hover {
        color: #f97316;
      }

      &.tab-active {
        color: #f97316;
        font-weight: 600;
        border-bottom-color: #f97316;
      }
    }
  }

  /* 详情页样式（无修改） */
  .details-view {
    height: 600px; overflow-y: auto; padding-right: 8px;
    .benefits-table {
      display: table; width: 100%; border-collapse: collapse;
      .table-header, .table-row { display: table-row; }
      .table-cell {
        display: table-cell; padding: 12px 16px;
        border-bottom: 1px solid #eee; vertical-align: middle;
      }
      .table-header {
        font-weight: bold; background-color: #f8f8f8;
        .table-cell { border-bottom: 2px solid #ddd; }
      }
    }
  }

  /* 新人特惠页面样式 - 紧凑版（匹配激活码页面风格） */
  .newbie-guide-container {
    padding: 20px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: linear-gradient(to bottom, #fff, #fdfdfd);
    border-radius: 8px;

    .newbie-content {
      text-align: center;
      max-width: 450px;
      width: 100%;

      .newbie-header {
        margin-bottom: 20px;
        padding: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        color: white;

        .header-icon {
          font-size: 32px;
          margin-bottom: 6px;
        }

        .header-title {
          font-size: 20px;
          font-weight: 700;
          margin: 0 0 6px 0;
        }

        .header-subtitle {
          font-size: 13px;
          margin: 0;
          opacity: 0.95;
        }
      }

      .newbie-body {
        display: flex;
        flex-direction: column;
        gap: 14px;

        // 购买方式卡片
        .purchase-card {
          background: #f7f8fa;
          border-radius: 10px;
          padding: 16px;
          border: 2px solid #e8ecf0;

          .card-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;

            .card-col {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 10px;

              .method-label {
                font-size: 13px;
                font-weight: 600;
                color: #606266;
              }

              .el-button {
                width: 100%;
              }
            }
          }
        }

        // 淘口令展示
        .taobao-code-box {
          background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
          border-radius: 8px;
          padding: 14px;
          border: 2px dashed #bae6fd;

          .code-label {
            font-size: 12px;
            color: #0369a1;
            font-weight: 600;
            margin-bottom: 8px;
          }

          .code-text {
            font-size: 11px;
            color: #667eea;
            font-family: 'Courier New', monospace;
            line-height: 1.5;
            word-break: break-all;
            background: white;
            padding: 8px;
            border-radius: 6px;
            text-align: left;
          }
        }

        // 温馨提示
        .tips-box {
          background: #f0f9ff;
          border: 1px solid #bae6fd;
          border-radius: 8px;
          padding: 14px;
          text-align: left;

          .tips-title {
            margin: 0 0 10px 0;
            font-size: 13px;
            font-weight: 600;
            color: #0369a1;
            display: flex;
            align-items: center;
            gap: 6px;

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

          .tips-text {
            margin: 4px 0;
            font-size: 12px;
            color: #0c4a6e;
            line-height: 1.5;
          }
        }
      }
    }
  }

  /* 响应式：移动端优化 */
  @media (max-width: 768px) {
    /* Tab 移动端优化 */
    .tabs-container {
      margin-bottom: 16px;
      padding-bottom: 2px;
      gap: 4px;
      justify-content: flex-start;

      .tab-item {
        padding: 10px 12px;
        font-size: 13px;
        min-width: fit-content;
      }
    }

    /* 新人特惠移动端优化 */
    .newbie-guide-container {
      padding: 16px 12px;
      min-height: auto;

      .newbie-content {
        max-width: 100%;

        .newbie-header {
          padding: 16px;
          margin-bottom: 16px;
          border-radius: 8px;

          .header-icon {
            font-size: 28px;
            margin-bottom: 6px;
          }

          .header-title {
            font-size: 18px;
            margin-bottom: 6px;
          }

          .header-subtitle {
            font-size: 13px;
          }
        }

        .newbie-body {
          gap: 12px;

          .purchase-card {
            padding: 14px;
            border-radius: 8px;

            .card-row {
              grid-template-columns: 1fr;
              gap: 10px;

              .card-col {
                .method-label {
                  font-size: 12px;
                }

                .el-button {
                  font-size: 13px;
                }
              }
            }
          }

          .taobao-code-box {
            padding: 12px;

            .code-label {
              font-size: 11px;
            }

            .code-text {
              font-size: 10px;
              padding: 6px;
              line-height: 1.4;
            }
          }

          .tips-box {
            padding: 12px;

            .tips-title {
              font-size: 12px;
              margin-bottom: 8px;

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

            .tips-text {
              font-size: 11px;
            }
          }
        }
      }
    }
  }

  /* 小屏手机进一步优化 */
  @media (max-width: 480px) {
    .tabs-container {
      gap: 2px;

      .tab-item {
        padding: 8px 10px;
        font-size: 12px;
        min-width: fit-content;
      }
    }

    .newbie-guide-container {
      padding: 12px 8px;

      .newbie-content {
        .newbie-header {
          padding: 12px;

          .header-icon {
            font-size: 24px;
          }

          .header-title {
            font-size: 16px;
          }

          .header-subtitle {
            font-size: 12px;
          }
        }

        .newbie-body {
          .purchase-card {
            padding: 12px;
          }

          .taobao-code-box {
            padding: 10px;

            .code-text {
              font-size: 9px;
            }
          }

          .tips-box {
            padding: 10px;
          }
        }
      }
    }
  }

  /* 激活码引导页样式 */
  .activation-guide-container {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: linear-gradient(to bottom, #fff, #fdfdfd);
    border-radius: 8px;

    .activation-content {
      text-align: center;
      max-width: 400px;

      .guide-icon {
        font-size: 64px;
        margin-bottom: 24px;
        animation: float-icon 3s ease-in-out infinite;
      }

      .guide-title {
        font-size: 24px;
        font-weight: 800;
        color: #2c3e50;
        margin-bottom: 16px;
      }

      .guide-desc {
        color: #606266;
        line-height: 1.6;
        margin-bottom: 32px;
        font-size: 15px;
      }

      .redeem-jump-btn {
        width: 200px;
        height: 48px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        border: none;
        box-shadow: 0 4px 12px rgba(255, 117, 140, 0.3);
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(255, 117, 140, 0.4);
        }
      }

      .guide-tips {
        margin-top: 24px;
        font-size: 13px;
        color: #909399;
        display: flex;
        justify-content: center;
        gap: 8px;
      }
    }
  }

  @keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  /* 移动端样式（核心新增：主价格/弱化价格样式） */
  .mobile-layout {
    display: flex; flex-direction: column; gap: 24px;
    .package-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .package-card {
      position: relative; border: 1px solid #e5e7eb; border-radius: 8px;
      padding: 16px; 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;
        /* 按需设置背景图尺寸适配方式，比如 cover、contain 等 */
        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;
        }
    }

    /* Token套餐价格样式优化 */
    .package-price {
        display: flex;
        flex-direction: column;
        gap: 8px;

        // 官方参考价
        .reference-price-section {
          padding: 6px 10px;
          background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
          border-radius: 6px;
          border: 1px dashed #f87171;

          .reference-label {
            font-size: 11px;
            color: #991b1b;
            margin-bottom: 2px;
          }

          .reference-value {
            font-size: 16px;
            font-weight: 700;
            color: #dc2626;
            text-decoration: line-through;
          }
        }

        // 当前价格
        .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;
          }
        }

        // 节省金额
        .save-amount {
          padding: 8px 10px;
          background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
          border-radius: 6px;
          font-size: 14px;
          font-weight: 700;
          color: #15803d;
          text-align: center;
          box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
      }

        // 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;
            }

            .save-tag {
              background: #dc2626;
              color: white;
              font-size: 9px;
              padding: 2px 6px;
              border-radius: 4px;
              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;
          }
        }

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

          .price-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;

            .price-tag-small {
              font-size: 12px;
              color: #78350f;
              font-weight: 600;
            }

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

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

      .final-price-section {
          padding: 10px;
          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
          border-radius: 8px;
          border: 2px solid #60a5fa;
          box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);

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

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

          .final-price-value {
            display: flex;
            align-items: baseline;
            margin-bottom: 4px;

            .price-symbol {
              font-size: 16px;
              font-weight: 700;
              color: #1e40af;
              margin-right: 2px;
            }

            .price-number {
              font-size: 26px;
              font-weight: 700;
              color: #1e40af;
            }
      }

          .discount-desc {
            font-size: 10px;
            color: #1e3a8a;
            font-weight: 500;
            line-height: 1.3;
          }
        }

      .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;
          }
        }
      }
    }

    // 累计充值优惠提示卡片样式
    .recharge-tip-card {
      display: flex; align-items: center; gap: 12px; padding: 12px 16px;
      background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
      border-radius: 8px; border: 1px solid #fbbf24; margin-top: 16px;
      .tip-icon {
        font-size: 24px;
      }

      .tip-content {
        flex: 1;

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

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

    .benefits-preview {
      background-color: #f9fafb; border-radius: 8px; padding: 16px;
      .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;
          }
        }
      }

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

        .model-library-card {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
          border-radius: 12px;
          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: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: white;
            border-radius: 12px;
            color: #667eea;
            flex-shrink: 0;
          }

          .card-content {
            flex: 1;

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

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

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

            .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;
        /* 按需设置背景图尺寸适配方式，比如 cover、contain 等 */
        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;
        }
    }

    /* 桌面端Token套餐价格样式优化 */
    .package-price {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;

        // 官方参考价
        .reference-price-section {
          padding: 8px 12px;
          background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
          border-radius: 8px;
          border: 1px dashed #f87171;

          .reference-label {
            font-size: 12px;
            color: #991b1b;
            margin-bottom: 4px;
            font-weight: 600;
          }

          .reference-value {
            font-size: 18px;
            font-weight: 700;
            color: #dc2626;
            text-decoration: line-through;
          }
        }

        // 当前价格
        .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;
          }
        }

        // 节省金额
        .save-amount {
          padding: 10px 12px;
          background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
          border-radius: 8px;
          font-size: 16px;
          font-weight: 700;
          color: #15803d;
          text-align: center;
          box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
      }

        // 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;
      }
        }

      .final-price-section {
          padding: 12px;
          background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
          border-radius: 10px;
          border: 2px solid #60a5fa;
          box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);

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

            .label-text.special {
              font-size: 14px;
              color: #1e40af;
              font-weight: 700;
            }
          }

          .final-price-value {
            display: flex;
            align-items: baseline;
            margin-bottom: 6px;

            .price-symbol {
              font-size: 18px;
              font-weight: 700;
              color: #1e40af;
              margin-right: 2px;
            }

            .price-number {
              font-size: 30px;
              font-weight: 700;
              color: #1e40af;
            }
      }

          .discount-desc {
            font-size: 11px;
            color: #1e3a8a;
            font-weight: 500;
            line-height: 1.4;
          }
        }

      .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;
          }
        }
      }
    }

    /* 模型库卡片样式 - 移动端 */
    .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;
          }
        }
      }
    }

    // 累计充值优惠提示卡片样式 - 桌面端
    .recharge-tip-card {
      display: flex; align-items: center; gap: 12px; padding: 12px 16px;
      background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
      border-radius: 8px; border: 1px solid #fbbf24; margin-top: 16px;
      .tip-icon {
        font-size: 28px;
      }

      .tip-content {
        flex: 1;

        .tip-title {
          font-size: 15px;
          font-weight: 700;
          color: #78350f;
          margin-bottom: 4px;
        }

        .tip-desc {
          font-size: 13px;
          color: #92400e;
          line-height: 1.5;
        }
    }
    }

    .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;
      }
    }
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .el-dialog { margin-top: 20px !important; margin-bottom: 20px !important; }
    .details-view {
      height: auto; max-height: 80vh;
      .benefits-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;

        .table-header,
        .table-row {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
      }
    }
    }

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

  ::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
  }

  /* 加载状态样式 */
  .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; }
  }
}
</style>
