<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="`${$baseUrl}shengzhangTool/1001/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="`${$baseUrl}shengzhangTool/1001/changeFeed/cancelBtn.png`"
                    @touchstart="handleCancelTouchStart" @touchend="handleCancelTouchEnd" mode="aspectFit" />

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

<script setup>
import { ref, defineEmits, defineProps, watch, onMounted } from 'vue'
import md from '../md.js'

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)
    md.sensorPopLogTake({
        xcxPopClick: "true",
        toolName: "生长曲线",
        popName: "喂养方式选择弹窗",
        buttonName: feedOptions.value[index].name
    });
}

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

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

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

const handleOkTouchEnd = () => {
    isOkPressed.value = false
    md.sensorPopLogTake({
        xcxPopClick: "true",
        toolName: "生长曲线",
        popName: "喂养方式选择弹窗",
        buttonName: "确认"
    });
    const index = selectIndex.value
    const selectedFeed = feedOptions.value[index]

    // 发送事件通知主页面
    emit('change', selectedFeed, index)//只能传一个参数

    closePopup("nonePop")
}

// 点击喂养方式选择
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 = (type) => {
    if (type !== 'nonePop') {
        md.sensorPopLogTake({
            xcxPopClick: "true",
            toolName: "生长曲线",
            popName: "喂养方式选择弹窗",
            buttonName: "取消"
        });
    }
    emit('update:visible', false)

    watch(() => props.visible, (newVal) => {
        if (newVal) {
            md.sensorPopLogTake({
                xcxPopExposure: "true",
                toolName: "生长曲线",
                popName: "喂养方式选择弹窗"
            });
        }
    })
}
</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>
