<template>
	<div class="id-card-result">
		<div class="id-card-layout">
			<!-- 身份证图片 -->
			<div class="id-card-image" v-if="imageUrl">
				<div class="image-label">
					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
					{{ isFront ? '人像面' : '国徽面' }}
				</div>
				<div class="image-frame">
					<el-image :src="imageUrl" fit="contain" :preview-src-list="[imageUrl]" :z-index="3100" class="card-img">
						<template #error>
							<div class="image-placeholder">
								<el-icon :size="32"><Picture /></el-icon>
								<span>图片加载失败</span>
							</div>
						</template>
					</el-image>
				</div>
			</div>

			<!-- 结构化字段 -->
			<div class="id-card-fields">
				<div class="fields-label">
					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
					识别字段
				</div>
				<div class="field-list">
					<div class="field-row" v-for="field in ocrFields" :key="field.key">
						<div class="field-key">{{ field.label }}</div>
						<div class="field-val">{{ field.value || '-' }}</div>
					</div>
				</div>

				<!-- 检测标签 -->
				<div class="detection-tags" v-if="extraTags.length > 0">
					<div
						class="detect-tag"
						v-for="tag in extraTags"
						:key="tag.label"
						:class="'is-' + tag.type"
					>
						<span class="detect-tag__dot"></span>
						<span class="detect-tag__label">{{ tag.label }}</span>
						<span class="detect-tag__value">{{ tag.value }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'id-card-result' });

import { computed } from 'vue';
import { Picture } from '@element-plus/icons-vue';
import { config } from '/@/config';

const props = defineProps<{ result: any }>();

const FRONT_LABELS: Record<string, string> = {
	name: '姓名', sex: '性别', nation: '民族',
	birth: '出生日期', address: '住址', idNumber: '身份证号码'
};
const BACK_LABELS: Record<string, string> = {
	issueAuthority: '签发机关', issueDate: '签发日期', expiryDate: '有效期限'
};

const isFront = computed(() => props.result?.idCardSide !== 'back');
const labels = computed(() => isFront.value ? FRONT_LABELS : BACK_LABELS);

const ocrFields = computed(() => {
	const fields = props.result?.parsedFields;
	if (!fields) return [];
	return Object.entries(labels.value)
		.filter(([key]) => fields[key] !== undefined)
		.map(([key, label]) => ({ key, label, value: fields[key] }));
});

const imageUrl = computed(() => {
	if (!props.result?.taskId || !props.result?.sourceFilePath) return '';
	return `${config.baseUrl}/open/netaclaw/workspace/file?taskId=${encodeURIComponent(props.result.taskId)}&path=${encodeURIComponent(props.result.sourceFilePath)}`;
});

const extraTags = computed(() => {
	if (!props.result) return [];
	const tags: { label: string; value: string; type: string }[] = [];
	if (props.result.imageStatus) {
		tags.push({ label: '图片状态', value: props.result.imageStatus === 'normal' ? '正常' : props.result.imageStatus, type: props.result.imageStatus === 'normal' ? 'success' : 'warning' });
	}
	if (props.result.riskType) {
		tags.push({ label: '风险检测', value: props.result.riskType === 'normal' ? '正常' : props.result.riskType, type: props.result.riskType === 'normal' ? 'success' : 'danger' });
	}
	if (props.result.cardPs) {
		tags.push({ label: 'PS检测', value: props.result.cardPs === 'normal' ? '无PS' : '疑似PS', type: props.result.cardPs === 'normal' ? 'success' : 'danger' });
	}
	return tags;
});
</script>

<style lang="scss" scoped>
$accent: #4f6ef7;

.id-card-result {
	.id-card-layout {
		display: flex;
		gap: 0;
		background: var(--el-bg-color);
		border: 1px solid var(--el-border-color-extra-light);
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
	}

	.id-card-image {
		flex-shrink: 0;
		width: 320px;
		display: flex;
		flex-direction: column;
		border-right: 1px solid var(--el-border-color-extra-light);
		background: #fafbfc;

		.image-label {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 8px 14px;
			font-size: 11px;
			font-weight: 600;
			color: var(--el-text-color-placeholder);
			text-transform: uppercase;
			letter-spacing: 0.8px;
			border-bottom: 1px solid var(--el-border-color-extra-light);
			svg { opacity: 0.5; }
		}

		.image-frame {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16px;
		}

		.card-img {
			width: 100%;
			border-radius: 8px;
			overflow: hidden;
			cursor: pointer;
			:deep(img) { width: 100%; object-fit: contain; transition: transform 0.3s; }
			&:hover :deep(img) { transform: scale(1.01); }
		}

		.image-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			padding: 40px 0;
			color: var(--el-text-color-placeholder);
			font-size: 12px;
		}
	}

	.id-card-fields {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;

		.fields-label {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 8px 14px;
			font-size: 11px;
			font-weight: 600;
			color: var(--el-text-color-placeholder);
			text-transform: uppercase;
			letter-spacing: 0.8px;
			border-bottom: 1px solid var(--el-border-color-extra-light);
			background: var(--el-fill-color-lighter);
			svg { opacity: 0.5; }
		}

		.field-list {
			flex: 1;
			padding: 4px 0;
		}

		.field-row {
			display: flex;
			align-items: baseline;
			padding: 10px 18px;
			border-bottom: 1px solid var(--el-border-color-extra-light);
			transition: background 0.15s;

			&:last-child { border-bottom: none; }
			&:hover { background: var(--el-fill-color-blank); }
		}

		.field-key {
			width: 90px;
			flex-shrink: 0;
			font-size: 12px;
			font-weight: 500;
			color: var(--el-text-color-secondary);
		}

		.field-val {
			flex: 1;
			font-size: 14px;
			font-weight: 600;
			color: var(--el-text-color-primary);
			word-break: break-all;
		}

		.detection-tags {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			padding: 12px 18px;
			border-top: 1px solid var(--el-border-color-extra-light);
			background: var(--el-fill-color-lighter);
		}

		.detect-tag {
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 4px 10px;
			border-radius: 6px;
			font-size: 12px;
			background: var(--el-fill-color);

			&__dot {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--el-text-color-placeholder);
			}

			&__label { color: var(--el-text-color-secondary); }
			&__value { font-weight: 600; color: var(--el-text-color-primary); }

			&.is-success .detect-tag__dot { background: #52c41a; }
			&.is-warning .detect-tag__dot { background: #e6a23c; }
			&.is-danger .detect-tag__dot { background: #f56c6c; }
			&.is-success .detect-tag__value { color: #52c41a; }
			&.is-warning .detect-tag__value { color: #e6a23c; }
			&.is-danger .detect-tag__value { color: #f56c6c; }
		}
	}
}
</style>
