<template>
    <view v-if="visible" class="popup-overlay">
        <view class="popup-content" @click.stop>
            <!-- 关闭按钮 -->
            <view class="close-btn" @click="closePopup">
                <image class="close-icon" :src="`${$baseUrl}shengzhangTool/1001/changeBaby/closeBtn.png`" mode="aspectFit"></image>
            </view>
            
            <!-- 固定标题区域 -->
            <view class="title-icon">
                    <image class="icon-image" :src="`${$baseUrl}shengzhangTool/1001/tipsPopIcon.png`" mode="aspectFit"></image>
                </view>
            
            <!-- 弹窗内容 -->
            <view class="popup-body">
                <image class="curve-image" :src="`${$baseUrl}shengzhangTestResult/1001/quxianTipsCon.png`" ></image>
            </view>
            
            <!-- 确认按钮 -->
            <view class="confirm-btn" @click="closePopup" scroll-y="true">
                <image class="btn-bg" :src="`${$baseUrl}shengzhangTool/1001/tipsOkBtn.png`" mode="aspectFit"></image>
            </view>
        </view>
    </view>
</template>

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

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

// 定义emits
const emit = defineEmits(['close'])

// 关闭弹窗
const closePopup = () => {
    md.sensorPopLogTake({
        xcxPopClick: "true",
        toolName: "生长曲线",
        popName: "生长曲线介绍弹窗",
        buttonName: "我知道了"
    });
    emit('close')
}

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;
    display: flex;
    align-items: center;
    justify-content: center;
    .popup-content {
        width: 661rpx;
        height: 882rpx;
        background-color: #ffffff;
        border-radius: 24rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: auto; // 恢复弹窗内容的点击事件
        .close-btn {
            position: absolute;
            top: 30rpx;
            right: 30rpx;
            width: 40rpx;
            height: 40rpx;
            z-index: 10;
            
            .close-icon {
                width: 100%;
                height: 100%;
            }
        }

        .title-icon {
            height: 90rpx;
                margin-top: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon-image {

                    width: 79rpx;
                    height: 79rpx;
                }
        }


        .popup-body {
            flex: 1;
            padding-left: 40rpx;
            padding-right: 40rpx;
            overflow: auto !important;
            width: 570rpx;
            height: 449rpx;
            position: relative;

            .curve-image {
                width: 570rpx;
                height: 1044rpx;
                border-radius: 12rpx;
                background-color: #ffffff;
                position: absolute;
            }
        }

        .confirm-btn {
            position: relative;
            height: 150rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .btn-bg {
                position: absolute;
                width: 565rpx;
                height: 97rpx;
                z-index: 1;
            }
        }
    }

    

    
}




</style>