<template>
    <view v-if="visible" class="popup-overlay">
        <view class="popup-content" @click.stop>
            <!-- 问号图标 -->
            <view class="question-icon">
                <image class="icon" src="/static/shengzhangTool/tipsPopIcon.png" mode="aspectFit"></image>
            </view>

            <!-- 提示内容区域 -->
            <view class="tips-content">
                <rich-text class="rich-content" :nodes="tipsContent"></rich-text>
            </view>

            <!-- 底部按钮 -->
            <view class="bottom-buttons">
                <image 
                    class="ok-btn"
                    :class="{'ok-btn-active': isOkPressed}"
                    src="/static/shengzhangTool/tipsOkBtn.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
    }
})

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

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

// 富文本内容
const tipsContent = ref(`
<div style="padding: 20rpx; line-height: 1.6;">
    <div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">头围测量</div>
    <div style="font-size: 28rpx; font-weight: 300; color: #000000;">将软尺固定于小儿眉毛上缘，软尺紧贴头皮绕过后脑最高点即为头围的长度。</div>
    <br>
    
    <div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">身高测量</div>
    <div style="font-size: 28rpx; font-weight: 300; color: #000000;">3岁以下的小儿躺着测身长，让小儿躺在桌上或木板床上，按直小儿的双膝，使两下肢伸直，用软尺量取头顶到脚底(注意不是足尖)的长度，3岁以上的小儿可站着测身高。</div>
    <br>
    
    <div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">体重测量</div>
    <div style="font-size: 28rpx; font-weight: 300; color: #000000;">1）先用小被单将孩子兜住，用称称重，然后减去小被单及包括尿布在内的一切衣物重量，即为婴儿体重；</div>
    <div style="font-size: 28rpx; font-weight: 300; color: #000000;">2）家长抱着婴儿站在磅秤上称体重，减去大人的体重，即为婴儿体重。</div>
    <div style="font-size: 28rpx; font-weight: 300; color: #000000;">3）测量前最好空腹，排去大小便，或两小时内没有进食，尽量脱去衣裤、鞋帽、尿布等，仅穿单衣裤；所测得的数据应减去婴儿所穿的衣物及尿布的重量。</div>
</div>
`)

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

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

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: 661rpx;
        height: 883rpx;
        background-color: #ffffff;
        overflow: hidden;
        border-radius: 52rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;

        .question-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40rpx;
            
            .icon {
                width: 80rpx;
                height: 80rpx;
            }
        }

        .tips-content {
            margin-top: 20rpx;
            flex: 1;
            padding-left: 30rpx;
            padding-right: 30rpx;
            overflow-y: auto;
            
            .rich-content {
                width: 100%;
                height: 100%;
                
                /deep/ div {
                    margin-bottom: 20rpx;
                }
                
                /deep/ br {
                    display: block;
                    margin: 10rpx 0;
                }
            }
        }

        .bottom-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 40rpx 40rpx;
            margin-top: 30rpx;
            
            .ok-btn {
                width: 500rpx;
                height: 97rpx;
                transition: transform 0.1s ease-out;
                
                &.ok-btn-active {
                    transform: scale(0.95);
                }
            }
        }
    }
}
</style>