<template>
	<view class="certificate-page">
		<nav-bar :title="$t('user.certificate')"></nav-bar>
		<view v-if="certificateList.length > 0">
			<view style="margin: 10rpx;" >【共{{certificateList.length}}个证书】</view>
			<view class="certificate-list" v-for="(item,index) in certificateList" :key="index">
				<view class="certificate-list-row">
					<h3>证书编号：{{item.bh}}</h3>
					<text style="font-size: 26rpx; color: #999;">获得时间：{{item.time}}</text>
				</view>
				<view class="certificate-certificate">
					<view class="img" v-for="(i,index) in item.certificateUrl" :key="index">
						<image @click="preveImg(i.url)" :src="i.url" mode="heightFix"></image>
					</view>
					<view class="certificate-detailed" @click="detailed(item)">详细信息</view>
				</view>
			</view>
		</view>
		<view v-else><wd-divider>您还未获得证书</wd-divider></view>
	</view>
	<wd-popup v-model="detailedState" position="bottom" :closeable="true">
		<view class="detailed">
			<view class="detailed-text">
				证书详情
			</view>
			<view class="detailed-row">证书类型：<text class="text">{{detailedData.a}}</text></view>
			<view class="detailed-row">获得时间：<text class="text">{{detailedData.time}}</text></view>
			<view class="detailed-row">获得途径：<text class="text">{{detailedData.b}}</text></view>
		</view>
	</wd-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'

	const { t } = useI18n()
	const detailedState = ref(false)
	const detailedData = ref({})
	
	// 模拟的 certificateList 数据
	const certificateList = ref([
		{ a: 'ZH', b: '吴门', bh: 1, time: '2025-6-20', certificateUrl: "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/ca2140c3-d212-4d4e-9203-ddc161d50470.jpg,https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/18a7ea22-b75a-4ef6-9109-f448f45e424f.jpg" },
		{ bh: 2, time: '2025-6-22', certificateUrl: "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/ca2140c3-d212-4d4e-9203-ddc161d50470.jpg,https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/18a7ea22-b75a-4ef6-9109-f448f45e424f.jpg" }
	]);

	// 重新获取数据
	certificateList.value = certificateList.value.map(item => {
		return { ...item, certificateUrl: item.certificateUrl.split(',').map(url => ({ url })) };
	});

	/**
	 * 查看证书详情信息
	 */
	const detailed = (item) => {
		detailedState.value = true
		detailedData.value = item
	}
  
	/**
	 * 查看照片
	 */
	const preveImg = (url : any) => {
		uni.previewImage({
			urls: [url],
			current: 0
		});
	}
</script>

<style lang="scss" scoped>
	.certificate-page {
		min-height: 100vh;
		background-color: #f7faf9;
	}

	.certificate-list {
		background: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 20rpx;
		padding: 20rpx;
	}

	.certificate-list-row {
		display: flex;
		justify-content: space-between;
	}

	.certificate-certificate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;

		.img {
			width: 36%;
			overflow: hidden;
			height: 300rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.certificate-detailed {
			color: #55aaff;
			border: #55aaff 1px solid;
			padding: 10rpx 20rpx;
			border-radius: 15rpx;
		}
	}

	.detailed {
		padding: 20rpx;

		.detailed-text {
			text-align: center;
			margin-bottom: 40rpx;
		}

		.detailed-row {
			color: #999;
			margin: 20rpx 0;
			font-size: 26rpx;

			.text {
				color: #000;
			}
		}
	}
</style>