<template>
	<div class="audit-record-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="audit-content">
			<h2 class="audit-title">
				<i class="el-icon-notebook-2"></i>
				证书审核记录
				<div class="sub-title">查看您的证书审核历史记录</div>
			</h2>

			<!-- 筛选条件 -->
			<div class="filter-bar">
				<el-select
					v-model="filter.auditStatus"
					placeholder="按状态筛选"
					class="auditStatus-filter"
					clearable
				>
					<el-option label="待审核" :value="0" />
					<el-option label="审核通过" :value="1" />
					<el-option label="审核拒绝" :value="2" />
				</el-select>

			</div>

			<!-- 审核记录列表 -->
			<div class="record-list">
				<el-card
					v-for="record in filteredRecords"
					:key="record.id"
					class="record-card"
					:class="record.auditStatusClass"
				>
					<div class="card-header">
						<div class="record-auditStatus">
							<i :class="record.auditStatusIcon"></i>
							<span>{{ record.auditStatusText }}</span>
						</div>
						<div class="record-date">
							{{ record.createdAt }}
						</div>
					</div>

					<div class="card-body">
						<div class="record-info">
							<div class="info-item">
								<label>证书编号：</label>
								<span>{{ record.certificateNumber }}</span>
							</div>
							<div class="info-item">
								<label>签发日期：</label>
								<span>{{ record.issueDate }}</span>
							</div>
							<div class="info-item">
								<label>过期日期：</label>
								<span>{{ record.expireDate || '--' }}</span>
							</div>
						</div>

						<div class="audit-comment" v-if="record.auditComments">
							<i class="el-icon-chat-line-round"></i>
							<span>审核意见：{{ record.auditComments }}</span>
						</div>
					</div>

					<div class="card-footer">
						<el-button type="text" @click="viewDetail(record)" class="detail-btn">
							<i class="el-icon-view"></i>
							查看详情
						</el-button>
					</div>
				</el-card>

				<!-- 空状态 -->
				<div class="empty-state" v-if="filteredRecords.length === 0">
					<i class="el-icon-document-remove"></i>
					<p>暂无审核记录</p>
				</div>
			</div>
		</div>

		<!-- 查看详情弹窗 -->
		<el-dialog
			v-model="detailDialogVisible"
			title="审核记录详情"
			width="600px"
			:close-on-click-modal="false"
		>
			<div class="detail-content" v-if="selectedRecord">
				<div class="detail-item">
					<label>证书编号：</label>
					<span>{{ selectedRecord.certificateNumber }}</span>
				</div>
				<div class="detail-item">
					<label>签发日期：</label>
					<span>{{ selectedRecord.issueDate }}</span>
				</div>
				<div class="detail-item">
					<label>过期日期：</label>
					<span>{{ selectedRecord.expireDate || '--' }}</span>
				</div>
				<div class="detail-item">
					<label>审核状态：</label>
					<el-tag :type="getAuditTagType(selectedRecord.auditStatus)">
						{{ getAuditStatusText(selectedRecord.auditStatus) }}
					</el-tag>
				</div>
				<div class="detail-item" v-if="selectedRecord.auditComments">
					<label>审核意见：</label>
					<span>{{ selectedRecord.auditComments }}</span>
				</div>
				<div class="detail-item">
					<label>记录日期：</label>
					<span>{{ selectedRecord.createdAt }}</span>
				</div>

				<div class="detail-item">


					<el-image :src="selectedRecord.img"></el-image>
				</div>

			</div>
			<template #footer>
				<el-button @click="detailDialogVisible = false">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

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

// 模拟数据
const records = ref([
])

// 筛选条件
const filter = ref({
	auditStatus: null,
	dateRange: []
})

// 审核状态配置
const auditStatusConfig = {
	0: { text: '待审核', icon: 'el-icon-time', class: 'pending' },
	1: { text: '通过', icon: 'el-icon-success', class: 'approved' },
	2: { text: '拒绝', icon: 'el-icon-error', class: 'rejected' }
}

// 处理后的记录数据
const processedRecords = computed(() => {
	return records.value.map(record => {
		const auditStatusInfo = auditStatusConfig[record.auditStatus] || {}
		return {
			...record,
			auditStatusText: auditStatusInfo.text,
			auditStatusIcon: auditStatusInfo.icon,
			auditStatusClass: auditStatusInfo.class
		}
	})
})

// 筛选后的记录
const filteredRecords = computed(() => {
	return processedRecords.value.filter(record => {
		// 状态筛选
		if (filter.value.auditStatus !== null && record.auditStatus !== filter.value.auditStatus) {
			return false
		}
		// 日期筛选
		if (filter.value.dateRange && filter.value.dateRange.length === 2) {
			const [start, end] = filter.value.dateRange
			const recordDate = new Date(record.createdAt)
			if (recordDate < new Date(start) || recordDate > new Date(end)) {
				return false
			}
		}
		return true
	})
})

// 查看详情弹窗相关
const detailDialogVisible = ref(false)
const selectedRecord = ref<any>(null)

const viewDetail = (record: any) => {
	selectedRecord.value = record
	detailDialogVisible.value = true
}

// 辅助方法：返回审核状态文字
const getAuditStatusText = (status: number) => {
	const mapping: { [key: number]: string } = {
		0: '待审核',
		1: '通过',
		2: '拒绝'
	}
	return mapping[status] || '--'
}

// 辅助方法：返回审核状态对应的标签类型
const getAuditTagType = (status: number) => {
	switch (status) {
		case 0:
			return 'warning'
		case 1:
			return 'success'
		case 2:
			return 'danger'
		default:
			return 'info'
	}
}

// 初始化数据（模拟接口请求）
function init() {

	frontRequest.get("/api/certificate/page", { params: { limit: 999 } }).then(res => {
	  records.value = res.data.list
	})
}
init()
</script>

<style scoped lang="scss">
.audit-record-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; }
		}
	}

	.audit-content {
		position: relative;
		max-width: 1200px;
		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;
	}

	.audit-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;
		}
	}

	.filter-bar {
		display: flex;
		gap: 1rem;
		margin-bottom: 2rem;

		.auditStatus-filter,
		.date-filter {
			flex: 1;
		}
	}

	.record-list {
		.record-card {
			margin-bottom: 1.5rem;
			border-left: 6px solid transparent;
			transition: all 0.3s ease;

			&.pending { border-color: #e6a23c; background: #fffaf0; }
			&.approved { border-color: #67c23a; background: #f0fff4; }
			&.rejected { border-color: #f56c6c; background: #fff0f0; }

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 1rem;
				border-bottom: 1px solid #eee;

				.record-auditStatus {
					display: flex;
					align-items: center;
					gap: 0.5rem;

					i {
						font-size: 1.2rem;
						&.el-icon-success { color: #67c23a; }
						&.el-icon-error { color: #f56c6c; }
						&.el-icon-time { color: #e6a23c; }
					}

					span {
						font-weight: bold;
					}
				}

				.record-date {
					color: #666;
					font-size: 0.9rem;
				}
			}

			.card-body {
				padding: 1rem 0;

				.record-info {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
					gap: 1rem;
					margin-bottom: 1rem;

					.info-item {
						label {
							color: #666;
							margin-right: 0.5rem;
						}
					}
				}

				.audit-comment {
					padding: 1rem;
					background: #f8f9fa;
					border-radius: 0.5rem;
					display: flex;
					align-items: center;
					gap: 0.5rem;

					i {
						color: #409EFF;
					}
				}
			}

			.card-footer {
				text-align: right;

				.detail-btn {
					color: #409EFF;
				}
			}
		}

		.empty-state {
			text-align: center;
			padding: 3rem;
			color: #666;

			i {
				font-size: 3rem;
				margin-bottom: 1rem;
			}

			p {
				margin: 0;
			}
		}
	}
}

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

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

		.audit-content {
			padding: 1.5rem;
		}

		.filter-bar {
			flex-direction: column;
		}
	}
}
/* 弹窗详情样式 */
.detail-content {
	.detail-item {
		margin-bottom: 1rem;
		display: flex;
		align-items: center;
		label {
			width: 120px;
			font-weight: bold;
			color: #555;
		}
		span {
			flex: 1;
			color: #333;
		}
	}
}
</style>

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