<template>
  <div class="result-display-view">
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item><router-link to="/">首页</router-link></el-breadcrumb-item>
      <el-breadcrumb-item><router-link to="/algorithms">算法列表</router-link></el-breadcrumb-item>
      <el-breadcrumb-item>结果展示</el-breadcrumb-item>
    </el-breadcrumb>
    
    <el-loading v-if="loading" :fullscreen="true" text="加载中..." />
    
    <div v-else class="content-container">
      <el-card class="control-card">
        <template #header>
          <div class="card-header">
            <h2>结果展示与分析</h2>
            <el-button type="primary" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        
        <el-form :model="filters" inline>
          <el-form-item label="算法类型">
            <el-select v-model="filters.algorithmType" placeholder="选择算法类型">
              <el-option label="全部" value="" />
              <el-option label="计算机视觉" value="computer_vision" />
              <el-option label="自然语言处理" value="nlp" />
              <el-option label="机器学习" value="ml" />
              <el-option label="强化学习" value="reinforcement_learning" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filters.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="applyFilters">应用筛选</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 统计概览 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalCalls }}</div>
              <div class="stat-label">总调用次数</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">{{ stats.successRate }}%</div>
              <div class="stat-label">成功率</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">{{ stats.avgResponseTime }}s</div>
              <div class="stat-label">平均响应时间</div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">{{ stats.uniqueAlgorithms }}</div>
              <div class="stat-label">算法种类</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 结果可视化 -->
      <result-visualization 
        :result-data="selectedResult"
        :enable-comparison="true"
        :algorithm-type="selectedResult?.algorithm_type || 'general'"
      />
      
      <!-- 调用历史列表 -->
      <el-card class="history-card">
        <template #header>
          <h3>调用历史</h3>
        </template>
        
        <el-table 
          :data="callHistory" 
          style="width: 100%" 
          @row-click="selectResult"
          row-key="id"
          :highlight-current-row="true"
        >
          <el-table-column prop="id" label="调用ID" width="200" />
          <el-table-column prop="algorithm_name" label="算法名称" width="150" />
          <el-table-column prop="version" label="版本" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="response_time" label="响应时间(s)" width="120" />
          <el-table-column prop="created_at" label="调用时间" width="180" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" @click.stop="viewResultDetails(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import ResultVisualization from '../components/core/ResultVisualization.vue'
import { useAlgorithmStore } from '../stores/algorithm'

// 状态
const loading = ref(true)
const algorithmStore = useAlgorithmStore()

// 过滤器
const filters = reactive({
  algorithmType: '',
  dateRange: []
})

// 统计数据
const stats = reactive({
  totalCalls: 0,
  successRate: 0,
  avgResponseTime: 0,
  uniqueAlgorithms: 0
})

// 调用历史
const callHistory = ref<any[]>([])
const selectedResult = ref<any>(null)

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 方法
const loadData = async () => {
  loading.value = true
  try {
    // 获取调用历史
    await fetchCallHistory()
    
    // 获取统计数据
    await fetchStats()
  } catch (error) {
    console.error('Failed to load data:', error)
  } finally {
    loading.value = false
  }
}

const fetchCallHistory = async () => {
  // 模拟获取调用历史数据
  // 在实际应用中，这里会调用API获取数据
  callHistory.value = [
    {
      id: 'call-001',
      algorithm_name: '图像分类算法',
      version: 'v1.0',
      status: 'success',
      response_time: 1.2,
      created_at: '2023-12-01 10:30:00',
      algorithm_type: 'computer_vision',
      result_data: {
        predictions: [
          { class: 'cat', confidence: 0.95 },
          { class: 'dog', confidence: 0.05 }
        ]
      }
    },
    {
      id: 'call-002',
      algorithm_name: '文本情感分析',
      version: 'v2.1',
      status: 'success',
      response_time: 0.8,
      created_at: '2023-12-01 11:15:00',
      algorithm_type: 'nlp',
      result_data: {
        sentiment: 'positive',
        confidence: 0.89,
        keywords: ['happy', 'excited', 'good']
      }
    },
    {
      id: 'call-003',
      algorithm_name: '回归预测模型',
      version: 'v1.2',
      status: 'failed',
      response_time: null,
      created_at: '2023-12-01 12:00:00',
      algorithm_type: 'ml',
      result_data: { error: 'Model not converged' }
    }
  ]
  
  if (callHistory.value.length > 0) {
    selectedResult.value = callHistory.value[0].result_data
  }
  
  pagination.total = callHistory.value.length
}

const fetchStats = async () => {
  // 模拟获取统计数据
  // 在实际应用中，这里会调用API获取统计数据
  stats.totalCalls = 156
  stats.successRate = 92.3
  stats.avgResponseTime = 1.45
  stats.uniqueAlgorithms = 12
}

const getStatusTagType = (status: string) => {
  switch (status) {
    case 'success': return 'success'
    case 'failed': return 'danger'
    case 'pending': return 'warning'
    case 'running': return 'info'
    default: return 'info'
  }
}

const selectResult = (row: any) => {
  selectedResult.value = row.result_data
}

const viewResultDetails = (row: any) => {
  // 查看结果详情
  console.log('Viewing details for:', row)
  selectResult(row)
}

const applyFilters = () => {
  // 应用筛选条件
  loadData()
}

const refreshData = () => {
  loadData()
}

const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  loadData()
}

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  loadData()
}

// 初始化
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.result-display-view {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.content-container {
  width: 100%;
}

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

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

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.history-card {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

:deep(.el-table__row) {
  cursor: pointer;
}
</style>
</template>
</file_path>