<template>
    <view v-if="visible" class="popup-overlay">
        <view class="popup-content" @click.stop>
            <!-- 喂养方式列表 -->
            <view class="feed-list">
                <view 
                    v-for="(item, index) in feedOptions" 
                    :key="index"
                    class="feed-item"
                    :class="{ selected: selectedIndex === index }"
                    @click="selectFeed(index)"
                >
                    <!-- 选中背景 -->
                    <image 
                        v-if="selectedIndex === index"
                        class="feed-item-bg" 
                        src="/static/shengzhangTool/changeFeed/itemBg.png" 
                        mode="aspectFit"
                    />
                    
                    <!-- 喂养方式文本 -->
                    <text class="feed-text">{{ item.name }}</text>
                </view>
            </view>

            <!-- 底部按钮 -->
            <view class="bottom-buttons">
                <image 
                    class="cancel-btn"
                    :class="{'cancel-btn-active': isCancelPressed}"
                    src="/static/shengzhangTool/changeFeed/cancelBtn.png"
                    @touchstart="handleCancelTouchStart"
                    @touchend="handleCancelTouchEnd"
                    mode="aspectFit"
                />
                
                <image 
                    class="ok-btn"
                    :class="{'ok-btn-active': isOkPressed}"
                    src="/static/shengzhangTool/changeFeed/okBtn.png"
                    @touchstart="handleOkTouchStart"
                    @touchend="handleOkTouchEnd"
                    mode="aspectFit"
                />
            </view>
        </view>
    </view>
</template>

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

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

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

// 喂养方式选项
const feedOptions = ref([
    { name: '纯母乳', value: 'pure_breast' },
    { name: '母乳+奶粉混合喂养', value: 'mixed_feeding' },
    { name: '纯奶粉', value: 'pure_formula' },
    { name: '奶粉+辅食', value: 'formula_food' },
    { name: '母乳+辅食', value: 'breast_food' }
])

const selectIndex = ref(props.selectedIndex)

// 按钮状态
const isCancelPressed = ref(false)
const isOkPressed = ref(false)

// 添加加载状态
const isLoadingFeed = ref(false)

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

// 选择喂养方式
const selectFeed = (index) => {
    selectIndex.value = index
    emit('update:selectedIndex', index)
}

// 取消按钮事件
const handleCancelTouchStart = () => {
    isCancelPressed.value = true
}

const handleCancelTouchEnd = () => {
    isCancelPressed.value = false
    closePopup()
}

// 确认按钮事件
const handleOkTouchStart = () => {
    isOkPressed.value = true
}

const handleOkTouchEnd = () => {
    isOkPressed.value = false
    
    const index = selectIndex.value
    const selectedFeed = feedOptions.value[index]
    
    // 发送事件通知主页面
    emit('change', selectedFeed, index)
    closePopup()
}

// 点击喂养方式选择
const openFeedSelector = () => {
    console.log('打开喂养方式选择器')
    showFeedSwitchPopup.value = true
}

// 处理喂养方式选择变化
const onFeedChange = (feedOption, index) => {
    isLoadingFeed.value = true
    
    console.log('选择了喂养方式:', feedOption, index)
    selectedFeedText.value = feedOption.name
    currentFeedIndex.value = index
    
    // 模拟保存数据
    setTimeout(() => {
        isLoadingFeed.value = false
    }, 300)
}

const closePopup = () => {
    emit('update:visible', false)
}
</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;

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

        .feed-list {
            flex: 1;
            overflow-y: auto;
            padding-left: 30rpx;
            padding-right: 30rpx;
            
            .feed-item {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 106rpx;
                margin-bottom: 20rpx;
                border-radius: 16rpx;
                background-color: #fff;
                
                &.selected {
                    background-color: transparent;
                }
                
                .feed-item-bg {
                    position: absolute;
                    width: 689rpx;
                    height: 108rpx;
                    z-index: 1;
                }
                
                .feed-text {
                    position: relative;
                    z-index: 2;
                    font-size: 28rpx;
                    color: #1d1e26;
                    font-weight: 400;
                }
            }
        }

        .bottom-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20rpx;
            padding-left: 30rpx;
            padding-right: 30rpx;
            
            .cancel-btn {
                width: 334rpx;
                height: 97rpx;
                transition: transform 0.1s ease-out;
                
                &.cancel-btn-active {
                    transform: scale(0.95);
                }
            }
            
            .ok-btn {
                width: 334rpx;
                height: 97rpx;
                transition: transform 0.1s ease-out;
                
                &.ok-btn-active {
                    transform: scale(0.95);
                }
            }
        }





    }
}







.feeding-select {
    display: flex;
    align-items: center;
    cursor: pointer; // 添加手型光标
    
    .feeding-value {
        font-size: 28rpx;
        color: #666;
        margin-right: 8rpx;
    }
    
    .dropdown-icon {
        width: 20rpx;
        height: 20rpx;
        transition: transform 0.3s ease; // 添加旋转动画
    }
    
    // 可选：添加点击反馈效果
    &:active {
        opacity: 0.7;
    }
}
</style>

