<template>
	<view>
		<view class="postnatal" style="background-image: url(/static/chanjianTool/bg.png);">
			<view class="page-top">
				<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
				<view class="page_title">产检提醒</view>
			</view>

			<view class="postnatal-con">
				<!-- 轮播图 -->
				<swiper class="banner-swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in homeInfo.bannerList" :key="index">
						<image class="banner-img" :src="`${item.imageUrl}`" mode="aspectFill"
							@click="handleBannerClick(item, index)" />
					</swiper-item>
				</swiper>
				<!-- 孕期信息 -->
				<view class="postnatal-con-info">
					<view class="info-l">
						孕{{homeInfo.gestationalWeeks}}周
					</view>
					<view class="info-c">
						<image class="info-img" src="/static/chanjianTool/line.png"></image>
					</view>
					<view class="info-r">
						预产期：{{homeInfo.dueDate}}
					</view>
				</view>
				<!-- 按钮 -->
				<view class="postnatal-con-btn">
					<view class="btn-item" v-for="({name, imageSrc, type}, index) in btnList" :key="index" @click="onBtn(type)">
						<image class="image1" :src="`${imageSrc}`"></image>
						<view class="btn-item-text">
							{{name}}
						</view>
						<image class="image2" src="/static/chanjianTool/right.png"></image>
					</view>
				</view>
				<!-- 产检记录 -->
				<view class="postnatal-con-record">
					<view class="record-item"
						v-for="({id, checkupDate, index, pregnancyWeek, status, examinationItems, type}, i) in homeInfo.checkupList"
						@click="onDetails(id)" :key="i">
						<image class="add-image" v-if="type === 1 " src="/static/chanjianTool/bs.png"></image>
						<view class="item-t">
							<view class="item-t-l">
								第{{index}}次产检
							</view>
							<view class="item-t-r">
								<view class="">
									产检时间：{{ checkupDate ? checkupDate : '---'}}
								</view>
								<image @click.stop="onEdit(id, checkupDate)" class="edit-img" src="/static/chanjianTool/edit.png">
								</image>
							</view>
						</view>
						<view class="item-line">

						</view>
						<view class="item-c">
							<view class="item-c-l">
								孕期{{pregnancyWeek}}周
							</view>
							<view class="">
								<image class="record-img" :src="getSrcUrl(status)"></image>
							</view>
						</view>
						<view class="item-b">
							重点：{{getProject(examinationItems)}}
						</view>
					</view>
				</view>
			</view>
			<!-- 新增产检 -->
			<view class="postnatal-add" @click="onAdd">
				<image src="/static/chanjianTool/add.png"></image>
			</view>
			<!-- 使用封装后的日期选择器组件 -->
			<DatePicker v-model:visible="visible" :default-date="time" @confirm="handleDateConfirm" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		jump,
		JumpType,
		throttleTap
	} from '@/utils/index.js';
	import md from '../../md';
	import {
		getInfo,
		getUpdate
	} from '../../api/obstetric.js';
	// 导入日期选择器组件
	import DatePicker from '@/components/DatePicker.vue'
	const {
		proxy
	} = getCurrentInstance();
	const $baseUrl = proxy.$baseUrl;
	const back_btn = ref('')

	// 时间弹窗控制
	const visible = ref(false)
	// 时间
	const time = ref('')

	// 保存要修改的id
	const editId = ref(null)

	// 首页信息
	const homeInfo = ref({})

	// 按钮列表
	const btnList = ref([{
			name: '报告单',
			imageSrc: '/static/chanjianTool/icon2.png',
			type: 1
		},
		{
			name: '日历',
			imageSrc: '/static/chanjianTool/icon3.png',
			type: 2
		}
	])

	// 跳转产检详情页面
	const onDetails = (id) => {
		uni.navigateTo({
			url: `/pages/productionDetails/productionDetails?id=${id}`
		})
	}
	// 拼接检查项目名称
	const getProject = (projects) => {
		return projects.map(project => project.itemName).join('、');
	}
	// 根据状态返回图片
	const getSrcUrl = (status) => {
		const imageMap = {
			'pending': '/static/chanjianTool/icon4.png',
			'expired': '/static/chanjianTool/icon5.png',
			'completed': '/static/chanjianTool/icon6.png',
		};
		return imageMap[status];

	}
	// 首页组件逻辑
	const backHandler = () => {
		if (!back_btn) {
			uni.navigateBack();
		} else {
			jump({
				type: JumpType.INNER,
				url: `/pages/index/index`
			})
		}
	}
	// 点击轮播图事件
	const handleBannerClick = (item, index) => {
		console.log(item)
		// 跳转
		jump({
			type: item.jumpType,
			url: item.jumpUrl
		})
		// let buttonName = '';
		// switch(index){
		// 	case 0:
		// 		buttonName = '第一张焦点图';
		// 		break;
		// 	case 1:
		// 		buttonName = '第二张焦点图';
		// 		break;
		// 	case 2:
		// 		buttonName = '第三张焦点图';
		// 		break;
		// }
		// md.sensorLogTake({
		// 	xcxClick: "产品提醒页-首屏页面点击",
		// 	pageName: "产品提醒页-首屏",
		// 	buttonName: buttonName,
		// });
	}
	// 新增体检
	const onAdd = () => {
		uni.navigateTo({
			url: '/pages/addPostnatal/addPostnatal'
		})
	}
	// 按钮点击
	const onBtn = (type) => {
		// type 1  报告单 2 日历
		switch (type) {
			case 1:
				uni.navigateTo({
					url: '/pages/myReportCard/myReportCard'
				})
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/productionCalendar/productionCalendar'
				})
				break;
			default:
				break;
		}
	}

	// 编辑时间
	const onEdit = (id, newTime) => {
		console.log(id, newTime)
		time.value = newTime
		visible.value = true
		editId.value = id
	}
	// 选择日期回调确认
	const handleDateConfirm = (date) => {
		console.log('选择的日期是：', date);
		time.value = date;
		console.log(editId.value, time.value)
		onEditTime()
	}
	// 修改产检时间
	const onEditTime = async () => {
		// const { code, success, message } = await getUpdate({id: editId.value,checkupDate: time.value})
		const { code, success, message } = {
			code: 200,
			success: true,
			message: '成功',
		}
		if (success) {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			// 重新获取信息
			getInfoFn()
		} else {
			uni.showToast({
				title: message,
				icon: 'none'
			})
		}
	}
	// 获取信息接口
	const getInfoFn = async () => {
		console.log('获取信息')
		// 获取信息
		// const {code,success, message, data } = await getInfo()
		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: 'completed', //待产检、已过期、已产检，
					// 产检项目
					examinationItems: [{
							itemName: '测量胎儿颈部透明层厚度（NT)',
							id: 1
						},
						{
							itemName: '无创产前基因检测(NIPT)(非必查)',
							id: 2
						}
					]
				}]
			}
		}
		if (success) {
			homeInfo.value = data
		} else{
			uni.showToast({
			  title: message,
			  icon: "none",
			});
		}
	}
	onShow(() => {
		// 获取信息
		getInfoFn()
	})
</script>

<style lang="less" scoped>
	@import "@/common.less";

	.postnatal {
		// position: absolute;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;

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

			&-info {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				font-weight: 500;

				.info-c {
					width: 2rpx;
					height: 22rpx;
					margin: 0 16rpx;

					.info-img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}

			&-btn {
				margin-top: 55rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.btn-item {
					display: flex;
					align-items: center;
					// justify-content: center;
					width: 334rpx;
					height: 115rpx;
					background: #ffffff;
					border-radius: 16rpx;
					font-size: 34rpx;

					.image1 {
						width: 58rpx;
						height: 58rpx;
						margin-left: 80rpx;
					}

					.btn-item-text {
						margin-left: 12rpx;
						margin-right: 52rpx;
					}

					.image2 {
						width: 12rpx;
						height: 23rpx;
					}
				}
			}

			&-record {
				height: calc(100vh - 600rpx);
				overflow-y: auto;

				.record-item {
					width: 687rpx;
					background-color: #fff;
					margin-bottom: 30rpx;
					border-radius: 24rpx;
					box-sizing: border-box;
					padding: 40rpx 32rpx;
					position: relative;

					.add-image {
						position: absolute;
						left: 0;
						top: 0;
						width: 111rpx;
						height: 30rpx;
					}

					.item-t,
					.item-c {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.item-line {
						width: 100%;
						height: 2rpx;
						background-color: #fcf5ec;
						margin: 20rpx 0;
					}

					.item-t {
						font-size: 24rpx;
						font-weight: 500px;
						color: #000000;

						.item-t-r {
							display: flex;
							align-items: center;
						}
					}

					.edit-img {
						width: 21rpx;
						height: 21rpx;
						margin-left: 14rpx;
					}

					.record-img {
						width: 142rpx;
						height: 35rpx;
					}

					.item-c {
						&-l {
							font-size: 38rpx;
							color: @color-gold-cover;
						}

					}

					.item-b {
						width: 100%;
						white-space: nowrap;
						/* 禁止换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						margin-top: 20rpx;
						color: #6f6d67;
						font-size: 24rpx
					}
				}
			}
		}

		&-add {
			position: fixed;
			right: 31rpx;
			bottom: 230rpx;

			image {
				width: 112rpx;
				height: 113rpx;
			}
		}
	}

	.banner-swiper {
		width: 687rpx;
		height: 177rpx;
		border-radius: 12rpx;
		overflow: hidden;

		.banner-img {
			width: 100%;
			height: 100%;
			// border-radius: 16rpx;
		}
	}


	.page-top {
		width: 100%;
	}

	.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;
		margin-top: -46rpx;
		margin-left: 0rpx;
	}
</style>