<template>
  <div class="service-provider-detail">
    <!-- 调用统计 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <span>调用统计</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-statistic title="总调用量" :value="totalInvocations" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="平均响应时间" :value="averageResponseTime" value-style="color: #4caf50">
            <template #suffix>s</template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="成功率" :value="successRate" value-style="color: #4caf50">
            <template #suffix>%</template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="总费用" :value="totalCost" value-style="color: #ff9800">
            <template #prefix>$</template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <!-- 调用趋势图 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <span>调用趋势图</span>
      </template>
      <div ref="trendChart" class="chart-container"></div>
    </el-card>

    <!-- 模型调用分布 + 热门模型排行 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <template #header>
            <span>模型调用分布</span>
          </template>
          <div ref="pieChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="never">
          <template #header>
            <span>热门模型排行</span>
          </template>
          <el-table :data="modelRankList" border style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80" align="center" />
            <el-table-column prop="modelName" label="模型" />
            <el-table-column prop="invocationCount" label="调用次数" align="center" />
            <el-table-column prop="percentage" label="占比" align="center">
              <template #default="scope">
                {{ scope.row.percentage }}%
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

// 调用统计数据
const totalInvocations = 458032
const averageResponseTime = 1.45
const successRate = 99.92
const totalCost = 14.5

// 排行榜数据
const modelRankList = [
  { rank: 1, modelName: 'GPT-3', invocationCount: 4500, percentage: 45 },
  { rank: 2, modelName: 'GPT-4', invocationCount: 3200, percentage: 32 },
  { rank: 3, modelName: 'DALL·E', invocationCount: 2800, percentage: 14 },
  { rank: 4, modelName: 'Claude', invocationCount: 1900, percentage: 7 },
  { rank: 5, modelName: 'Llama', invocationCount: 1500, percentage: 2 }
]

// 折线图：调用趋势
const trendChart = ref(null)
const trendData = {
  dates: ['7/1', '7/5', '7/10', '7/15', '7/20'],
  values: [12000, 15000, 13500, 18000, 20000]
}

// 饼图：模型调用分布
const pieChart = ref(null)
const pieData = [
  { name: 'GPT-3', value: 45 },
  { name: 'GPT-4', value: 32 },
  { name: 'DALL·E', value: 14 },
  { name: 'Claude', value: 7 },
  { name: 'Llama', value: 2 }
]

// 初始化折线图
const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: trendData.dates },
    yAxis: { type: 'value' },
    series: [{ data: trendData.values, type: 'line', smooth: true, color: '#409EFF' }]
  })
}

// 初始化饼图
const initPieChart = () => {
  const chart = echarts.init(pieChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { show: false },
    series: [{
      type: 'pie',
      radius: '70%',
      data: pieData,
      emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
      color: ['#409EFF', '#67C23A', '#F56C6C', '#E6A23C', '#909399']
    }]
  })
}

// 挂载后初始化图表
onMounted(() => {
  initTrendChart()
  initPieChart()
})
</script>

<style scoped>
.service-provider-detail {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 300px;
}
</style>
