<template>
	<view class="production-calendar">
		<view class="page-top">
			<view class="header-content">
				<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
				<view class="page_title">
					<view class="info-l">
						<image :src="$baseUrl + 'common/default_avatar.png'"></image>
					</view>
					<view class="info-r">
						<view class="info-r-t">
							孕期
						</view>
						<view class="info-r-b">
							怀孕{{info.gestationalWeeks}}周
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 显示区域 -->
		<view class="production-calendar-con">
		   <view class="calendar-box">
		   	  11111
		   </view>
			 <view class="con-list">
			   <view class="con-list-item" v-for="(item, index) in info.checkupList" :key="index" @click="onDetails(item.id)">
			   	  <view class="item-time">
			   	  	<view class="">
			   	  		第{{item.index}}次产检
			   	  	</view>
							<view class="">
								产检时间：{{item.checkupDate}}
							</view>
			   	  </view>
						<view class="item-line">
							
						</view>
						<view class="item-week">
							孕期{{item.pregnancyWeek}}周
						</view>
						<view class="item-proect">
							重点：{{getProject(item.examinationItems)}}
						</view>
			   </view>
			 </view>
		</view>
		<!-- 新增产检 -->
		<button class="form-btn" @click="onAdd">
			<image src="/static/chanjianTool/icon23.png"></image>
			新增产检
		</button>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		throttleTap,
		dateFormatter
	} from '@/utils/index.js';
	
	import {
		getInfo
	} from '../../api/obstetric.js';
	// 获取当前时间
	const time = ref(dateFormatter(new Date(), 'yyyy-MM-dd'));
	// 用户信息
	const info = ref({})
	
	// 返回
	const backHandler = () => {
		uni.navigateBack()
	}
	// 跳转新增产检页面
	const onAdd = () => {
		uni.navigateTo({
			url: '/pages/addPostnatal/addPostnatal'
		})
	}
	// 拼接检查项目名称
	const getProject = (projects) => {
		return projects.map(project => project.itemName).join('、');
	}
	
	// 跳转产检详情页面
	const onDetails = (id) => {
		uni.navigateTo({
			url: `/pages/productionDetails/productionDetails?id=${id}`
		})
	}
	
	// 获取信息接口
	const getInfoFn = async (date) => {
		console.log('获取信息', date)
		// 获取信息
		// const {code,success, message, data } = await getInfo({queryDate:date})
		const {
			code,
			success,
			message,
			data
		} = {
			code: 200,
			success: true,
			message: '成功',
			data: {
				gestationalWeeks: '8', // 几周
				dueDate: '2025-10-20', // 预产期
				// 轮播数据
				bannerList: [{
						imageUrl: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl0.png',
						jumpUrl: `https://www.baidu.com`
					},
					{
						imageUrl: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl1.png',
						jumpUrl: `https://www.baidu.com`
					},
					{
						imageUrl: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl2.png',
						jumpUrl: `https://www.baidu.com`
					}
				],
				// 产检记录
				checkupList: [{
					type: 0, // 1 是 0 否
					id: 1,
					checkupDate: '2025-8-22',
					index: '一', // 产检次数
					pregnancyWeek: '5-6', // 周数
					status: '待产检', //待产检、已过期、已产检，
					// 产检项目
					examinationItems: [{
							itemName: '测量胎儿颈部透明层厚度（NT)',
							id: 1
						},
						{
							itemName: '无创产前基因检测(NIPT)(非必查)',
							id: 2
						}
					]
				}]
			}
		}
		if (success) {
			info.value = data
		} else{
			uni.showToast({
			  title: message,
			  icon: "none",
			});
		}
	}
	onLoad(() => {
		// 获取信息
		getInfoFn(time.value)
	})
</script>
<style lang="less" scoped>
	.production-calendar {
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
   // background-color: #fdf6eb;
		 &-con {
			position: absolute;
			top: 177rpx;
			// left: 31rpx;
			width: 100%;
			
			box-sizing: border-box;
			.calendar-box{
				width: 100%;
				background-color: #fdf6eb;
				height: 473rpx;
				padding: 55rpx 0 0 0;
				box-sizing: border-box;
			}
			.con-list{
				position: absolute;
				left: 0;
				top: 456rpx;
				height: calc(100vh - 839rpx);
				background: #fff;
				border-radius: 24rpx;
				padding: 30rpx;
				overflow-y: auto;
				.con-list-item{
					width: 689rpx;
					height: 221rpx;
					border-radius: 24rpx;
					background: #f7f8fa;
					padding: 40rpx 63rpx 40rpx 35rpx;
					box-sizing: border-box;
					margin-bottom: 25rpx;
					.item-time{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: bold;
						color: #1d1e25;
					}
					.item-line{
						width: 100%;
						height: 1rpx;
						background-color: #e6e6e8;
						margin: 20rpx 0;
					}
					.item-week{
						color: #b27c1e;
						font-size: 38rpx;
					}
					.item-proect{
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 12rpx;
						color: #6f6d67;
						font-size: 23rpx;
					}
				}
			}
		 }
		// 自定义头部
		.page-top {
			width: 100%;
			background-color: #fdf6eb;
			padding: 90rpx 0 0 10rpx;
		}

		.header-content {
			display: flex;
			align-items: center; 
		}

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

		.page_title {
			color: #1d1e25;
			margin-left: 70rpx;
			display: flex;
			align-items: center;
			.info-l {
				width: 87rpx;
				height: 88rpx;
				border-radius: 50%;
				overflow: hidden;

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

			.info-r {
				display: flex;
				flex-direction: column;
				margin-left: 11rpx;

				.info-r-t {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;

					image {
						width: 18rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}
				}

				.info-r-b {
					margin-top: 10rpx;
					font-size: 24rpx;
				}
			}
		}
		// 保存
		.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;
			image{
				width: 42rpx;
				height: 42rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>