<template>
	<div class="crew-timeline">
		<div class="timeline-title">任务时间线</div>
		<el-timeline v-if="tasks.length">
			<el-timeline-item
				v-for="task in tasks"
				:key="task.id"
				:type="timelineType(task.status)"
				:timestamp="task.startTime || '等待中'"
				placement="top"
			>
				<div class="task-item">
					<span class="task-agent">{{ task.agentName || `Agent#${task.agentId}` }}</span>
					<el-tag :type="tagType(task.status)" size="small">{{ statusLabel[task.status] || task.status }}</el-tag>
				</div>
				<div class="task-desc">{{ task.taskDescription }}</div>
				<div v-if="task.error" class="task-error">{{ task.error }}</div>
			</el-timeline-item>
		</el-timeline>
		<el-empty v-else description="暂无任务" :image-size="40" />
	</div>
</template>

<script lang="ts" setup>
defineProps<{ tasks: any[] }>();

const statusLabel: Record<string, string> = {
	pending: '等待中', running: '执行中', completed: '已完成', failed: '失败', retrying: '重试中',
};

function timelineType(status: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
	const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
		running: 'primary',
		completed: 'success',
		failed: 'danger',
		retrying: 'warning'
	};
	return map[status] || 'info';
}

function tagType(status: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
	const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
		running: 'primary',
		completed: 'success',
		failed: 'danger',
		retrying: 'warning'
	};
	return map[status] || 'info';
}
</script>

<style scoped lang="scss">
.crew-timeline { padding: 12px; overflow-y: auto; }
.timeline-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.task-item { display: flex; align-items: center; gap: 8px; }
.task-agent { font-weight: 500; font-size: 13px; }
.task-desc { font-size: 12px; color: #606266; margin-top: 4px; }
.task-error { font-size: 12px; color: #f56c6c; margin-top: 2px; }
</style>
