<template>
	<div v-if="step" class="step-detail-panel">
		<div class="step-detail-panel__header">
			<span class="step-detail-panel__title">{{ step.stepName }}</span>
			<el-tag :type="passedTag.type" size="small">{{ passedTag.label }}</el-tag>
			<span v-if="step.score != null" class="step-detail-panel__score">{{ step.score }}分</span>
			<span v-if="step.duration != null" class="step-detail-panel__dur">
				{{ (step.duration / 1000).toFixed(1) }}s
			</span>
			<span v-if="step.skillName" class="step-detail-panel__skill">
				Skill: <code>{{ step.skillName }}</code>
			</span>
		</div>

		<!-- OCR类：el-descriptions -->
		<template v-if="isOcrType">
			<el-descriptions :column="2" border size="small" class="step-detail-panel__body">
				<el-descriptions-item
					v-for="(val, key) in ocrFields"
					:key="key"
					:label="String(key)"
				>
					{{ val ?? '-' }}
				</el-descriptions-item>
			</el-descriptions>
		</template>

		<!-- data_compare：对比表格 -->
		<template v-else-if="step.stepType === 'data_compare'">
			<el-table :data="compareRows" border size="small" class="step-detail-panel__body">
				<el-table-column prop="field" label="字段" width="140" />
				<el-table-column prop="inputVal" label="录入值" />
				<el-table-column prop="ocrVal" label="OCR值" />
				<el-table-column prop="match" label="结果" width="70" align="center">
					<template #default="{ row }">
						<span :style="{ color: row.match ? '#67c23a' : '#f56c6c' }">
							{{ row.match ? '✓' : '✗' }}
						</span>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<!-- rule_check：规则列表 -->
		<template v-else-if="step.stepType === 'rule_check'">
			<el-table :data="ruleRows" border size="small" class="step-detail-panel__body">
				<el-table-column prop="name" label="规则名" width="180" />
				<el-table-column prop="result" label="结果" width="80" align="center">
					<template #default="{ row }">
						<el-tag :type="row.passed ? 'success' : 'danger'" size="small">
							{{ row.passed ? '通过' : '不通过' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="message" label="说明" />
			</el-table>
		</template>

		<!-- 其他：JSON -->
		<template v-else>
			<pre class="step-detail-panel__json">{{ formatJson(step.outputData) }}</pre>
		</template>
	</div>
</template>

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

const props = defineProps<{ step: AuditOrderDetail | null }>();

const OCR_TYPES = ['id_card_ocr', 'invoice_ocr', 'driving_license_ocr'];

const isOcrType = computed(() => props.step && OCR_TYPES.includes(props.step.stepType));

const passedTag = computed(() => {
	if (!props.step) return { type: 'info' as const, label: '-' };
	if (props.step.passed === 1) return { type: 'success' as const, label: '通过' };
	if (props.step.passed === 0) return { type: 'danger' as const, label: '不通过' };
	if (props.step.passed === 2) return { type: 'warning' as const, label: '建议转人工' };
	return { type: 'info' as const, label: '待执行' };
});

const ocrFields = computed(() => {
	const out = props.step?.outputData;
	if (!out || typeof out !== 'object') return {};
	// 过滤掉内部字段
	const result: Record<string, any> = {};
	for (const [k, v] of Object.entries(out)) {
		if (!k.startsWith('_')) result[k] = v;
	}
	return result;
});

const compareRows = computed(() => {
	const out = props.step?.outputData;
	if (!out) return [];
	if (Array.isArray(out.comparisons)) return out.comparisons;
	if (Array.isArray(out)) return out;
	return [];
});

const ruleRows = computed(() => {
	const out = props.step?.outputData;
	if (!out) return [];
	if (Array.isArray(out.rules)) return out.rules;
	if (Array.isArray(out)) return out;
	return [];
});

function formatJson(data: any) {
	if (!data) return '';
	if (typeof data === 'string') {
		try { return JSON.stringify(JSON.parse(data), null, 2); }
		catch { return data; }
	}
	return JSON.stringify(data, null, 2);
}
</script>

<style lang="scss" scoped>
.step-detail-panel {
	padding: 16px;
	background: #fafbfc;
	border-radius: 8px;
	margin-top: 12px;

	&__header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
		flex-wrap: wrap;
	}

	&__title {
		font-weight: 600;
		font-size: 15px;
	}

	&__score {
		font-size: 13px;
		color: #667eea;
		font-weight: 600;
	}

	&__dur {
		font-size: 12px;
		color: #909399;
	}

	&__skill {
		font-size: 12px;
		color: #909399;
		code { color: #667eea; }
	}

	&__body {
		margin-top: 8px;
	}

	&__json {
		background: #f5f7fa;
		padding: 12px;
		border-radius: 6px;
		font-size: 12px;
		line-height: 1.6;
		overflow-x: auto;
		max-height: 400px;
		white-space: pre-wrap;
		word-break: break-all;
		margin: 8px 0 0;
	}
}
</style>
