<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="`${$baseUrl}shengzhangTool/1001/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: selectIndex === index }"
                    @click="selectBaby(index)"
                >
                    <!-- 选中背景 -->
                    <image 
                        v-if="selectIndex === index"
                        class="baby-item-bg" 
                        :src="`${$baseUrl}shengzhangTool/1001/changeBaby/babyItemBg.png`" 
                        mode="aspectFit"
                    />
                    
                    <!-- 宝宝头像 -->
                    <image 
                        class="baby-avatar" 
                        :src="baby.babyAvatar || `https://course.feihe.com/momclub-picture/common/default_avatar.png`" 
                        mode="aspectFill"
                    />
                    
                    <!-- 宝宝信息 -->
                    <view class="baby-info">
                        <view class="baby-name-row">
                            <text class="baby-name">{{ baby.babyName }}</text>
                            <image 
                                class="gender-icon" 
                                :src="baby.babyGender === 'M' ? `${$baseUrl}shengzhangTool/1001/sex1.png` : `${$baseUrl}shengzhangTool/1001/sex0.png`" 
                                mode="aspectFit"
                            />
                        </view>
                        <text class="baby-birthday">宝宝生日: {{ baby.babyBirthday }}</text>
                    </view>
                </view>
            </view>

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

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

<script setup>
import { ref, defineEmits, defineProps, onMounted } from 'vue'
import { useUserStore } from "@/stores/user";

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

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})

const userStore = useUserStore();

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

const selectHandle = () => {
    
}

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

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

    const index = selectIndex.value;

    await userStore.changeBabySelected(babyList.value[index].id);
    // 发送事件 通知主页面
    emit('change', babyList.value[index])
    closePopup();

}

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

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

const babyList = ref([]);
onMounted(() => {
    babyList.value = (userStore.babyInfo?.allBabyBaseInfo || []).filter(tem => tem.babyStage === 2);
    if(babyList.value === null){
        babyList.value = [];
    }

    const selectedIndexInList = babyList.value.findIndex(item => item.selected === true)
    console.log('选中宝宝的索引:', selectedIndexInList)
    selectIndex.value = selectedIndexInList;

})

</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>