<template>
	<view class="report-card" style="background-image: url( '//yun.duiba.com.cn/aurora/assets/c1e4ce971b7ffb55ed23ec8a9480b857a6328e98.png');">
		<!-- <view class="page-top">
			<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
			<view class="page_title">我的报告单</view>
		</view> -->
		 <customize-navigation>
			  <template v-slot:navbar-content>
				 <view class="page-top">
					<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
				    <view class="page_title">我的报告单</view>
				 </view>
			  </template>
		   </customize-navigation>
		<view class="report-card-con">
			<view class="con-box">
				<template v-if="listData.length > 0">
					<view class="list-item" v-for="(item, index) in listData" :key="index">
						<view class="item-time">
							<view class="item-time-l">
								<image src="/static/chanjianTool/icon19.png"></image>
								{{item.checkupDate}}
							</view>

							<view class="item-time-r" @click="onDelete(item.id)">
								<image src="/static/chanjianTool/delete.png"></image>
							</view>
						</view>
						<view class="item-line">

						</view>
						<view class="item-content">
							<view class="content-1">
								第{{item.checkupTimes}}次产检:孕{{item.pregnancyCycle}}周
							</view>
							<view class="content-2">
								重点: {{getProject(item.items)}}
							</view>
							<view class="content-3">
								<template v-for="(e, i) in item.reportImages.slice(0, 3)" :key="i">
									<view class="content-3-v" :class="{ 'has-more': i === 2 && item.reportImages.length > 3 }">
										<image @click="onPreviewImage(e)" :src="e" mode="widthFix"></image>
										<view @click="onMoreImage(item.reportImages)" class="more-count"
											v-if="i === 2 && item.reportImages.length > 3">
											+{{ item.reportImages.length - 3 }}
										</view>
									</view>
								</template>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="no-data">
						<image src="/static/chanjianTool/icon28.png"></image>
					</view>
				</template>
			</view>
		</view>
		<!-- 查看更多图片 -->
		<view class="more-popup" v-if="showMore">
			<view class="more-popup-list">
				<view class="title">
					我的报告单
				</view>
				<view class="more-image">
					<view v-for="(item, index) in imageListData" :key="index" class="more-image-1"
						@click="onPreviewImage(item)">
						<image :src="item"></image>
					</view>
				</view>
			</view>
			<view class="close-btn-bottom" @tap="onClose">
				<image src="/static/chanjianTool/icon21.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		throttleTap
	} from '@/utils/index.js';
	import {
		getReportList,
		getDelete
	} from '../../api/obstetric.js';
	import md from '../../md';

	// 控制查看更多图片
	const showMore = ref(false)

	// 存储查看的图片数组
	const imageListData = ref([])
	
	// 报告单数据
	const listData = ref([])
	
	// 查看更多图片
	const onMoreImage = (item) => {
		console.log(item)
		showMore.value = true
		imageListData.value = item
	}
	// 关闭
	const onClose = () => {
		showMore.value = false;
	}
	// 图片预览
	const onPreviewImage = (url) => {
		console.log(url)
		uni.previewImage({
			current: '1',
			urls: [url]
		})
	}
	// 拼接检查项目名称
	const getProject = (projects) => {
		return projects.map(project => project.itemName).join('、');
	}
	// 删除事件
	const onDelete = throttleTap((id) => {
		console.log(id)
		uni.showModal({
			// title: '提示',
			content: '确认删除吗？',
			success: function (res) {
				if (res.confirm) {
					getDeleteFn(id)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		// getDeleteFn(id)
	})
	// 返回上一页面
	const backHandler = () => {
		uni.navigateBack();
	}
  // 删除报告单
	const getDeleteFn = async (id) => {
		const { code, message, data, success } = await getDelete({id})
		// const { code, message, data, success } = {
		// 	code: 200,
		// 	message: '成功',
		// 	success: true,
		// 	data: {}
		// }
		if (success) {
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			})
			// 我的报告单
			getReportListFn()
		} else {
			uni.showToast({
				title: message,
				icon: 'none'
			})
		}
	}
	// 获取报告单
	const getReportListFn = async () => {
		console.log('获取报告单')
		const { code, message, data, success } = await getReportList()
		if (success) {
			listData.value = data
		} else {
			uni.showToast({
				title: message,
				icon: 'none'
			})
		}
	}

	onLoad(() => {
		// 我的报告单
		getReportListFn()
	})
</script>

<style lang="less" scoped>
	.report-card {
		// position: absolute;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;

		&-con {
			position: absolute;
			// width: 750rpx;
			top: 190rpx;
			left: 31rpx;

			.con-box {
				width: 682rpx;
				height: calc(100vh - 220rpx);
				overflow-y: auto;
				.no-data{
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 168rpx;
						height: 167rpx;
					}
				}
			}

			.list-item {
				width: 682rpx;
				border-radius: 24rpx;
				background: #ffffff;
				padding: 35rpx 34rpx 45rpx 34rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;

				.item-time {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-time-l {
						display: flex;
						align-items: center;
						font-weight: 600;
						font-size: 32rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 15rpx;
						}
					}

					.item-time-r {
						image {
							width: 31rpx;
							height: 31rpx;
						}
					}
				}

				.item-line {
					width: 100%;
					height: 1rpx;
					margin: 30rpx 0;
					background: #f4e1c4;
				}

				.item-content {

					.content-1,
					.content-2 {
						font-size: 26rpx;
						font-weight: 600;
					}

					.content-2 {
						margin-top: 15rpx;
					}

					.content-3 {
						display: flex;
						flex-wrap: wrap;
						margin-top: 35rpx;

						.content-3-v {
							width: 192rpx;
							height: 192rpx;
							border-radius: 10rpx;
							overflow: hidden;
							margin-right: 13rpx;
							position: relative;
						}

						.content-3-v.has-more image {
							opacity: 0.7;
						}

						.more-count {
							position: absolute;
							top: 0;
							left: 0;
							background-color: rgba(0, 0, 0, 0.5);
							color: white;
							width: 192rpx;
							height: 192rpx;
							border-radius: 10rpx;
							font-size: 38rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						image {
							width: 192rpx;
							height: 192rpx;
						}
					}
				}
			}
		}
		.more-popup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 9999;

			.more-popup-list {
				width: 661rpx;
				height: 881rpx;
				background: #ffffff;
				border-radius: 52rpx;
				padding: 50rpx 58rpx;
				box-sizing: border-box;


				.title {
					text-align: center;
					font-size: 36rpx;
					color: #b27c1e;
					margin-bottom: 45rpx;
				}

				.more-image {
					width: 100%;
					height: 695rpx;
					overflow: auto;
					display: flex;
					flex-wrap: wrap;
					align-content: flex-start;
				}

				.more-image-1 {
					width: 169rpx;
					height: 169rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-right: 12rpx;
					margin-bottom: 30rpx;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						/* 新增：确保图片填充模式与父容器一致 */
						object-fit: cover;
						/* 可选：加载时避免闪烁 */
						display: block;
					}
				}
			}
		}

		.close-btn-bottom {
			margin: 40rpx auto 0 auto;
			width: 70rpx;
			height: 70rpx;
			text-align: center;
			z-index: 10001;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
			// 自定义头部
		.page-top {
		width: 100%;
			display: flex;
			align-items: center;
		}

		.btnback {
			width: 16rpx;
			height: 29rpx;
			// margin-top: 110rpx;
			// margin-left: 35rpx;
		}

		.page_title {
			width: 100%;
			font-size: 34rpx;
			font-weight: 500;
			text-align: center;
			color: #1d1e25;
			line-height: 36rpx;
			// margin-top: -46rpx;
			// margin-left: 0rpx;
		}
	}
</style>