<template>
	<view class="shengzhang-tools-container">
		<swiper 
			class="banner-swiper" 
			:indicator-dots="swiperData.length > 1" 
			:autoplay="swiperData.length > 1" 
			:circular="swiperData.length > 1"
			indicator-color="#dfddd9"
			indicator-active-color="#b27c1e"
			:indicator-top="596"
		>
			<swiper-item v-for="(item, index) in swiperData" :key="index">
				<image 
					class="banner-img"
					:src="`${item?.bannerImg}`"
					mode="aspectFill"
					@click="bannerHandler(item)"
				/>
			</swiper-item>
		</swiper>

		<image @tap="backHandler" class="btnback" :src="`/static/shengzhangTool/backBtn.png`"></image>
		<text class="title">生长测评</text>
		<view class="info-container">
			<!-- 顶部宝宝信息区域 -->
			<view class="baby-info-section">
				<view class="baby-avatar">
					<image class="avatar-img" src="/static/shengzhangTool/avatar.png" mode="aspectFill"></image>
				</view>
				<view class="baby-details">
					<view class="baby-name-row">
						<text class="baby-name">宝宝名称</text>
						<image class="change-baby-btn" @click="changeBaby" src="/static/shengzhangTool/changeBaby.png" mode="aspectFit"></image>
					</view>
					<view class="baby-info-row">
						<view class="gender-age">
							<image class="gender-icon" src="/static/shengzhangTool/sex1.png" mode="aspectFit"></image>
							<text class="age-text">8月龄</text>
						</view>
						<text class="birth-date">2024-10-20</text>
					</view>
				</view>
				<view class="record-btn" @click="viewRecords">
					<text class="record-text">测评记录</text>
					<image class="arrow-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 分割线 -->
			<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>

			<!-- 测评信息区域 -->
			<view class="test-info-section">
				<view class="test-date-row">
					<text class="label">本次测评日期</text>
					<view class="date-container" @click="showDatePicker">
						<text class="date-value">{{ selectedDate }}</text>
						<image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image>
					</view>
				</view>
				<!-- 分割线 -->
				<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
				
				<view class="feeding-row">
					<text class="label">宝宝喂养方式</text>
					<view class="feeding-select" @click="showFeedingPopup">
						<text class="feeding-value">{{ selectedFeedText }}</text>
						<image class="dropdown-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 测量数据区域 -->
			<view class="measurement-section">
				<view class="measurement-header">
					<view class="measurement-item">
						<text class="measurement-title">宝宝身高</text>
					</view>
					<view class="measurement-item">
						<text class="measurement-title">宝宝体重</text>
					</view>
					<view class="measurement-item">
						<text class="measurement-title">宝宝头围</text>
					</view>
				</view>

				<!-- 替换输入框区域为picker-view -->
				<view class="input-section">
					<view class="input-item">
						<view class="input-container">
							<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
							<picker-view
								class="measurement-picker" 
								:class="{ 'measurement-picker-disabled': isHeightTipActive }"
								:value="heightPickerValue" 
								@change="isHeightTipActive ? null : onHeightChange"
								:indicator-style="indicatorStyle"
								indicator-class="date-picker"
							>
								<picker-view-column>
									<view v-for="(item, index) in heightRange" :key="index" class="picker-item">
										{{ item }}
									</view>
								</picker-view-column>
							</picker-view>
							<text class="unit">cm</text>
						</view>
					</view>
					<view class="input-item">
						<view class="input-container">
							<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
							<picker-view
								class="measurement-picker" 
								:class="{ 'measurement-picker-disabled': isWeightTipActive }"
								:value="weightPickerValue" 
								@change="isWeightTipActive ? null : onWeightChange"
								:indicator-style="indicatorStyle"
								indicator-class="date-picker"
							>
								<picker-view-column>
									<view v-for="(item, index) in weightRange" :key="index" class="picker-item">
										{{ item }}
									</view>
								</picker-view-column>
							</picker-view>
							<text class="unit">kg</text>
						</view>
					</view>
					<view class="input-item">
						<view class="input-container">
							<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
							<picker-view 
								class="measurement-picker" 
								:class="{ 'measurement-picker-disabled': isHeadTipActive }"
								:value="headPickerValue" 
								@change="isHeadTipActive ? null : onHeadChange"
								:indicator-style="indicatorStyle"
								indicator-class="date-picker"
							>
								<picker-view-column>
									<view v-for="(item, index) in headRange" :key="index" class="picker-item">
										{{ item }}
									</view>
								</picker-view-column>
							</picker-view>
							<text class="unit">cm</text>
						</view>
					</view>
				</view>

				<!-- 底部提示 -->
				<view class="tips-section">
					<view class="tip-item0" @click="toggleHeightTip">
						<text class="tip-text" :class="{ 'tip-text-active': isHeightTipActive }">暂无数据</text>
					</view>
					<view class="tip-item1" @click="toggleWeightTip">
						<text class="tip-text" :class="{ 'tip-text-active': isWeightTipActive }">暂无数据</text>
					</view>
					<view class="tip-item2" @click="toggleHeadTip">
						<text class="tip-text" :class="{ 'tip-text-active': isHeadTipActive }">暂无数据</text>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submit-section">
				<view class="submit-btn" @click="submitData">
					<image class="submit-bg" src="/static/shengzhangTool/submitBtn.png" mode="aspectFit"></image>
					<!-- <text class="submit-text">确认提交</text> -->
				</view>
				<view class="bottom-tip" @click="onClickTips">
					<image class="tip-icon" src="/static/shengzhangTool/tips.png" mode="aspectFit"></image>
					<!-- <text class="tip-desc">如何选择你的宝宝身高、体重、头围</text> -->
				</view>
			</view>
		</view>
		<view class="guide-container" v-if="guideIndex != -1" @click="guideHandler">
			<image v-if="guideIndex == 0" class="guide-img0" src="/static/shengzhangTool/guide0.png" mode="aspectFit"></image>
			<image v-if="guideIndex == 1" class="guide-img1" src="/static/shengzhangTool/guide1.png" mode="aspectFit"></image>
			<image v-if="guideIndex == 2" class="guide-img2" src="/static/shengzhangTool/guide2.png" mode="aspectFit"></image>
		</view>
	</view>

	<!-- 在页面底部添加弹窗组件 -->
	<BabySwitchPopup 
		v-model:visible="showBabySwitchPopup"
		:babyList="babyList"
		v-model:selectedIndex="currentBabyIndex"
		@change="onBabyChange"
	/>
	
	<!-- 喂养方式弹窗 -->
	<BabyFeedSwitchPopup 
		v-model:visible="showFeedSwitchPopup"
		v-model:selectedIndex="currentFeedIndex"
		@change="onFeedChange"
	/>
	
	<!-- 日期选择弹窗 -->
	<DatePickerPopup 
		v-model:visible="showDatePickerPopup"
		v-model:selectedDate="selectedDate"
		@change="onDateChange"
	/>
	
	<!-- 宝宝测评提示弹窗 -->
	<BabyTestTipsPopup 
		v-model:visible="showBabyTestTipsPopup"
	/>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue'
import DatePickerPopup from '@/components/DatePickerPopup.vue'
import BabyTestTipsPopup from '@/components/BabyTestTipsPopup.vue'

const swiperData = ref([
	{ bannerImg: '/static/shengzhangTool/banner1.png' }, 
	{ bannerImg: '/static/shengzhangTool/banner2.png' }, 
	{ bannerImg: '/static/shengzhangTool/banner3.png' }
])

const bannerHandler = (item) => {
	console.log(item)
}

// 首页组件逻辑
const backHandler = () => {
	try {
		uni.navigateBack({
			success: () => {
				console.log('返回成功')
			},
			fail: backFailHandler
		})
	} catch (error) {
		console.log('error=', error)
		jump({
			type: JumpType.INNER,
			url: "/pages/index/index"
		})
	}
}

const backFailHandler = (err) => {
	console.log('backFailHandler=', err)
	jump({
		type: JumpType.INNER,
		url: "/pages/index/index"
	})
}

// 替换原有的变量
const height = ref('50.3')
const weight = ref('3.32')
const headCircumference = ref('34.5')

// 添加picker-view相关数据
const indicatorStyle = `height: 40px; border: none;`

// 生成数值范围
const generateRange = (min, max, step = 0.1) => {
	const range = []
	for (let i = min; i <= max; i += step) {
		if (step < 0.1) {
			range.push(parseFloat(i.toFixed(2)))
		} else {
			range.push(parseFloat(i.toFixed(1)))
		}
	}
	return range
}

// 日期选择器相关状态
const showDatePickerPopup = ref(false)
const selectedDate = ref('2025-06-06')

const showDatePicker = () => {
	console.log('显示日期选择器')
	showDatePickerPopup.value = true
}

// 处理日期选择变化
const onDateChange = (date) => {
	console.log('选择了日期:', date)
	selectedDate.value = date
}

const showFeedingPopup = () => {
	console.log('显示喂养方式弹窗')
	showFeedSwitchPopup.value = true
	currentFeedIndex.value = 1 // 默认选中"母乳+奶粉混合喂养"
}

// 身高范围 (40-80cm)
const heightRange = generateRange(40, 80, 0.1)
const heightPickerValue = ref([heightRange.indexOf(parseFloat(height.value))])

// 体重范围 (2-10kg)
const weightRange = generateRange(2, 10, 0.01)
const weightPickerValue = ref([weightRange.indexOf(parseFloat(weight.value))])

// 头围范围 (30-50cm)
const headRange = generateRange(30, 50, 0.1)
const headPickerValue = ref([headRange.indexOf(parseFloat(headCircumference.value))])

// picker-view change事件处理
const onHeightChange = (e) => {
	const index = e.detail.value[0]
	height.value = heightRange[index].toString()
	heightPickerValue.value = [index]
}

const onWeightChange = (e) => {
	const index = e.detail.value[0]
	weight.value = weightRange[index].toString()
	weightPickerValue.value = [index]
}

const onHeadChange = (e) => {
	const index = e.detail.value[0]
	headCircumference.value = headRange[index].toString()
	headPickerValue.value = [index]
}

// 其他方法保持不变
const changeBaby = () => {
	console.log('切换宝宝')
	showBabySwitchPopup.value = true
	currentBabyIndex.value = 0 // 默认选中第一个宝宝
}

const viewRecords = () => {
	console.log('查看测评记录')
}

const submitData = () => {
	console.log('提交数据', {
		height: height.value,
		weight: weight.value,
		headCircumference: headCircumference.value
	})
}

// 添加以下数据
const showBabySwitchPopup = ref(false)
const currentBabyIndex = ref(0)

// 喂养方式弹窗相关状态
const showFeedSwitchPopup = ref(false)
const currentFeedIndex = ref(1) // 默认选中"母乳+奶粉混合喂养"
const selectedFeedText = ref('母乳+奶粉混合喂养')

// 示例宝宝列表数据
const babyList = ref([
	{
		name: '宝宝名称',
		gender: 1, // 1: 男孩, 0: 女孩
		birthday: '2024-10-20',
		avatar: '/static/shengzhangTool/avatar.png'
	},
	{
		name: '宝宝名称',
		gender: 0,
		birthday: '2022-04-20',
		avatar: '/static/shengzhangTool/avatar.png'
	}
])

// 处理宝宝选择变化
const onBabyChange = (baby, index) => {
	console.log('选择了宝宝:', baby, index)
	// 这里可以更新页面上的宝宝信息
	// 比如更新宝宝名称、性别、生日等
}

// 处理喂养方式选择变化
const onFeedChange = (feedOption, index) => {
	console.log('选择了喂养方式:', feedOption, index)
	selectedFeedText.value = feedOption.name
	currentFeedIndex.value = index
	
	// 这里可以更新页面上显示的喂养方式
	// 比如更新 feeding-select 中的文本
}

// 身高提示状态管理
const isHeightTipActive = ref(false)

// 处理身高提示点击
const toggleHeightTip = () => {
	if (!canClick(0)) return

	pushCount(0)
	isHeightTipActive.value = !isHeightTipActive.value
	console.log('身高提示状态:', isHeightTipActive.value)
}

// 体重提示状态管理
const isWeightTipActive = ref(false)

// 处理体重提示点击
const toggleWeightTip = () => {
	if (!canClick(1)) return

	pushCount(1)
	isWeightTipActive.value = !isWeightTipActive.value
	console.log('体重提示状态:', isWeightTipActive.value)
}

// 头围提示状态管理
const isHeadTipActive = ref(false)

// 处理头围提示点击
const toggleHeadTip = () => {
	if (!canClick(2)) return

	pushCount(2)
	isHeadTipActive.value = !isHeadTipActive.value
	console.log('头围提示状态:', isHeadTipActive.value)
}

const selectCountArr = ref([])

// 数组内存在当前索引可以点击，如果不存在，在判断是不是已经选择两个了，如果已经选择两个，则不能点击
const canClick = (val) => {
	if (selectCountArr.value.indexOf(val) == -1) {
		if (selectCountArr.value.length >= 2) {
			return false
		}
		return true
	} else {
		return true
	}
}

const pushCount = (val) => {
	if (selectCountArr.value.indexOf(val) == -1) {
		selectCountArr.value.push(val)
	} else {
		selectCountArr.value.splice(selectCountArr.value.indexOf(val), 1)
	}
}

// 宝宝测评提示弹窗状态
const showBabyTestTipsPopup = ref(false)

const onClickTips = () => {
	console.log('显示宝宝测评提示弹窗')
	showBabyTestTipsPopup.value = true
}

const guideIndex = ref(-1);

const guideHandler = () => {
	guideIndex.value++
	if (guideIndex.value > 2) {
		guideIndex.value = -1;
	}
}

onMounted(() => {
	
})
</script>

<style lang="less" scoped>
.shengzhang-tools-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #fdf6eb;
	
	.banner-swiper {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 191rpx;
		width: 687rpx;
		height: 176rpx;
		
		.banner-img {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
	
	.btnback {
		position: absolute;
		top: 119rpx;
		left: 30rpx;
		width: 29rpx;
		height: 29rpx;
	}
	
	.title {
		position: absolute;
		top: 111rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 34rpx;
		color: #000;
		font-weight: 600;
	}
	
	.info-container {
		width: 750rpx;
		height: 1210rpx;
		margin: 414rpx auto 0;
		background-color: #ffffff;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;

		.baby-info-section {
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			
			.baby-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;
				
				.avatar-img {
					width: 100%;
					height: 100%;
				}
			}
			
			.baby-details {
				flex: 1;
				
				.baby-name-row {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					
					.baby-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}
					
					.change-baby-btn {
						width: 139rpx;
						height: 37rpx;
					}
				}
				
				.baby-info-row {
					display: flex;
					align-items: center;
					
					.gender-age {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						
						.gender-icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}
						
						.age-text {
							font-size: 26rpx;
							color: #666;
						}
					}
					
					.birth-date {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
			
			.record-btn {
				display: flex;
				align-items: center;
				
				.record-text {
					font-size: 26rpx;
					color: #666;
					margin-right: 8rpx;
				}
				
				.arrow-icon {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.divider-line {
			width: 100%;
			height: 2rpx;
			margin: 20rpx 0;
		}

		.test-info-section {
			.test-date-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.label {
					font-size: 28rpx;
					color: #333;
				}
				
				.date-container {
					display: flex;
					align-items: center;
					
					.date-value {
						font-size: 28rpx;
						color: #666;
						margin-right: 10rpx;
					}
					
					.edit-icon {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			
			.feeding-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 25rpx;
				
				.label {
					font-size: 28rpx;
					color: #333;
				}
				
				.feeding-select {
					display: flex;
					align-items: center;
					
					.feeding-value {
						font-size: 28rpx;
						color: #666;
						margin-right: 8rpx;
					}
					
					.dropdown-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.measurement-section {
			margin-bottom: 40rpx;
			margin-top: 80rpx;
			
			
			.measurement-header {
				display: flex;
				margin-bottom: 25rpx;
				
				.measurement-item {
					flex: 1;
					text-align: center;
					
					.measurement-title {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
				}
			}
			
			.input-section {
				display: flex;
				
				.input-item {
					flex: 1;
					display: flex;
					justify-content: center;
					
					.input-container {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.input-bg {
							position: absolute;
							width: 105rpx;
							height: 44rpx;
							z-index: 1;
						}
						
						.measurement-picker {
							position: relative;
							z-index: 2;
							width: 70rpx;
							height: 370rpx;
							background: transparent;
							
							:deep(.date-picker::before) {
								content: none;
							}

							:deep(.date-picker::after) {
								content: none;
							}

							&.measurement-picker-disabled {
								opacity: 0.4;
								pointer-events: none;
							}
							
							.picker-item {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
								height: 40rpx;
								line-height: 40rpx;
							}
						}
						
						.unit {
							position: absolute;
							z-index: 2;
							font-size: 24rpx;
							color: #666;
							margin-left: 162rpx;
							font-weight: 600;
						}
					}
				}
			}

			.tips-section {
				display: flex;
				
				.tip-item0 {
					flex: 1;
					text-align: center;
					
					&:hover {
						opacity: 0.8;
					}
					
					.tip-text {
						font-size: 24rpx;
						color: #1d1e26;
						text-decoration: underline;
						
						&.tip-text-active {
							color: red !important;
						}
					}
				}
				
				.tip-item1 {
					flex: 1;
					text-align: center;
					
					&:hover {
						opacity: 0.8;
					}
					
					.tip-text {
						font-size: 24rpx;
						color: #1d1e26;
						text-decoration: underline;
						
						&.tip-text-active {
							color: red !important;
						}
					}
				}
				
				.tip-item2 {
					flex: 1;
					text-align: center;
					
					&:hover {
						opacity: 0.8;
					}
					
					.tip-text {
						font-size: 24rpx;
						color: #1d1e26;
						text-decoration: underline;
						
						&.tip-text-active {
							color: red !important;
						}
					}
				}
			}
		}

		.submit-section {
			margin-top: 80rpx;
			
			.submit-btn {
				position: relative;
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				
				.submit-bg {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
				
				.submit-text {
					position: relative;
					z-index: 2;
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
				}
			}
			
			.bottom-tip {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.tip-icon {
					width: 424rpx;
					height: 23rpx;
				}
			}
		}
	}

	.guide-container{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		.guide-img0{
			width: 100%;
			height: 1624rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.guide-img1{		
			width: 100%;
			height: 1624rpx;	
			position: absolute;
			top: 0;
			left: 0;
		}
		.guide-img2{
			width: 100%;
			height: 1624rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
</style>