<script setup lang="ts">
const models = [
  { name: 'DeepSeek-R1', price: '2', desc: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!' },
  { name: 'DeepSeek-chat', price: '1', desc: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般' },

  { name: 'GPT-4o-mini', price: '5', desc: 'OpenAI GPT-4o 深度思考的轻量版本，功能丰富性价比高' },
  { name: 'GPT-4.1-mini', price: '1.6', desc: 'OpenAI 适合日常使用的 GPT-4.1 精简版' },
  { name: 'GPT-4.1-nano', price: '0.4', desc: 'OpenAI 极致性价比，极快的快速响应，适合轻量任务' },
  { name: 'GPT-4.1-turbo', price: '0.4', desc: 'OpenAI 极致性价比，更极快的快速响应，适合轻量任务' },

  { name: 'GPT-4o', price: '10', desc: 'OpenAI 多模态旗舰模型，支持语音、图像、文本交互，具备深度思考，需要一定的响应时间' },

  { name: 'o4-mini', price: '4.4', desc: 'OpenAI o4 系列的推理模型，轻便且高效，比o3 更深度，但速度更慢' },
  { name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，万金油模型，各个领域都十分强悍' },
  { name: 'o3-mini', price: '4.4', desc: 'OpenAI o3 系列的推理模型，轻便且高效' },

  { name: 'grok-3', price: '15', desc: '由马克斯xAI推出，理论上的能力非常强，用重金超高成本砸出的超强推理模型' },
  { name: 'grok-3-mini', price: '0.5', desc: '由马克斯xAI推出，理论上的能力非常强，更快更小的模型' },

  { name: 'Phi-4', price: '0.5', desc: '微软推出的强大模型，适合部署简单任务' },
  { name: 'Phi-4-mini-instruct', price: '0.3', desc: '微软推出的小而强大模型，专为指令执行设计的微型模型' },
  { name: 'Phi-4-reasoning', price: '0.3', desc: '微软推出的小而强大模型，Phi-4 的逻辑推理优化版本' },

  { name: 'claude-3-7-sonnet', price: '108', desc: 'Anthropic 公司下开创的划时代AI纪元，所有AI逻辑性几乎地表最强！但价格十分昂贵' },

  { name: '更多模型请订阅查看....', price: '....', desc: '带深度思考的模型，响应速度可能会降低，请根据使用场景进行选择' },
];

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

<template>
  <div class="p-6 max-w-5xl mx-auto">
    <h1 class="text-3xl font-bold mb-4 text-center">
      全网AI模型 一键解锁 · 超高性价比
    </h1>
    <p class="text-center text-gray-600 mb-6">
      意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
    </p>

    <!-- 网格布局，默认2列 -->
    <!--    <SupportModelList layout="grid" /> -->
    <!-- 查看模型库按钮 -->
    <div class="model-library-section">
      <el-divider />
      <div class="model-library-card">
        <div class="card-icon">
          <el-icon :size="32">
            <i-ep-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">
            <i-ep-arrow-right />
          </el-icon>
        </el-button>
      </div>
    </div>
    <h2 v-if="false" class="text-2xl font-semibold mb-4 text-center">
      热门大模型价格排行榜
    </h2>
    <div v-if="false" class="bg-white shadow rounded-2xl overflow-hidden">
      <table class="w-full table-auto border-collapse">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              模型
            </th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              市价（ 美元/M token）
            </th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              如何选择
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
            <td class="px-4 py-2 text-sm font-medium text-gray-800">
              {{ model.name }}
            </td>
            <td class="px-4 py-2 text-sm">
              {{ model.price }}
            </td>
            <td class="px-4 py-2 text-sm text-gray-500">
              {{ model.desc || '-' }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-16">
      <h2 class="text-2xl font-semibold mb-4 text-center">
        热门大模型价格实时排行榜
      </h2>
      <div class="rounded-2xl shadow-lg overflow-hidden border border-gray-200 flex justify-center items-center p-4">
        <a href="https://openrouter.ai/models">https://openrouter.ai/models</a>
      </div>
      <p class="text-sm text-center text-gray-500 mt-2">
        来源：openrouter 模型榜
      </p>
    </div>
    <div class="mt-8 text-center">
      <h2 class="text-2xl font-semibold mb-2">
        一口价订阅，最低仅需 <span class="text-red-500 text-3xl font-bold">21.9元/月</span>  起
      </h2>
      <p class="text-gray-600 mb-4">
        即解锁以上全部模型，随时切换，无需单独付费。
      </p>
    </div>
  </div>
</template>

<style scoped>
th, td {
  border-bottom: 1px solid #e5e7eb;
}
/* 模型库卡片样式 - 桌面端 */
.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;
      }
    }
  }
}
</style>
