<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"
                    >
                        <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"
                    >
                        <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"
                    >
                        <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">
            <image class="tip-icon" src="/static/shengzhangTool/tips.png" mode="aspectFit"></image>
            <!-- <text class="tip-desc">如何选择你的宝宝身高、体重、头围</text> -->
        </view>
    </view>
		</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"
    />
</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'

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-top: none; border-bottom: none;'
// const indicatorStyle = 'height: 40px; border-top: 1px solid transparent; border-bottom: 1px solid transparent;'
const indicatorStyle = `height: 40px;
        border: none;
        // background: rgba(0,0,0,0.1);
`

// 生成数值范围
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)
	}
}

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 {
			// margin-bottom: 30rpx;
			
			.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;
			
			.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;
				// margin: 25rpx 25rpx 0rpx 25rpx;
				
				.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: 400rpx;
							background: transparent;

							&.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;
					// cursor: pointer;
					
					&: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;
					// cursor: pointer;
					
					&: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;
					// cursor: pointer;
					
					&:hover {
						opacity: 0.8;
					}
					
					.tip-text {
						font-size: 24rpx;
						color: #1d1e26;
						text-decoration: underline;
						
						&.tip-text-active {
							color: red !important;
						}
					}
				}
			}
			
		}

		.submit-section {
			margin-top: 40rpx;
			
			.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;
				}
				
				// .tip-desc {
				// 	font-size: 24rpx;
				// 	color: #999;
				// }
			}
		}
	}
}
</style>

<!-- picker-view -->