<template>
	<div class="certificate-container">
		<!-- 区块链宣传横幅 -->
		<div class="blockchain-banner">
			<div class="chain-effect"></div>
			<h2>区块链存证证书</h2>
			<p>所有证书信息已通过区块链技术永久存证，保障数据不可篡改</p>
		</div>

		<!-- 证书列表 -->
		<div class="certificate-list">
			<el-card
				v-for="item in certificateList"
				:key="item.id"
				class="certificate-card"
				shadow="hover"
			>
				<div class="card-content">
					<!-- 证书基本信息 -->
					<div class="cert-baseinfo">
						<h3>{{ item.certificateNumber }}</h3>
						<div class="meta-info">
							<span class="status-badge" :class="statusClass(item.status)">
								{{ statusText(item.status) }}
							</span>
							<span class="audit-status">
								<i class="el-icon-check" v-if="item.auditStatus === 1"></i>
								<i class="el-icon-close" v-if="item.auditStatus === 2"></i>
								{{ auditStatusText(item.auditStatus) }}
							</span>
						</div>
					</div>

					<!-- 证书详细信息 -->
					<div class="cert-details">
						<div class="detail-item">
							<label>签发日期：</label>
							<span>{{ item.issueDate }}</span>
						</div>
						<div class="detail-item">
							<label>过期日期：</label>
							<span>{{ item.expireDate || '--' }}</span>
						</div>
						<div class="detail-item">
							<label>申请查看证书：</label>
							<el-button @click="audit(item)">申请</el-button>
						</div>
						<div class="detail-item">
							<label>区块ID：</label>
							<div
								class="blockchain-id"
								:class="{ disabled: !item.blockchainTxId }"
								@click="item.blockchainTxId && copyBlockchainId(item.blockchainTxId)"
							>
								{{ shortenTxId(item.blockchainTxId) }}
								<template v-if="item.blockchainTxId">
									<el-icon class="copy-icon"><DocumentCopy /></el-icon>
								</template>
							</div>
						</div>
					</div>

					<!-- 区块链验证提示 -->
					<div class="blockchain-tip" v-if="item.blockchainTxId">
						<el-icon color="#409EFF"><Warning /></el-icon>
						<span>此证书已上链存证，可通过区块ID在区块链浏览器验证</span>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { DocumentCopy, Warning } from '@element-plus/icons-vue'

// 证书数据
const certificateList = ref<any[]>([])


function audit(data:any) {
	frontRequest.post("/api/applications",{
		certId:data.id
	}).then(() =>{
		ElMessage.success("申请成果，等待结果")
	})
}

// 状态显示
const statusText = (status: number) => {
	return { 0: '已撤销', 1: '有效', 2: '已过期' }[status] || '未知'
}

const auditStatusText = (status: number) => {
	return { 0: '待审核', 1: '审核通过', 2: '审核拒绝' }[status] || '未知'
}

// 状态样式
const statusClass = (status: number) => {
	return {
		0: 'revoked',
		1: 'active',
		2: 'expired'
	}[status] || ''
}

// 复制区块ID
const copyBlockchainId = (txId: string) => {
	// 若不存在区块ID，则不允许复制
	if (!txId) {
		ElMessage.warning('该证书未上链，无法复制区块ID')
		return
	}
	navigator.clipboard.writeText(txId).then(() => {
		ElMessage.success('区块ID已复制到剪贴板')
	})
}

// 缩短交易ID显示
const shortenTxId = (txId: string) => {
	return txId ? `${txId.substring(0, 8)}...${txId.substring(txId.length - 8)}` : '未上链'
}

// 加载证书数据
onMounted(async () => {
	try {
		// 这里替换实际接口调用
		const res = await frontRequest.get('/api/certificate/page', { params: { limit: 9999 } })
		certificateList.value = await res.data.list
	} catch (error) {
		ElMessage.error('数据加载失败')
	}
})
</script>

<style scoped lang="scss">
.certificate-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;

	.blockchain-banner {
		position: relative;
		background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
		color: white;
		padding: 40px;
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 30px;
		text-align: center;

		.chain-effect {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: repeating-linear-gradient(
					45deg,
					transparent,
					transparent 15px,
					rgba(255, 255, 255, 0.1) 15px,
					rgba(255, 255, 255, 0.1) 30px
			);
			animation: chainFlow 20s linear infinite;
		}

		h2 {
			font-size: 2.5em;
			margin-bottom: 15px;
			position: relative;
		}

		p {
			font-size: 1.1em;
			opacity: 0.9;
		}
	}

	.certificate-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 20px;

		.certificate-card {
			transition: transform 0.3s ease;
			background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
			border: 1px solid #e0e0e0;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			}

			.card-content {
				padding: 20px;

				.cert-baseinfo {
					border-bottom: 1px solid #eee;
					padding-bottom: 15px;
					margin-bottom: 15px;

					h3 {
						color: #1a237e;
						margin-bottom: 10px;
					}

					.meta-info {
						display: flex;
						gap: 15px;
						align-items: center;

						.status-badge {
							padding: 4px 12px;
							border-radius: 15px;
							font-size: 0.9em;

							&.active {
								background: #e8f5e9;
								color: #2e7d32;
							}
							&.expired {
								background: #fff3e0;
								color: #ef6c00;
							}
							&.revoked {
								background: #ffebee;
								color: #c62828;
							}
						}

						.audit-status {
							display: flex;
							align-items: center;
							gap: 5px;

							.el-icon-check {
								color: #4caf50;
							}
							.el-icon-close {
								color: #f44336;
							}
						}
					}
				}

				.cert-details {
					.detail-item {
						margin: 12px 0;
						display: flex;
						align-items: center;

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

						.blockchain-id {
							background: #f5f5f5;
							padding: 8px 15px;
							border-radius: 6px;
							display: inline-flex;
							align-items: center;
							gap: 8px;
							cursor: pointer;
							transition: all 0.3s;

							&:hover {
								background: #e0e0e0;
								transform: translateX(5px);
							}

							.copy-icon {
								color: #666;
								font-size: 0.9em;
							}
						}

						.blockchain-id.disabled {
							cursor: not-allowed;
							background: #ddd;
							&:hover {
								transform: none;
								background: #ddd;
							}
						}
					}
				}

				.blockchain-tip {
					margin-top: 15px;
					padding: 12px;
					background: #e3f2fd;
					border-radius: 6px;
					display: flex;
					align-items: center;
					gap: 10px;
					color: #0d47a1;

					.el-icon {
						font-size: 1.2em;
					}
				}
			}
		}
	}
}

@keyframes chainFlow {
	from { background-position: 0 0; }
	to { background-position: 1000px 0; }
}

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

		.blockchain-banner {
			padding: 20px;

			h2 {
				font-size: 1.8em;
			}
		}

		.certificate-list {
			grid-template-columns: 1fr;
		}
	}
}
</style>

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