<template>
	<div class="crew-run-table">
		<div class="filter-bar">
			<el-select v-model="filters.status" placeholder="状态" clearable size="small" style="width: 120px">
				<el-option label="运行中" value="running" />
				<el-option label="已完成" value="completed" />
				<el-option label="已暂停" value="paused" />
				<el-option label="失败" value="failed" />
			</el-select>
			<el-button size="small" @click="loadData">刷新</el-button>
		</div>
		<el-table :data="tableData" @row-click="(row) => emit('select', row)" highlight-current-row size="small">
			<el-table-column prop="id" label="ID" width="60" />
			<el-table-column prop="triggerType" label="触发" width="80" />
			<el-table-column label="状态" width="100">
				<template #default="{ row }">
					<span class="status-dot" :class="'s-' + row.status" />
					{{ statusLabel[row.status] || row.status }}
				</template>
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间" width="170" />
			<el-table-column label="耗时" width="90">
				<template #default="{ row }">{{ calcDuration(row) }}</template>
			</el-table-column>
			<el-table-column label="Token" width="100">
				<template #default="{ row }">
					{{ row.tokenUsage ? (row.tokenUsage.inputTokens + row.tokenUsage.outputTokens) : '-' }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="160">
				<template #default="{ row }">
					<el-button v-if="row.status === 'running'" size="small" type="danger" text @click.stop="emit('control', row.id, 'stop')">终止</el-button>
					<el-button v-if="row.status === 'paused'" size="small" type="success" text @click.stop="emit('resume', row.id)">恢复</el-button>
					<el-button size="small" text @click.stop="emit('select', row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useCool } from '/@/cool';

const props = defineProps<{ crewId?: number }>();
const emit = defineEmits<{
	(e: 'select', row: any): void;
	(e: 'control', runId: number, action: string): void;
	(e: 'resume', runId: number): void;
}>();

const { service } = useCool();
const tableData = ref<any[]>([]);
const filters = reactive({ status: '' });

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

async function loadData() {
	const params: any = { page: 1, size: 50 };
	if (props.crewId) params.crewId = props.crewId;
	if (filters.status) params.status = filters.status;
	const res = await service.netaclaw.crew_run.page(params);
	tableData.value = res?.list || [];
}

function calcDuration(row: any) {
	if (!row.startTime) return '-';
	const start = new Date(row.startTime).getTime();
	const end = row.endTime ? new Date(row.endTime).getTime() : Date.now();
	const sec = Math.round((end - start) / 1000);
	return sec < 60 ? `${sec}s` : `${Math.floor(sec / 60)}m${sec % 60}s`;
}

onMounted(() => loadData());
watch(() => props.crewId, () => loadData());

defineExpose({ loadData });
</script>

<style scoped lang="scss">
.filter-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.status-dot {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px;
	&.s-running { background: #409eff; }
	&.s-completed { background: #67c23a; }
	&.s-paused { background: #e6a23c; }
	&.s-failed { background: #f56c6c; }
	&.s-pending { background: #909399; }
}
</style>
