<template>
	<div class="step-pipeline">
		<div v-if="steps.length === 0" class="step-pipeline__empty">
			<el-empty description="暂无审核步骤" :image-size="48" />
		</div>
		<div v-else class="step-pipeline__track">
			<div
				v-for="(step, idx) in steps"
				:key="step.id || idx"
				class="step-pipeline__node-wrap"
			>
				<!-- 连线 -->
				<div v-if="idx > 0" class="step-pipeline__connector">
					<div class="step-pipeline__line" :class="lineClass(steps[idx - 1])"></div>
					<div class="step-pipeline__arrow" :class="lineClass(steps[idx - 1])"></div>
				</div>
				<!-- 节点 -->
				<div
					class="step-pipeline__node"
					:class="[nodeClass(step), { active: activeIdx === idx }]"
					@click="$emit('select', idx)"
				>
					<span class="step-pipeline__icon">{{ nodeIcon(step) }}</span>
					<span class="step-pipeline__name">{{ step.stepName }}</span>
					<span v-if="step.score != null" class="step-pipeline__score">{{ step.score }}分</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import type { AuditOrderDetail } from '../types/index.d';

defineProps<{
	steps: AuditOrderDetail[];
	activeIdx: number;
}>();

defineEmits<{
	(e: 'select', idx: number): void;
}>();

function nodeClass(step: AuditOrderDetail) {
	if (step.passed === 1) return 'is-pass';
	if (step.passed === 0) return 'is-fail';
	if (step.passed === 2) return 'is-warn';
	return 'is-pending';
}

function lineClass(step: AuditOrderDetail) {
	if (step.passed === 1) return 'is-pass';
	if (step.passed === 0) return 'is-fail';
	return 'is-default';
}

function nodeIcon(step: AuditOrderDetail) {
	if (step.passed === 1) return '\u2713';
	if (step.passed === 0) return '\u2717';
	if (step.passed === 2) return '\u26A0';
	return '\u25CB';
}
</script>

<style lang="scss" scoped>
.step-pipeline {
	padding: 16px 0;
	overflow-x: auto;

	&__track {
		display: flex;
		align-items: center;
		min-width: max-content;
		padding: 8px 4px;
	}

	&__node-wrap {
		display: flex;
		align-items: center;
	}

	&__connector {
		display: flex;
		align-items: center;
		width: 48px;
		position: relative;
	}

	&__line {
		flex: 1;
		height: 2px;
		background: #dcdfe6;

		&.is-pass { background: linear-gradient(90deg, #67c23a, #95d475); }
		&.is-fail { background: linear-gradient(90deg, #f56c6c, #fab6b6); }
	}

	&__arrow {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 6px solid #dcdfe6;

		&.is-pass { border-left-color: #95d475; }
		&.is-fail { border-left-color: #fab6b6; }
	}

	&__node {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 12px 18px;
		border-radius: 10px;
		cursor: pointer;
		transition: all 0.25s;
		border: 2px solid transparent;
		min-width: 100px;
		position: relative;

		&.is-pass {
			background: linear-gradient(135deg, #f0f9eb, #e1f3d8);
			border-color: #b3e19d;
			&:hover, &.active { border-color: #67c23a; box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.15); }
		}
		&.is-fail {
			background: linear-gradient(135deg, #fef0f0, #fde2e2);
			border-color: #fab6b6;
			&:hover, &.active { border-color: #f56c6c; box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.15); }
		}
		&.is-warn {
			background: linear-gradient(135deg, #fdf6ec, #faecd8);
			border-color: #f3d19e;
			&:hover, &.active { border-color: #e6a23c; box-shadow: 0 0 0 3px rgba(230, 162, 60, 0.15); }
		}
		&.is-pending {
			background: linear-gradient(135deg, #f4f4f5, #ebeef5);
			border-color: #dcdfe6;
			&:hover, &.active { border-color: #909399; box-shadow: 0 0 0 3px rgba(144, 147, 153, 0.15); }
		}
	}

	&__icon {
		font-size: 18px;
		line-height: 1;
	}

	&__name {
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}

	&__score {
		font-size: 11px;
		color: #909399;
	}
}
</style>
