<template>
    <view v-if="visible" class="popup-overlay">
        <view class="popup-content" @click.stop>
            <!-- 弹窗头部 -->
            <view class="popup-header">
                <text class="popup-title">切换宝宝</text>
                <image 
                    class="close-btn" 
                    src="/static/shengzhangTool/changeBaby/closeBtn.png" 
                    mode="aspectFit"
                    @click="closePopup"
                />
            </view>
            
            <!-- 宝宝列表 -->
            <view class="baby-list">
                <view 
                    v-for="(baby, index) in babyList" 
                    :key="index"
                    class="baby-item"
                    :class="{ selected: selectedIndex === index }"
                    @click="selectBaby(index)"
                >
                    <!-- 选中背景 -->
                    <image 
                        v-if="selectedIndex === index"
                        class="baby-item-bg" 
                        src="/static/shengzhangTool/changeBaby/babyItemBg.png" 
                        mode="aspectFit"
                    />
                    
                    <!-- 宝宝头像 -->
                    <image 
                        class="baby-avatar" 
                        :src="baby.avatar || '/static/shengzhangTool/avatar.png'" 
                        mode="aspectFill"
                    />
                    
                    <!-- 宝宝信息 -->
                    <view class="baby-info">
                        <view class="baby-name-row">
                            <text class="baby-name">{{ baby.name }}</text>
                            <image 
                                class="gender-icon" 
                                :src="baby.gender === 1 ? '/static/shengzhangTool/sex1.png' : '/static/shengzhangTool/sex0.png'" 
                                mode="aspectFit"
                            />
                        </view>
                        <text class="baby-birthday">宝宝生日: {{ baby.birthday }}</text>
                    </view>
                </view>
            </view>

            <image 
                class="ok-btn"
                :class="{'ok-btn-active': isOkPressed}"
                src="/static/shengzhangTool/changeBaby/okBtn.png"
                @touchstart="handleOkTouchStart"
                @touchend="handleOkTouchEnd"
                mode="aspectFit"

                ></image>
        </view>
    </view>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    babyList: {
        type: Array,
        default: () => []
    },
    selectedIndex: {
        type: Number,
        default: 0
    }
})

const emit = defineEmits(['update:visible', 'update:selectedIndex', 'change'])

const selectHandle = () => {
    
}

const isOkPressed = ref(false)
const handleOkTouchStart = () => {
    isOkPressed.value = true
}

const handleOkTouchEnd = () => {
    isOkPressed.value = false

    const index = selectIndex.value;
    // 发送事件 通知主页面
    emit('change', props.babyList[index], index)

    closePopup();
}

const closePopup = () => {
    emit('update:visible', false)
}

const selectIndex = ref(0)
const selectBaby = (index) => {
    selectIndex.value = index;
    emit('update:selectedIndex', index);
}
</script>

<style lang="less" scoped>
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    // display: flex;
    // align-items: center;
    // justify-content: center;

    .popup-content {
        position: absolute;
        width: 750rpx;
        height: 719rpx;
        background-color: #f6f8fa;
        overflow: hidden;
        border-top-left-radius: 32rpx;
        border-top-right-radius: 32rpx;
        bottom: 0rpx;

        .popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 40rpx 30rpx 20rpx;
            
            .popup-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }
            
            .close-btn {
                width: 40rpx;
                height: 40rpx;
            }
        }

        .baby-list {
            flex: 1;
            padding-left: 31rpx;
            padding-right: 31rpx;
            padding-top: 20rpx;
            // padding-bottom: 20rpx;
            height: 360rpx;
            overflow-y: auto;

            .baby-item {
                position: relative;
                display: flex;
                align-items: center;
                padding-left: 30rpx;
                margin-bottom: 20rpx;
                height: 129rpx;
                border-radius: 16rpx;
                background-color: #fff;
                
                &.selected {
                    background-color: transparent;
                }
                
                .baby-item-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }
                
                .baby-avatar {
                    position: relative;
                    z-index: 2;
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
                
                .baby-info {
                    position: relative;
                    z-index: 2;
                    flex: 1;
                    
                    .baby-name-row {
                        display: flex;
                        align-items: center;
                        margin-bottom: 8rpx;
                        
                        .baby-name {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #333;
                            margin-right: 10rpx;
                        }
                        
                        .gender-icon {
                            width: 24rpx;
                            height: 24rpx;
                        }
                    }
                    
                    .baby-birthday {
                        font-size: 24rpx;
                        color: #666;
                    }
                }
            }
        }

        .ok-btn {
            position: absolute;
            width: 681rpx;
            height: 98rpx;
            margin-left: 35rpx;
            margin-top: 0rpx;
            &.ok-btn-active {
                transform: scale(0.95);
            }
        }

    }
}








</style>