<template>
	<div class="crew-run-detail">
		<div class="detail-header">
			<span>运行 #{{ run?.id }} — {{ statusLabel[run?.status] || run?.status }}</span>
			<div class="header-actions">
				<el-button v-if="run?.status === 'running'" size="small" type="danger" @click="$emit('stop', run.id)">终止</el-button>
				<el-button v-if="run?.status === 'paused'" size="small" type="success" @click="onResume">恢复</el-button>
			</div>
		</div>
		<div class="detail-body">
			<div class="detail-timeline">
				<crew-timeline :tasks="tasks" />
			</div>
			<div class="detail-logs">
				<crew-log-panel :logs="logs" @clear="$emit('clear-logs')" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus';
import CrewTimeline from './crew-timeline.vue';
import CrewLogPanel from './crew-log-panel.vue';

const props = defineProps<{
	run: any;
	tasks: any[];
	logs: any[];
}>();

const emit = defineEmits<{
	(e: 'stop', runId: number): void;
	(e: 'resume', runId: number, message: string): void;
	(e: 'clear-logs'): void;
}>();

const statusLabel: Record<string, string> = {
	pending: '等待中', running: '运行中', paused: '已暂停', completed: '已完成', failed: '失败',
};

async function onResume() {
	const { value } = await ElMessageBox.prompt('请输入处理意见', '恢复运行', {
		confirmButtonText: '恢复',
		cancelButtonText: '取消',
		inputPlaceholder: '处理意见（可选）',
	});
	emit('resume', props.run.id, value || '继续执行');
}
</script>

<style scoped lang="scss">
.crew-run-detail { display: flex; flex-direction: column; height: 100%; }
.detail-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 16px; border-bottom: 1px solid #ebeef5; font-weight: 600;
}
.detail-body { flex: 1; display: flex; overflow: hidden; }
.detail-timeline { width: 320px; border-right: 1px solid #ebeef5; overflow-y: auto; }
.detail-logs { flex: 1; }
</style>
