<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="平台名称" prop="platformName">
              <el-input v-model="queryParams.platformName" placeholder="请输入平台名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="平台描述" prop="platformDescription">
              <el-input v-model="queryParams.platformDescription" placeholder="请输入平台描述" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <!-- AI平台卡片列表 -->
    <el-card shadow="never" class="platform-card" v-loading="loading">
      <el-row :gutter="20">
        <el-col
          v-for="platform in platformList"
          :key="platform.platformId"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
        >
          <div class="platform-item" @click="viewDetails(platform)">
            <el-card shadow="hover" class="platform-card-item" >
              <div class="platform-header">
                <div class="platform-icon">
                  <img :src="platform.platformIcon" :alt="platform.platformIcon" />
                </div>
                <div class="platform-info-header">
                  <h3 class="platform-name">{{ platform.platformName }}</h3>
                  <!-- <div class="platform-status" :class="getStatusClass(platform.status)">
                    {{ getStatusLabel(platform.status) }}
                  </div> -->
                </div>
              </div>
              <div class="platform-content">
                <p class="platform-description" :title="platform.platformDescription">{{ platform.platformDescription }}</p>
              </div>
<!--              <div class="platform-actions">-->
<!--                <el-button-->
<!--                  type="primary"-->
<!--                  size="small"-->
<!--                  @click="checkBalance(platform)"-->
<!--                  :loading="platform.checkingBalance"-->
<!--                >-->
<!--                  <el-icon><Wallet /></el-icon>-->
<!--                  查询余额-->
<!--                </el-button>-->
<!--                <el-button-->
<!--                  type="success"-->
<!--                  size="small"-->
<!--                  @click="viewDetails(platform)"-->
<!--                >-->
<!--                  查看详情-->
<!--                </el-button>-->
<!--              </div>-->
<!--              &lt;!&ndash; 余额显示区域 &ndash;&gt;-->
<!--              <div v-if="platform.balance !== null" class="balance-info">-->
<!--                <el-divider />-->
<!--                <div class="balance-content">-->
<!--                  <span class="balance-label">当前余额：</span>-->
<!--                  <span class="balance-amount" :class="getBalanceClass(platform.balance)">-->
<!--                    {{ formatBalance(platform.balance) }}-->
<!--                  </span>-->
<!--                </div>-->
<!--              </div>-->
            </el-card>
          </div>
        </el-col>
      </el-row>

      <!-- 分页 -->
<!--      <el-pagination-->
<!--        v-show="total > 0"-->
<!--        class="mt-4"-->
<!--        :total="total"-->
<!--        v-model:current-page="queryParams.pageNum"-->
<!--        v-model:page-size="queryParams.pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        @size-change="handleQuery"-->
<!--        @current-change="handleQuery"-->
<!--      />-->
    </el-card>

    <!-- 平台详情弹窗 -->
    <el-dialog
      title="AI平台详情"
      v-model="detailDialogVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div v-if="selectedPlatform" class="platform-detail"    v-loading="detailLoading">
        <div class="detail-header">
          <div class="platform-info">
<!--            <el-icon class="platform-icon" :size="24">-->
<!--              <ChatDotRound />-->
<!--            </el-icon>-->
              <img class="platform-icon" :src="selectedPlatform.platformIcon" :alt="selectedPlatform.platformIcon" />
            <h2 class="platform-name">{{ selectedPlatform.platformName }}</h2>
          </div>
        </div>

        <div class="platform-description">
          {{ selectedPlatform.platformDescription }}
        </div>

        <el-divider />

        <!-- 模型类型和基础模型 -->
        <div class="models-section">
          <h3 class="section-title">模型信息</h3>

          <div class="model-types">
<!--            <div-->
<!--              v-for="baseModel in baseModelList"-->
<!--              :key="baseModel.baseModelId"-->
<!--              class="model-type-item"-->
<!--            >-->
<!--              <div class="model-type-header">-->
<!--                <h4 class="model-type-name">{{ baseModel.baseModelName }}</h4>-->
<!--                <el-tag :type="baseModel.status === 'active' ? 'success' : 'info'">-->
<!--                  {{ baseModel.status === 'active' ? '活跃' : '维护中' }}-->
<!--                </el-tag>-->
<!--              </div>-->

              <div class="base-models">
                <div
                  v-for="baseModel in baseModelList"
                  :key="baseModel.baseModelId"
                  class="base-model-item"
                >

                  <div class="base-model-header">
                    <h4 class="base-model-name">{{ baseModel.baseModelName }}</h4>
                    <el-tag size="small" type="primary">{{ baseModel.modelTypeName }}</el-tag>
                  </div>

                  <p class="base-model-description">{{ baseModel.baseModelDescription }}</p>

                  <!-- 模型能力 -->
                  <div class="model-capabilities">
                    <h6 class="capabilities-title">模型能力：</h6>
                    <div class="capabilities-list">
                      <div
                        v-for="capability in baseModel.aiModelCapabilityList"
                        :key="capability.modelCapabilityId"
                        class="capability-item"
                      >
                        <div class="capability-header">
                          <span class="capability-name">{{ capability.modelCapabilityName }}</span>
<!--                          <el-tag size="small" :type="capability.level === 'high' ? 'success' : capability.level === 'medium' ? 'warning' : 'info'">-->
<!--                            {{ capability.level === 'high' ? '高' : capability.level === 'medium' ? '中' : '低' }}-->
<!--                          </el-tag>-->
                        </div>
                        <p class="capability-description">{{ capability.modelCapabilityDescription }}</p>
                      </div>
                    </div>
                  </div>

                  <!-- API端点 -->
                  <div class="api-endpoints">
                    <h6 class="endpoints-title">API端点：</h6>
                    <div class="endpoints-list">
                      <div
                        v-for="endpoint in baseModel.aiApiEndpointList"
                        :key="endpoint.apiEndPointId"
                        class="endpoint-item"
                      >
                        <div class="endpoint-header">
                          <div class="endpoint-info">
                            <span class="endpoint-name">{{ endpoint.apiEndpointPath }}</span>
                            <el-tag size="small" type="info">{{ endpoint.apiVersion }}</el-tag>
                            <el-tag
                              v-if="endpoint.defaultFlag"
                              size="small"
                              type="success"
                            >
                              默认
                            </el-tag>
                          </div>
                          <div class="endpoint-limit">
                            <el-icon><Timer /></el-icon>
                            {{ endpoint.rateLimit }}/分钟
                          </div>
                        </div>
                        <div class="endpoint-path">
                          <el-icon><Link /></el-icon>
                          <code>{{ endpoint.path }}</code>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
<!--            </div>-->
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script setup name="AiPlatformList" lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { Wallet, ChatDotRound, Timer, Link } from '@element-plus/icons-vue'

import { listAiPlatform,listAiBaseModels, getAiPlatform, delAiPlatform, addAiPlatform, updateAiPlatform } from '@/api/ai/base/aiPlatform';
import { AiPlatformVO, AiPlatformQuery, AiPlatformForm } from '@/api/ai/base/aiPlatform/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;


// ================= MOCK DATA =================
// 平台模型数据
const mockPlatformModels = {
  3: { // OpenAI
    modelTypes: [
      {
        id: 1,
        name: '对话模型',
        status: 'active',
        baseModels: [
          {
            id: 1,
            name: 'GPT-4',
            version: 'GPT-4 Turbo',
            description: 'GPT-4是OpenAI最强大的对话模型，能够理解和生成人类语言，支持复杂的推理和创意任务。',
            capabilities: [
              {
                id: 1,
                name: '自然语言理解',
                level: 'high',
                description: '能够理解复杂的自然语言输入，包括上下文、情感和隐含含义。'
              },
              {
                id: 2,
                name: '代码生成',
                level: 'high',
                description: '能够生成高质量的代码，支持多种编程语言和框架。'
              },
              {
                id: 3,
                name: '创意写作',
                level: 'high',
                description: '能够创作各种类型的文本，包括故事、诗歌、剧本等创意内容。'
              },
              {
                id: 4,
                name: '多语言支持',
                level: 'medium',
                description: '支持多种语言的输入和输出，但某些语言的效果可能不如英语。'
              }
            ],
            apiEndpoints: [
              {
                id: 1,
                name: 'Chat Completions',
                version: 'v1',
                path: '/v1/chat/completions',
                isDefault: true,
                rateLimit: 5000
              },
              {
                id: 2,
                name: 'Chat Completions (Stream)',
                version: 'v1',
                path: '/v1/chat/completions?stream=true',
                isDefault: false,
                rateLimit: 3000
              }
            ]
          },
          {
            id: 2,
            name: 'GPT-3.5',
            version: 'GPT-3.5 Turbo',
            description: 'GPT-3.5是OpenAI的高效对话模型，在性能和成本之间取得了良好的平衡。',
            capabilities: [
              {
                id: 5,
                name: '自然语言理解',
                level: 'medium',
                description: '能够理解大部分自然语言输入，适合日常对话和简单任务。'
              },
              {
                id: 6,
                name: '代码生成',
                level: 'medium',
                description: '能够生成基本的代码，适合简单的编程任务。'
              },
              {
                id: 7,
                name: '创意写作',
                level: 'medium',
                description: '能够创作基本的创意文本，适合一般写作需求。'
              }
            ],
            apiEndpoints: [
              {
                id: 3,
                name: 'Chat Completions',
                version: 'v1',
                path: '/v1/chat/completions',
                isDefault: true,
                rateLimit: 10000
              }
            ]
          }
        ]
      },
      {
        id: 2,
        name: '嵌入模型',
        status: 'active',
        baseModels: [
          {
            id: 3,
            name: 'text-embedding-ada-002',
            version: 'v2',
            description: 'OpenAI的文本嵌入模型，能够将文本转换为高维向量，用于语义搜索和相似度计算。',
            capabilities: [
              {
                id: 8,
                name: '文本嵌入',
                level: 'high',
                description: '将文本转换为1536维的向量表示，用于语义搜索和相似度计算。'
              },
              {
                id: 9,
                name: '多语言支持',
                level: 'medium',
                description: '支持多种语言的文本嵌入，但主要针对英语优化。'
              }
            ],
            apiEndpoints: [
              {
                id: 4,
                name: 'Embeddings',
                version: 'v1',
                path: '/v1/embeddings',
                isDefault: true,
                rateLimit: 3000
              }
            ]
          }
        ]
      }
    ]
  },
  2: { // Claude AI
    modelTypes: [
      {
        id: 1,
        name: '对话模型',
        status: 'active',
        baseModels: [
          {
            id: 1,
            name: 'Claude-3 Opus',
            version: 'v1',
            description: 'Claude-3 Opus是Anthropic最强大的模型，在推理、数学和编程方面表现卓越。',
            capabilities: [
              {
                id: 1,
                name: '复杂推理',
                level: 'high',
                description: '能够进行复杂的逻辑推理和数学计算。'
              },
              {
                id: 2,
                name: '安全对话',
                level: 'high',
                description: '专注于安全、有帮助的对话，避免有害内容。'
              },
              {
                id: 3,
                name: '多模态理解',
                level: 'high',
                description: '能够理解和处理文本、图像等多种模态的输入。'
              }
            ],
            apiEndpoints: [
              {
                id: 1,
                name: 'Messages',
                version: 'v1',
                path: '/v1/messages',
                isDefault: true,
                rateLimit: 2000
              }
            ]
          }
        ]
      }
    ]
  },
  1: { // DeepSeek
    modelTypes: [
      {
        id: 1,
        name: '对话模型',
        status: 'active',
        baseModels: [
          {
            id: 1,
            name: 'DeepSeek Chat',
            version: 'v1.5',
            description: 'DeepSeek Chat是专门为对话和问答设计的模型，在中文理解和生成方面表现优秀。',
            capabilities: [
              {
                id: 1,
                name: '中文对话',
                level: 'high',
                description: '优秀的中文理解和生成能力，支持自然的中文对话。'
              },
              {
                id: 2,
                name: '知识问答',
                level: 'high',
                description: '能够回答各种知识性问题，提供准确的信息。'
              },
              {
                id: 3,
                name: '创意写作',
                level: 'medium',
                description: '支持中文创意写作，包括故事、诗歌等文学创作。'
              },
              {
                id: 4,
                name: '多轮对话',
                level: 'high',
                description: '能够进行连贯的多轮对话，保持上下文理解。'
              }
            ],
            apiEndpoints: [
              {
                id: 1,
                name: 'Chat Completions',
                version: 'v1',
                path: '/v1/chat/completions',
                isDefault: true,
                rateLimit: 3000
              },
              {
                id: 2,
                name: 'Chat Completions (Stream)',
                version: 'v1',
                path: '/v1/chat/completions?stream=true',
                isDefault: false,
                rateLimit: 2000
              }
            ]
          }
        ]
      },
      {
        id: 2,
        name: '代码模型',
        status: 'active',
        baseModels: [
          {
            id: 2,
            name: 'DeepSeek Coder',
            version: 'v1.5',
            description: 'DeepSeek Coder是专门为代码生成和编程辅助设计的模型，在多种编程语言方面表现卓越。',
            capabilities: [
              {
                id: 5,
                name: '代码生成',
                level: 'high',
                description: '能够生成高质量的代码，支持Python、JavaScript、Java、C++等多种编程语言。'
              },
              {
                id: 6,
                name: '代码解释',
                level: 'high',
                description: '能够解释复杂的代码逻辑和算法实现。'
              },
              {
                id: 7,
                name: '代码调试',
                level: 'medium',
                description: '能够帮助识别和修复代码中的错误和问题。'
              },
              {
                id: 8,
                name: '代码重构',
                level: 'medium',
                description: '能够优化和改进现有代码的结构和性能。'
              },
              {
                id: 9,
                name: '算法设计',
                level: 'high',
                description: '能够设计和实现各种算法和数据结构。'
              }
            ],
            apiEndpoints: [
              {
                id: 3,
                name: 'Code Completions',
                version: 'v1',
                path: '/v1/code/completions',
                isDefault: true,
                rateLimit: 5000
              },
              {
                id: 4,
                name: 'Code Analysis',
                version: 'v1',
                path: '/v1/code/analysis',
                isDefault: false,
                rateLimit: 2000
              }
            ]
          }
        ]
      },
      {
        id: 3,
        name: '数学模型',
        status: 'active',
        baseModels: [
          {
            id: 3,
            name: 'DeepSeek Math',
            version: 'v1.0',
            description: 'DeepSeek Math是专门为数学计算和推理设计的模型，在数学问题解决方面表现优秀。',
            capabilities: [
              {
                id: 10,
                name: '数学计算',
                level: 'high',
                description: '能够进行复杂的数学计算，包括代数、微积分、概率统计等。'
              },
              {
                id: 11,
                name: '数学推理',
                level: 'high',
                description: '能够进行数学证明和逻辑推理，解决复杂的数学问题。'
              },
              {
                id: 12,
                name: '公式推导',
                level: 'medium',
                description: '能够推导和解释数学公式和定理。'
              },
              {
                id: 13,
                name: '数学建模',
                level: 'medium',
                description: '能够建立数学模型来解决实际问题。'
              }
            ],
            apiEndpoints: [
              {
                id: 5,
                name: 'Math Solver',
                version: 'v1',
                path: '/v1/math/solve',
                isDefault: true,
                rateLimit: 1500
              },
              {
                id: 6,
                name: 'Math Proof',
                version: 'v1',
                path: '/v1/math/proof',
                isDefault: false,
                rateLimit: 1000
              }
            ]
          }
        ]
      }
    ]
  }
};

const mockPlatformList = [
  {
    id: 1,
    name: 'OpenAI GPT',
    description: '领先的人工智能语言模型平台，提供强大的自然语言处理能力',
    icon: 'https://img.icons8.com/color/96/openai.png',
    status: 'active',
    userCount: 12500,
    lastUpdate: '2024-01-15',
    apiVersion: 'v1.0',
    supportedModels: 'GPT-3.5, GPT-4, GPT-4 Turbo',
    balance: null,
    checkingBalance: false
  },
  {
    id: 2,
    name: 'Claude AI',
    description: 'Anthropic开发的AI助手，擅长安全、有帮助的对话。该平台专注于提供高质量的自然语言处理服务，支持多种语言和复杂的推理任务，广泛应用于企业级AI解决方案中。',
    icon: 'https://img.icons8.com/color/96/claude.png',
    status: 'active',
    userCount: 8900,
    lastUpdate: '2024-01-14',
    apiVersion: 'v2.0',
    supportedModels: 'Claude-3 Sonnet, Claude-3 Opus, Claude-3 Haiku',
    balance: null,
    checkingBalance: false
  },
  {
    id: 3,
    name: 'DeepSeek',
    description: '专注于代码生成和编程辅助的AI平台',
    icon: 'http://118.25.106.99:9005/bucketone/2025/08/05/ae83a90dc220438dbf29113c4f948c34.png',
    status: 'maintenance',
    userCount: 5600,
    lastUpdate: '2024-01-13',
    apiVersion: 'v1.5',
    supportedModels: 'DeepSeek Coder, DeepSeek Chat',
    balance: null,
    checkingBalance: false
  },
  {
    id: 4,
    name: '通义千问',
    description: '阿里巴巴开发的大语言模型，支持中文对话和创作',
    icon: 'https://img.icons8.com/color/96/qwen.png',
    status: 'active',
    userCount: 15200,
    lastUpdate: '2024-01-15',
    apiVersion: 'v2.1',
    supportedModels: 'Qwen-Turbo, Qwen-Plus, Qwen-Max',
    balance: null,
    checkingBalance: false
  },
  {
    id: 5,
    name: '文心一言',
    description: '百度开发的知识增强大语言模型',
    icon: 'https://img.icons8.com/color/96/ernie.png',
    status: 'active',
    userCount: 9800,
    lastUpdate: '2024-01-12',
    apiVersion: 'v4.0',
    supportedModels: 'ERNIE Bot, ERNIE Bot Turbo',
    balance: null,
    checkingBalance: false
  },
  {
    id: 6,
    name: '讯飞星火',
    description: '科大讯飞推出的认知大模型',
    icon: 'https://img.icons8.com/color/96/spark.png',
    status: 'inactive',
    userCount: 3200,
    lastUpdate: '2024-01-10',
    apiVersion: 'v3.0',
    supportedModels: 'SparkDesk, SparkDesk Pro',
    balance: null,
    checkingBalance: false
  }
]

/**
 * 模拟API调用
 * @param {*} data
 * @param {number} delay
 */
const mockApiCall = (data, delay = 300) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(data);
    }, delay);
  });
};
// ================= MOCK DATA END =================

// ================= 响应式数据 =================
const showSearch = ref(true);
const loading = ref(false);
const detailLoading = ref(false);
const platformList = ref([]);
const baseModelList = ref([]);
const total = ref(0);
const queryFormRef = ref();
const detailDialogVisible = ref(false);
const selectedPlatform = ref(null);



const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  platformName: undefined,
  platformDescription:undefined,
  status: '',
});

// ================= 计算属性 =================
// const filteredList = computed(() => {
//   let list = platformList.value;
//   if (queryParams.platformName) {
//     list = list.filter(item => item.name.toLowerCase().includes(queryParams.platformName.toLowerCase()));
//   }
//   if (queryParams.status) {
//     list = list.filter(item => item.status === queryParams.status);
//   }
//   return list;
// });
//
// const paginatedList = computed(() => {
//   total.value = filteredList.value.length;
//   const start = (queryParams.pageNum - 1) * queryParams.pageSize;
//   const end = start + queryParams.pageSize;
//   return filteredList.value.slice(start, end);
// });

// ================= 工具函数 =================
const getStatusLabel = (status) => {
  const statusMap = {
    'active': '正常',
    'maintenance': '维护中',
    'inactive': '停用'
  };
  return statusMap[status] || status;
};

const getStatusClass = (status) => {
  const classMap = {
    'active': 'status-active',
    'maintenance': 'status-maintenance',
    'inactive': 'status-inactive'
  };
  return classMap[status] || '';
};

const getStatusType = (status) => {
  const typeMap = {
    'active': 'success',
    'maintenance': 'warning',
    'inactive': 'danger'
  };
  return typeMap[status] || '';
};

const getBalanceClass = (balance) => {
  if (balance === null) return '';
  if (balance > 100) return 'balance-high';
  if (balance > 10) return 'balance-medium';
  return 'balance-low';
};

const formatBalance = (balance) => {
  if (balance === null) return '未查询';
  return `$${balance.toFixed(2)}`;
};

// ================= 业务逻辑 =================
// 获取平台列表
const getList = async () => {
  loading.value = true;
  const res = await listAiPlatform(queryParams);
  console.log(res)
  platformList.value = res.data;
  loading.value = false;
}

// 获取平台列表
const getAiBaseModelList = async (platformId) => {
  detailLoading.value = true;
  baseModelList.value = [];
  const res = await listAiBaseModels({platformId:platformId});
  baseModelList.value = res.data;
  console.log(res)
  detailLoading.value = false;
}


const getPlatformList = async () => {
  loading.value = true;
  const res = await mockApiCall(mockPlatformList);
  platformList.value = res;
  handleQuery();
  loading.value = false;
};

// 搜索按钮操作
const handleQuery = () => {
  // queryParams.pageNum = 1;
  getList();
};

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
};

// 查询余额
const checkBalance = async (platform) => {
  platform.checkingBalance = true;
  try {
    // 模拟API调用
    const balance = await mockApiCall(Math.random() * 200, 1000);
    platform.balance = balance;
  } catch (error) {
    console.error('查询余额失败:', error);
  } finally {
    platform.checkingBalance = false;
  }
};

// 查看详情
const viewDetails = (platform) => {
  selectedPlatform.value = platform;
  detailDialogVisible.value = true;
  getAiBaseModelList(platform.platformId);
};

// 获取平台模型类型
const getPlatformModelTypes = (platformId) => {
  return mockPlatformModels[platformId]?.modelTypes || [];
};

// ================= 生命周期 =================
onMounted(() => {
  getList();
});
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

.platform-card {
  min-height: 400px;
}

.platform-item {
  margin-bottom: 20px;
}

.platform-card-item {
  height: 200px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.platform-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.platform-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.platform-icon {
  width: 80px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.status-active {
  background: #f0f9ff;
  color: #0ea5e9;
}

.status-maintenance {
  background: #fffbeb;
  color: #f59e0b;
}

.status-inactive {
  background: #fef2f2;
  color: #ef4444;
}

.platform-info-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.platform-content {
  margin-bottom: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 66px;
}

.platform-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  line-height: 3.2;
}

.platform-description {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 52px;
  cursor: help;
  flex: 1;
}



.platform-actions {
  display: flex;
  gap: 5px;
  margin-bottom: 1px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.balance-info {
  margin-top: 1px;
  flex-shrink: 0;
}

.balance-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.balance-label {
  font-size: 14px;
  color: #6b7280;
}

.balance-amount {
  font-size: 16px;
  font-weight: 600;
}

/* 详情弹窗样式 */
.platform-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  margin-bottom: 20px;
}

.platform-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platform-icon {
  color: #409eff;
}

.platform-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.platform-description {
  font-size: 16px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
}

.model-types {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.model-type-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
}

.model-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.model-type-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.base-models {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.base-model-item {
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 16px;
  background-color: #fafafa;
}

.base-model-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.base-model-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.base-model-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  padding-bottom:10px;
  border-bottom: 1px solid #f0f0f0;
}

.capabilities-title,
.endpoints-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.capabilities-list,
.endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capability-item {
  border-left: 3px solid #409eff;
  padding-left: 12px;
  background-color: #fff;
  padding: 12px;
  border-radius: 4px;
}

.capability-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.capability-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.capability-description {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.4;
}

.endpoint-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  background-color: #fff;
}

.endpoint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.endpoint-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.endpoint-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.endpoint-limit {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.endpoint-path {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
}

.endpoint-path code {
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.balance-high {
  color: #059669;
}

.balance-medium {
  color: #d97706;
}

.balance-low {
  color: #dc2626;
}

.platform-detail {
  padding: 20px 0;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.detail-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
}

.detail-info h2 {
  margin: 0 0 8px 0;
  color: #1f2937;
}

.detail-info p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.mt-4 {
  margin-top: 1.5rem;
}
</style>
