<template>
    <view>
        <view class="alert faj" v-if="showAlert && regStep == 4">
            <view class="alert_content">
                <image
                    src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20260109/1de53e5a44b00fcc69961e6d036f7b57.png"
                    mode="widthFix"></image>
                <view class="alert_title">为呵护青少年的健康，特推出青少年呵护模式，该模式下部分功能无法使用，请监护人主动选择，设置权限。</view>
                <view class="alert_module fa sb">
                    <view class="alert_item faj" @click="toggleEnabled(true)">
                        开启
                    </view>
                    <view class="alert_item faj" @click="toggleEnabled(false)">
                        关闭
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'UnderAge',
    props: {
        regStep: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            showAlert: false,
            enabled: false,
            enabledClose: false
        };
    },
    mounted() {
        // 从本地存储获取当前设置状态
        const underAgeEnabled = uni.getStorageSync('underAgeEnabled');
        if (underAgeEnabled !== null && underAgeEnabled !== undefined) {
            this.enabled = underAgeEnabled;
        }
        
        // 检查当前会话是否已显示过弹窗
        if (!this.hasShownInCurrentSession()) {
            this.showAlert = true;
        }
    },
    methods: {
        toggleEnabled(isEnabled) {
            if (isEnabled) {
                this.enabled = true;
                this.enabledClose = false;
                // 点击开启时，将变量存储到本地
                uni.setStorageSync('underAgeEnabled', true);
            } else {
                this.enabled = false;
                this.enabledClose = true;
                // 点击关闭时，从本地移除该变量
                uni.removeStorageSync('underAgeEnabled');
            }
            
            // 触发事件通知父组件状态已更改
            this.$emit('underAgeStatusChanged', isEnabled);
            
            setTimeout(() => {
                this.showAlert = false;
                // 标记当前会话中已显示过弹窗
                this.setShownInCurrentSession();
            }, 200);
        },
        // 检查当前会话是否已显示过弹窗
        hasShownInCurrentSession() {
            // 使用内存变量来判断当前小程序会话中是否已经显示过弹窗
            // 小程序重启（完全退出再进入）时，这个变量会被重置
            return this.$options.hasShownOnce !== undefined && this.$options.hasShownOnce === true;
        },
        // 设置当前会话已显示过弹窗
        setShownInCurrentSession() {
            this.$options.hasShownOnce = true;
        }
    }
};
</script>

<style scoped>
.alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.alert_content {
    position: relative;
    border-radius: 10px;
    margin: 20px;
    text-align: center;
}

.alert_title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: auto 30rpx;
    font-size: 32rpx;
    color: #000000;
    line-height: 46rpx;
}

.alert_module {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3%;
    margin: auto 30rpx;
}

.alert_item {
    padding: 20rpx 0;
    width: 200rpx;
    align-items: center;
    font-size: 28rpx;
    cursor: pointer;
    border-radius: 10rpx;
    color: #FFFFFF;
    background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
}
</style>