<template>
	<div class="certificate-container">
		<!-- 区块链装饰元素 -->
		<div class="blockchain-decor">
			<div class="chain-line"></div>
			<div class="chain-line delay-1"></div>
			<div class="chain-line delay-2"></div>
		</div>

		<h2 class="page-title">
			<i class="el-icon-connection"></i>
			区块链证书存证
			<div class="sub-title">数据上链后永久保存，不可篡改</div>
		</h2>

		<el-form
			:model="form"
			:rules="rules"
			ref="formRef"
			label-position="top"
			class="certificate-form"
		>
			<!-- 表单内容 -->
			<el-form-item label="证书编号" prop="certificateNumber">
				<el-input
					v-model="form.certificateNumber"
					placeholder="请输入证书编号"
					class="block-input"
				>
					<template #prefix>
						<i class="el-icon-document"></i>
					</template>
				</el-input>
			</el-form-item>

			<div class="form-row">
				<el-form-item label="签发日期" prop="issueDate" class="date-picker">
					<el-date-picker
						v-model="form.issueDate"
						type="datetime"
						placeholder="选择签发日期"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
					>
						<template #prefix>
							<i class="el-icon-date"></i>
						</template>
					</el-date-picker>
				</el-form-item>

				<el-form-item label="过期日期" prop="expireDate" class="date-picker">
					<el-date-picker
						v-model="form.expireDate"
						type="datetime"
						placeholder="选择过期日期"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
					>
						<template #prefix>
							<i class="el-icon-time"></i>
						</template>
					</el-date-picker>
				</el-form-item>
			</div>

			<el-form-item label="证书详情" prop="certificateData">
				<el-input
					type="textarea"
					v-model="form.certificateData"
					placeholder="请输入证书详情"
					:rows="4"
					class="block-textarea"
				/>
			</el-form-item>

			<el-form-item label="证书图片" prop="img">
				<image-upload
					@update:imageUrl="handleImageUrl"
					:image-url="form.img"
					class="block-uploader"
				/>
			</el-form-item>

			<el-form-item class="form-actions">
				<el-button
					type="primary"
					@click="submitForm"
					class="submit-btn"
				>
					<i class="el-icon-upload"></i>
					提交上链
				</el-button>
				<el-button
					@click="resetForm"
					class="reset-btn"
				>
					<i class="el-icon-refresh"></i>
					重置表单
				</el-button>
			</el-form-item>
		</el-form>

		<!-- 区块链特性说明 -->
		<div class="blockchain-features">
			<div class="feature-item">
				<i class="el-icon-lock"></i>
				<h3>数据安全</h3>
				<p>采用区块链加密技术保障信息安全</p>
			</div>
			<div class="feature-item">
				<i class="el-icon-coin"></i>
				<h3>永久存证</h3>
				<p>数据一旦上链将永久保存不可篡改</p>
			</div>
			<div class="feature-item">
				<i class="el-icon-share"></i>
				<h3>可信验证</h3>
				<p>可通过区块链浏览器验证证书真伪</p>
			</div>
		</div>
	</div>
</template>

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

const formRef = ref<FormInstance>()

const form = reactive({
	certificateNumber: '',
	issueDate: '',
	expireDate: '',
	certificateData: '',
	img: ''
})

const rules = {
	certificateNumber: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
	issueDate: [{ required: true, message: '请选择签发日期', trigger: 'change' }],
	expireDate: [{ required: true, message: '请选择过期日期', trigger: 'change' }],
	certificateData: [{ required: true, message: '请输入证书详情', trigger: 'blur' }],
	img: [{ required: true, message: '请上传证书图片', trigger: 'change' }]
}

function handleImageUrl(path: string) {
	form.img = path
}

const submitForm = () => {
	if (!formRef.value) return
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			ElMessageBox.confirm(
				'<div class="confirm-box">\
					<i class="el-icon-warning-outline"></i>\
					<h3>请确认证书信息</h3>\
					<p>数据上链后不可修改，请仔细核对以下信息：</p>\
					<ul>\
						<li>证书编号：'+form.certificateNumber+'</li>\
            <li>签发日期：'+form.issueDate+'</li>\
          </ul>\
        </div>',
				'确认上链',
				{
					confirmButtonText: '确认提交',
					cancelButtonText: '返回修改',
					type: 'warning',
					dangerouslyUseHTMLString: true,
					customClass: 'chain-confirm-dialog'
				}
			).then(async () => {
				const submissionData = {
					...form,
					is_block: 1
				}
				frontRequest.post('/api/certificate', submissionData).then(() => {
					ElMessage.success({
						message: '证书上链成功',
						duration: 3000,
						customClass: 'chain-success-msg'
					})
					resetForm()
				})
			}).catch(() => {})
		} else {
			ElMessage.error({
				message: '请完善表单信息',
				customClass: 'form-error-msg'
			})
		}
	})
}

const resetForm = () => {
	if (formRef.value) {
		formRef.value.resetFields()
		form.img = ''
	}
}
</script>

<style scoped lang="scss">
.certificate-container {
	position: relative;
	max-width: 800px;
	margin: 2rem auto;
	padding: 2.5rem;
	background: rgba(255,255,255,0.95);
	border-radius: 1.5rem;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	overflow: hidden;
	z-index: 1;

	.blockchain-decor {
		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; }
		}
	}

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

		.el-icon-connection {
			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;
		}
	}

	.certificate-form {
		position: relative;
		z-index: 2;

		.form-row {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

		:deep(.block-input) {
			.el-input__inner {
				background: rgba(245, 247, 250, 0.8);
				border: 1px solid #e0e0e0;
				border-radius: 0.75rem;
				padding-left: 2.5rem;
				transition: all 0.3s ease;

				&:hover {
					border-color: #409EFF;
					box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
				}
			}

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

		.block-textarea {
			:deep(.el-textarea__inner) {
				background: rgba(245, 247, 250, 0.8);
				border-radius: 0.75rem;
				min-height: 100px;
				resize: vertical;
			}
		}

		.form-actions {
			margin-top: 2rem;
			text-align: center;

			.submit-btn {
				padding: 12px 30px;
				font-size: 1rem;
				background: linear-gradient(135deg, #409EFF, #1a237e);
				border: none;
				border-radius: 0.75rem;
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
				}
			}

			.reset-btn {
				padding: 12px 30px;
				background: rgba(245, 247, 250, 0.8);
				border-color: #e0e0e0;
				border-radius: 0.75rem;
			}
		}
	}

	.blockchain-features {
		margin-top: 3rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		.feature-item {
			text-align: center;
			padding: 1.5rem;
			background: rgba(245, 247, 250, 0.8);
			border-radius: 1rem;
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 6px 16px rgba(0,0,0,0.08);
			}

			i {
				font-size: 2.5rem;
				color: #409EFF;
				margin-bottom: 1rem;
			}

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

			p {
				color: #666;
				font-size: 0.9rem;
				margin: 0;
			}
		}
	}
}

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

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

		.form-row {
			grid-template-columns: 1fr !important;
		}

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

<style>
/* 全局弹窗样式 */
.chain-confirm-dialog {
	border-radius: 1rem !important;
	background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;

	.confirm-box {
		text-align: center;

		i {
			font-size: 3rem;
			color: #409EFF;
			margin-bottom: 1rem;
		}

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

		ul {
			text-align: left;
			padding-left: 1.5rem;
			color: #666;
		}
	}
}

.chain-success-msg {
	background: linear-gradient(135deg, #409EFF, #1a237e) !important;
	color: white !important;
	border-radius: 0.75rem !important;
}

.form-error-msg {
	background: #fff5f5 !important;
	border: 1px solid #ffc4c4 !important;
	color: #ff4444 !important;
}
</style>

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