<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '实流检定',
	},
	}
</route>
<template>
	<view class="cert-status">
		<view class="placeholder">
			<view style="width: 100%; display: grid; place-items: center">
				<uni-title :title=" '天然气产销厂天然气计量化验中心'" type="h1" color="white" />
				<uni-title :title=" '证书防伪查询系统'" type="h1" color="red" />

				<!-- 添加证书状态显示区域 -->
				<view>
					<span class="status-tag" :class="status === '有效' ? 'valid' : 'invalid'">{{ status }}</span>
					<span>| 第{{ queryCount }}次查询</span>
					<span>| 查询时间：{{ queryTime }}</span>
				</view>
			</view>
		</view>
		<view navTitle="在线预览">
			<iframe id="bdIframe" :src="fileUrl" ref="bdIframe" style="border: none;" class="iframe" />
		</view>

	</view>


</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		Base64
	} from 'js-base64'
	import {
		ref,
		watch
	} from 'vue'

	// 定义状态数据
	const status = ref('');
	const queryCount = ref(0);
	const queryTime = ref('');
	var fileUrl = ref("");
	const baseUrl = 'https://10.75.166.6/jeecg-boot/sys/common/static/';

	onLoad((options) => {
		let url = JSON.parse(options.data)
		url = baseUrl + url;
		fileUrl.value = 'https://szcx.zyyt.sinopec.com/preview/onlinePreview?url=' + encodeURIComponent(Base64
			.encode(url))

		// 模拟从接口获取证书状态数据
		// 实际应用中应替换为真实的接口调用
		loadCertificateStatus(options.certId || 'default-cert-id');
	})

	// 加载证书状态数据
	const loadCertificateStatus = (certId) => {
		// 模拟数据，实际应通过API获取
		const mockData = {
			status: '有效', // 或'无效'
			queryCount: 5,
			queryTime: new Date().toISOString().split('T')[0]
		};

		// 更新状态数据
		status.value = mockData.status;
		queryCount.value = mockData.queryCount;
		queryTime.value = mockData.queryTime;

		// 如果状态为无效，可添加额外处理
		if (status.value === '无效') {
			console.warn('证书无效，ID:', certId);
		}
	}

	// 监听URL变化，如有需要可重新加载状态
	watch(() => fileUrl.value, () => {
		// 从URL中提取证书ID并重新加载状态
		// 这里需要根据实际URL格式调整提取逻辑
	})
</script>

<style>
	#bdIframe {
		position: absolute;
		top: 20;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.placeholder {
		height: v-bind(cusnavbarheight);
	}

	/* 证书状态样式 */
	.cert-status {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #fff;
		padding: 16rpx 30rpx;
		border-radius: 10rpx;
		/* 深蓝色背景 */
		background-color: #0a2463;
		/* 科技感底纹 - 使用线性渐变和背景图案 */
		background-image:
			linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
			linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
		background-size: 20rpx 20rpx;
		background-position: 0 0, 10rpx 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}

	.status-tag {
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		font-weight: bold;
	}

	.valid {
		color: #00b42a;
		border: 1rpx solid #00b42a;
	}

	.invalid {
		color: #e64340;
		border: 1rpx solid #e64340;
	}
</style>