<template>
	<view>
		<view class="postnatal">
			<!-- <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="postnatal-con">
				<!-- 轮播图 -->
				<swiper class="banner-swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image class="banner-img" :src="`${item.img}`" 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,
	postnatalJSON
} 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 bannerList = ref([])

// 首页信息
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)
	// 跳转
	if (item?.url != "") {
		jump({
			type: item.type,
			url: item.url
		})
	}

	// 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) => {
	// const items = JSON.stringify(homeInfo.value)
	// 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})
	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()
	if (success) {
		homeInfo.value = data
		uni.setStorageSync('dueDate', data.dueDate);
	} else {
		uni.showToast({
			title: message,
			icon: "none",
		});
	}
}

// 获取banner图
const postnatalJSONFn = async () => {
	const { success, data, message } = await postnatalJSON()
	if (success) {
		bannerList.value = data.bannerList
	} else {
		uni.showToast({
			title: message,
			icon: "none",
		});
	}
}

onShow(() => {
	// 获取banner图
	postnatalJSONFn()
	// 获取信息
	getInfoFn()
})
</script>

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

.postnatal {
	// position: absolute;
	width: 100%;
	min-height: 100vh;
	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 - 650rpx);
			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%;
	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>