<template>
  <div class="task-bar" v-if="tasks.length > 0">
    <div class="task-bar-header">
      <h3 class="task-bar-title">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/>
          <line x1="12" y1="22" x2="12" y2="15.5"/>
          <polyline points="22 8.5 12 15.5 2 8.5"/>
        </svg>
        出题任务
        <span class="task-count-badge" v-if="activeTasks.length > 0">{{ activeTasks.length }} 进行中</span>
        <span class="task-count-badge done" v-else>{{ completedTasks.length }} 已完成</span>
      </h3>
      <div class="task-bar-actions">
        <button v-if="completedTasks.length > 0" class="task-action-btn" @click="clearCompleted" title="清除已完成任务">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
          </svg>
          清除已完成
        </button>
        <button class="task-action-btn" @click="clearAll" title="清除全部">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
          全部清除
        </button>
      </div>
    </div>

    <div class="task-list">
      <div v-for="task in tasks" :key="task.id" class="task-item" :class="'task-' + task.status">
        <div class="task-status-icon">
          <svg v-if="task.status === 'pending'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ADB5BD" stroke-width="2">
            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
          </svg>
          <svg v-else-if="task.status === 'generating'" class="spin-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1C7ED6" stroke-width="2">
            <circle cx="12" cy="12" r="10" stroke-dasharray="30 40" stroke-dashoffset="0"/>
          </svg>
          <svg v-else-if="task.status === 'completed'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2B8A3E" stroke-width="2.5">
            <circle cx="12" cy="12" r="10" fill="#D3F9D8" stroke="#2B8A3E"/>
            <polyline points="9 12 11 14 15 10"/>
          </svg>
          <svg v-else-if="task.status === 'failed'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#C92A2A" stroke-width="2">
            <circle cx="12" cy="12" r="10" fill="#FFF5F5" stroke="#C92A2A"/>
            <line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
          </svg>
        </div>

        <div class="task-content">
          <div class="task-top-row">
            <span class="task-file-name" :title="task.fileName">{{ task.fileName }}</span>
            <span class="task-time">{{ task.createdAt }}</span>
            <button class="task-remove-btn" @click="removeTask(task.id)" title="移除">×</button>
          </div>
          <div class="task-progress-row">
            <span class="task-status-tag" :class="'tag-' + task.status">
              {{ statusLabel(task) }}
            </span>
            <span class="task-exam-status" v-if="task.examStatus && task.examStatus !== task.status">{{ task.examStatus }}</span>
          </div>
          <div class="task-message">
            <!-- 生成中：展示步骤状态 processStepMessage -->
            <template v-if="task.status === 'generating' || task.status === 'pending'">
              {{ task.processStepMessage || task.processMessage }}
            </template>
            <!-- 已完成/失败：展示生成结果 processMessage（支持多行） -->
            <template v-else>
              <pre class="task-result-text">{{ task.processMessage }}</pre>
            </template>
          </div>
          <div class="task-bar-indicator" v-if="task.status === 'generating' || task.status === 'pending'">
            <div class="bar-track"><div class="bar-fill" :class="{ pulse: task.status === 'generating' }"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  tasks: { type: Array, default: () => [] }
})

const emit = defineEmits(['remove', 'clear-completed', 'clear-all'])

const activeTasks = computed(() => props.tasks.filter(t => t.status === 'generating' || t.status === 'pending'))
const completedTasks = computed(() => props.tasks.filter(t => t.status === 'completed' || t.status === 'failed'))

const statusLabel = (task) => {
  const labels = {
    pending: '等待中',
    generating: '生成中',
    completed: '已完成',
    failed: '失败'
  }
  return labels[task.status] || task.status
}

const removeTask = (taskId) => { emit('remove', taskId) }
const clearCompleted = () => { emit('clear-completed') }
const clearAll = () => { emit('clear-all') }
</script>

<style scoped>
.task-bar {
  background: #FFFFFF;
  border: 1px solid #E9ECEF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.task-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #F8F9FA;
  border-bottom: 1px solid #E9ECEF;
}

.task-bar-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 7px;
}

.task-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  background: #D0EBFF;
  color: #1C7ED6;
}

.task-count-badge.done {
  background: #D3F9D8;
  color: #2B8A3E;
}

.task-bar-actions {
  display: flex;
  gap: 6px;
}

.task-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid #DEE2E6;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10.5px;
  color: #868E96;
  cursor: pointer;
  transition: all .12s;
}

.task-action-btn:hover {
  color: #212529;
  border-color: #ADB5BD;
  background: #FFFFFF;
}

.task-list {
  max-height: 380px;
  overflow-y: auto;
}

.task-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #F1F3F5;
  transition: background .12s;
}

.task-item:last-child { border-bottom: none; }
.task-item:hover { background: #F8F9FA; }

.task-item.task-pending .task-status-tag { background: #F1F3F5; color: #868E96; }
.task-item.task-generating .task-status-tag { background: #D0EBFF; color: #1C7ED6; }
.task-item.task-completed .task-status-tag { background: #D3F9D8; color: #2B8A3E; }
.task-item.task-failed .task-status-tag { background: #FFF5F5; color: #C92A2A; }

.task-status-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.spin-icon { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.task-content { flex: 1; min-width: 0; }
.task-top-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.task-file-name { font-size: 12.5px; font-weight: 600; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.task-time { font-size: 10.5px; color: #ADB5BD; flex-shrink: 0; }
.task-remove-btn {
  width: 18px; height: 18px; border: none; background: transparent;
  color: #ADB5BD; font-size: 14px; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  line-height: 1; padding: 0;
}
.task-remove-btn:hover { background: #F1F3F5; color: #C92A2A; }

.task-progress-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.task-status-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.task-exam-status {
  font-size: 10px;
  color: #ADB5BD;
  font-weight: 500;
}

.task-message {
  font-size: 11.5px;
  color: #6C757D;
  line-height: 1.5;
}

.task-result-text {
  font-family: inherit;
  font-size: 11.5px;
  color: #495057;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}

.task-bar-indicator { margin-top: 6px; }
.bar-track { height: 3px; background: #E9ECEF; border-radius: 2px; overflow: hidden; }
.bar-fill {
  height: 100%; width: 45%; background: #1C7ED6; border-radius: 2px;
  transition: width .5s ease;
}
.bar-fill.pulse { animation: barPulse 2s ease-in-out infinite; }
@keyframes barPulse {
  0% { width: 20%; }
  50% { width: 75%; }
  100% { width: 20%; }
}
</style>