<template>
	<div class="certificate-verify-container">
		<!-- 区块链装饰背景 -->
		<div class="blockchain-background">
			<div class="chain-line"></div>
			<div class="chain-line delay-1"></div>
			<div class="chain-line delay-2"></div>
		</div>

		<!-- 验证主内容 -->
		<div class="verify-content">
			<h2 class="verify-title">
				<i class="el-icon-search"></i>
				区块链证书验证
				<div class="sub-title">通过区块ID验证证书真伪</div>
			</h2>

			<!-- 验证表单 -->
			<div class="verify-form">
				<el-input
					v-model="blockchainId"
					placeholder="请输入区块ID"
					class="blockchain-input"
					@keyup.enter="handleVerify"
				>
					<template #prefix>
						<i class="el-icon-link"></i>
					</template>
					<template #append>
						<el-button
							type="primary"
							@click="handleVerify"
							class="verify-btn"
						>
							<i class="el-icon-search"></i>
							立即验证
						</el-button>
					</template>
				</el-input>
			</div>

			<!-- 验证结果展示 -->
			<div class="verify-result" v-if="resultVisible">
				<div class="result-card" :class="{'valid': isValid, 'invalid': !isValid}">
					<div class="result-icon">
						<i class="el-icon-success" v-if="isValid"></i>
						<i class="el-icon-error" v-else></i>
					</div>
					<div class="result-content">
						<h3>{{ resultTitle }}</h3>
						<div class="result-details">
							<div class="detail-item">
								<label>证书编号：</label>
								<span>{{ state.certificateData.certificateNumber || '--' }}</span>
							</div>
							<div class="detail-item">
								<label>签发日期：</label>
								<span>{{  state.certificateData.issueDate || '--' }}</span>
							</div>
							<div class="detail-item">
								<label>过期日期：</label>
								<span>{{  state.certificateData.expireDate || '--' }}</span>
							</div>
							<div class="detail-item">
								<label>当前状态：</label>
								<el-tag :type="statusTagType">
									{{ getStatusText(state.certificateData.status) }}
								</el-tag>
							</div>
						</div>
					</div>

				</div>
				<!-- 区块链信息 -->
				<div class="blockchain-info" >
					<div class="info-item">
						<i class="el-icon-cpu"></i>
						<span>区块高度：{{ state.certificateData.blockchainTxId.length }}</span>
					</div>
					<div class="info-item">
						<i class="el-icon-timer"></i>
						<span>详情：{{ state.certificateData.certificateData }}</span>
					</div>
					<div class="info-item">
						<i class="el-icon-document-checked"></i>
						<span>交易哈希：{{ shortenHash(state.certificateData.blockchainTxId) }}</span>
					</div>
				</div>
				<div class="blockchain-info" >
					<el-image
						style="width: 300px; height: 200px;display: block;margin: 0 auto"
						:src="state.certificateData.img"
						fit="cover"
						:preview-teleported="true"
					/>
				</div>
			</div>
			<!-- 使用说明 -->
			<div class="usage-guide">

				<el-steps :active="2" align-center>
					<el-step title="获取区块ID" description="从证书详情页复制区块ID" />
					<el-step title="输入验证" description="在输入框中粘贴区块ID" />
					<el-step title="查看结果" description="获取证书验证信息" />
				</el-steps>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const blockchainId = ref('')
const resultVisible = ref(false)
const isValid = ref(false)
const certificateData = ref<any>({})
const blockchainInfo = ref<any>({})

const state =reactive(<any>{
	certificateData:{}
})

const getStatusText = (status: number | string) => {
	switch (String(status)) {
		case '1':
			return '有效'
		case '0':
			return '撤销'
		case '2':
			return '过期'
		default:
			return '--'
	}
}
// 状态标签类型
const statusTagType = computed(() => {
	const status = certificateData.value.status
	switch (status) {
		case 1:
			return 'success' // 绿色 - 代表“有效”
		case 0:
			return 'info' // 灰色 - 代表“撤销”
		case 2:
			return 'warning' // 橙色 - 代表“过期”
		default:
			return 'danger' // 红色 - 代表未知状态
	}
})

// 验证结果标题
const resultTitle = computed(() => {
	return isValid.value ? '证书验证通过' : '证书验证失败'
})

// 处理验证
const handleVerify = async () => {
	if (!blockchainId.value) {
		ElMessage.warning('请输入区块ID')
		return
	}
	// 模拟验证请求
	frontRequest.get(`/api/certificate/${blockchainId.value}`).then(res =>{
		state.certificateData = res.data
		blockchainInfo.value = res.data.blockchain
		isValid.value =true
		resultVisible.value = true
	})
}

// 缩短哈希显示
const shortenHash = (hash: string) => {
	return hash ? `${hash.substring(0, 8)}...${hash.substring(hash.length - 8)}` : ''
}
</script>

<style scoped lang="scss">
.certificate-verify-container {
	position: relative;
	min-height: 100vh;
	padding: 2rem;
	background: linear-gradient(135deg, #f8f9fa, #ffffff);
	overflow: hidden;

	.blockchain-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

		.chain-line {
			position: absolute;
			height: 1px;
			background: linear-gradient(90deg, transparent, #409EFF 50%, transparent);
			animation: chainFlow 3s linear infinite;

			&:nth-child(1) { top: 20%; width: 80%; }
			&:nth-child(2) { top: 50%; width: 60%; }
			&:nth-child(3) { top: 80%; width: 70%; }

			&.delay-1 { animation-delay: -1s; }
			&.delay-2 { animation-delay: -2s; }
		}
	}

	.verify-content {
		position: relative;
		max-width: 800px;
		margin: 0 auto;
		padding: 2rem;
		background: rgba(255,255,255,0.95);
		border-radius: 1.5rem;
		box-shadow: 0 8px 32px rgba(0,0,0,0.1);
		z-index: 1;
	}

	.verify-title {
		text-align: center;
		margin-bottom: 2rem;
		color: #1a237e;
		font-size: 2rem;

		i {
			font-size: 2.5rem;
			vertical-align: middle;
			margin-right: 0.5rem;
		}

		.sub-title {
			font-size: 1rem;
			color: #666;
			margin-top: 0.5rem;
			font-weight: normal;
		}
	}

	.verify-form {
		margin: 2rem 0;

		.blockchain-input {
			:deep(.el-input__inner) {
				height: 50px;
				font-size: 1rem;
				border-radius: 12px;
				padding-left: 2.5rem;
			}

			.el-input__prefix {
				left: 12px;
				color: #409EFF;
			}

			.verify-btn {
				height: 50px;
				padding: 0 2rem;
				font-size: 1rem;
				border-radius: 0 12px 12px 0;
				background: linear-gradient(135deg, #409EFF, #1a237e);
				border: none;
			}
		}
	}

	.verify-result {
		margin: 2rem 0;

		.result-card {
			padding: 2rem;
			border-radius: 1rem;
			background: #f8f9fa;
			display: flex;
			align-items: center;
			gap: 1.5rem;

			&.valid {
				border-left: 6px solid #67c23a;
			}

			&.invalid {
				border-left: 6px solid #f56c6c;
			}

			.result-icon {
				i {
					font-size: 3rem;

					&.el-icon-success {
						color: #67c23a;
					}

					&.el-icon-error {
						color: #f56c6c;
					}
				}
			}

			.result-content {
				flex: 1;

				h3 {
					margin: 0 0 1rem 0;
					color: #1a237e;
				}

				.result-details {
					.detail-item {
						margin: 0.5rem 0;

						label {
							color: #666;
							min-width: 80px;
							display: inline-block;
						}
					}
				}
			}
		}

		.blockchain-info {
			margin-top: 1.5rem;
			padding: 1.5rem;
			background: rgba(245, 247, 250, 0.8);
			border-radius: 1rem;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 1rem;

			.info-item {
				display: flex;
				align-items: center;
				gap: 0.5rem;

				i {
					font-size: 1.2rem;
					color: #409EFF;
				}

				span {
					color: #666;
				}
			}
		}
	}

	.usage-guide {
		margin-top: 3rem;

		h3 {
			text-align: center;
			color: #1a237e;
			margin-bottom: 1.5rem;

			i {
				margin-right: 0.5rem;
			}
		}

		:deep(.el-step) {
			.el-step__head {
				.el-step__icon {
					background: #409EFF;
					color: white;
					border: none;
				}
			}

			.el-step__title {
				color: #1a237e;
				font-weight: bold;
			}

			.el-step__description {
				color: #666;
			}
		}
	}
}

@keyframes chainFlow {
	from { left: -100%; }
	to { left: 100%; }
}

@media (max-width: 768px) {
	.certificate-verify-container {
		padding: 1rem;

		.verify-content {
			padding: 1.5rem;
		}

		.verify-form {
			.blockchain-input {
				:deep(.el-input__inner) {
					font-size: 0.9rem;
				}

				.verify-btn {
					padding: 0 1rem;
					font-size: 0.9rem;
				}
			}
		}

		.blockchain-info {
			grid-template-columns: 1fr;
		}
	}
}
</style>

<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
