<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="`${$baseUrl}chanjianTool/1001/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="`${$baseUrl}chanjianTool/1001/icon19.png`"></image>
								{{ item.checkupDate }}
							</view>

							<view class="item-time-r" @click="onDelete(item.id)">
								<image :src="`${$baseUrl}chanjianTool/1001/delete.png`"></image>
							</view>
						</view>
						<view class="item-line">

						</view>
						<view class="item-content">
							<view class="content-1">
								第{{ item.checkupinfo.checkupTimes}}次产检:孕{{ item.checkupinfo.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="aspectFill"></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="`${$baseUrl}chanjianTool/1001/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" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="close-btn-bottom" @tap="onClose">
				<image :src="`${$baseUrl}chanjianTool/1001/icon21.png`"></image>
			</view>
		</view>
		<!-- 专家咨询 -->
		<button class="form-btn" @click="onJump">
			专家在线咨询
		</button>
	</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 { getHealthField } from "@/api/common";
import { jump, JumpType } from "@/utils";
import md from '../../md';
import { useUserStore } from "@/stores/user";

// 获取用户信息
const userStore = useUserStore();
const babyId = ref(userStore.babyInfo?.content?.id)

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

// 存储查看的图片数组
const imageListData = ref([])

// 报告单数据
const listData = ref([])

// 跳转小程序
const onJump = async () => {
	const res = await getHealthField();

    if (!res.success) {
      uni.showToast({
        title: "获取健康字段失败",
        icon: "none",
      });
      return;
    }

    const { sign, timestamp, appId, partnerUserId, env } = res.data;

    jump({
      type: JumpType.MINI,
      url: "/pages/partner/redirect",
      extra: {
        appId: "wx81ecfb5aa3fb512f",
        envVersion: env,
        extraData: {
          sign, // 参考 4.请求参数
          timestamp, // 参考 4.请求参数
          appId, // 参考 4.请求参数
          partnerUserId, // 参考 4.请求参数
          targetApp:
            "/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
        },
      },
    });
}
// 查看更多图片
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 })
	if (success) {
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		})
		// 我的报告单
		getReportListFn()
	} else {
		uni.showToast({
			title: message,
			icon: 'none'
		})
	}
}
// 获取报告单
const getReportListFn = async () => {
	const { code, message, data, success } = await getReportList({babyId: babyId.value})
	console.log('报告单列表', code, message, data, success)
	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 - 350rpx);
			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;
		}
	}
	// 保存
	.form-btn {
		width: 686rpx;
		height: 94rpx;
		border-radius: 46rpx;
		background-color: #d3a358;
		color: #ffffff;
		font-size: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}
</style>