<template>
  <div class="algorithm-detail-container">
    <!-- 页面标题 -->
    <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>{{ algorithmStore.currentAlgorithm?.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    
    <el-loading v-if="algorithmStore.loading" :fullscreen="true" text="加载中..." />
    
    <template v-else-if="algorithmStore.currentAlgorithm">
      <!-- 算法基本信息 -->
      <el-card class="algorithm-info-card">
        <template #header>
          <div class="card-header">
            <h1>{{ algorithmStore.currentAlgorithm.name }}</h1>
            <span class="algorithm-type">{{ getAlgorithmTypeName(algorithmStore.currentAlgorithm.type) }}</span>
          </div>
        </template>
        
        <div class="algorithm-info">
          <p class="algorithm-description">{{ algorithmStore.currentAlgorithm.description }}</p>
          
          <div class="algorithm-meta">
            <span class="meta-item">
              <el-icon><time /></el-icon>
              创建时间: {{ formatDate(algorithmStore.currentAlgorithm.created_at) }}
            </span>
            <span class="meta-item">
              <el-icon><timer /></el-icon>
              更新时间: {{ formatDate(algorithmStore.currentAlgorithm.updated_at) }}
            </span>
            <span class="meta-item">
              <el-icon><check /></el-icon>
              状态: {{ algorithmStore.currentAlgorithm.status }}
            </span>
          </div>
          
          <div class="algorithm-actions">
            <router-link :to="`/algorithm/${algorithmStore.currentAlgorithm.id}/call`" class="call-btn">
              <el-button type="primary" size="large">立即调用</el-button>
            </router-link>
            <router-link v-if="userStore.isAdmin" :to="`/algorithm/${algorithmStore.currentAlgorithm.id}/versions`" class="versions-btn">
              <el-button size="large">版本管理</el-button>
            </router-link>
          </div>
        </div>
      </el-card>
      
      <!-- 算法版本列表 -->
      <div class="versions-section">
        <h2>算法版本</h2>
        
        <el-table :data="algorithmStore.currentAlgorithm.versions" style="width: 100%">
          <el-table-column prop="version" label="版本号" width="120" />
          <el-table-column prop="url" label="API地址" />
          <el-table-column prop="is_default" label="默认版本" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.is_default" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="180">
            <template #default="scope">
              {{ formatDate(scope.row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <router-link :to="`/algorithm/${algorithmStore.currentAlgorithm.id}/call?version_id=${scope.row.id}`">
                <el-button size="small" type="primary">调用</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <div v-else class="error-state">
      <el-icon class="error-icon"><warning /></el-icon>
      <p>获取算法详情失败</p>
      <router-link to="/algorithms" class="back-btn">
        <el-button type="primary">返回算法列表</el-button>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useAlgorithmStore } from '../stores/algorithm'
import { useUserStore } from '../stores/user'
import { Time, Timer, Check, Warning } from '@element-plus/icons-vue'

// 获取路由和存储
const route = useRoute()
const algorithmStore = useAlgorithmStore()
const userStore = useUserStore()

// 算法类型映射
const algorithmTypes = {
  computer_vision: '计算机视觉',
  nlp: '自然语言处理',
  ml: '机器学习',
  reinforcement_learning: '强化学习',
  edge_computing: '边缘计算',
  medical: '医疗算法',
  autonomous_driving: '自动驾驶算法'
}

// 获取算法类型的中文名称
const getAlgorithmTypeName = (type: string) => {
  return algorithmTypes[type as keyof typeof algorithmTypes] || type
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

// 加载算法详情
onMounted(async () => {
  const algorithmId = route.params.id as string
  if (algorithmId) {
    await algorithmStore.fetchAlgorithmDetail(algorithmId)
  }
})
</script>

<style scoped>
.algorithm-detail-container {
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb {
  margin-bottom: 20px;
}

.algorithm-info-card {
  margin-bottom: 30px;
}

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

.card-header h1 {
  font-size: 28px;
  margin: 0;
  color: #333;
}

.algorithm-type {
  padding: 6px 16px;
  background-color: #ecf5ff;
  color: #409EFF;
  border-radius: 20px;
  font-size: 14px;
}

.algorithm-info {
  padding-top: 10px;
}

.algorithm-description {
  color: #606266;
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 16px;
}

.algorithm-meta {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #909399;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.algorithm-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.versions-section {
  margin-top: 40px;
}

.versions-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.error-state {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #F56C6C;
}

.error-state p {
  font-size: 18px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .algorithm-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .algorithm-actions {
    flex-direction: column;
  }
  
  .algorithm-actions a {
    width: 100%;
  }
  
  .algorithm-actions button {
    width: 100%;
  }
}
</style>
