<template>
    <view class="parent-page" :class="{ 'native-scroll': !useScrollView }">
        <view class="decor decor-a"></view>
        <view class="decor decor-b"></view>
        <scroll-view
            v-if="useScrollView"
            class="page-scroll"
            scroll-y
            enhanced
            :show-scrollbar="false"
            :lower-threshold="120"
            @scrolltolower="$emit('scrolltolower')"
        >
            <view class="page-content" :class="{ 'with-tab': showTab }">
                <slot></slot>
            </view>
        </scroll-view>
        <view v-else class="page-scroll native-page-scroll">
            <view class="page-content" :class="{ 'with-tab': showTab }">
                <slot></slot>
            </view>
        </view>
        <ParentTabBar v-if="showTab" :active="active" />
    </view>
</template>

<script setup lang="ts">
import ParentTabBar from './ParentTabBar.vue';

defineEmits<{
    scrolltolower: [];
}>();

// 家长端页面统一背景、滚动区域和底部导航，业务页只关注内容块。
withDefaults(
    defineProps<{
        active?: 'home' | 'reports' | 'profile';
        showTab?: boolean;
        useScrollView?: boolean;
    }>(),
    {
        active: 'home',
        showTab: true,
        useScrollView: true,
    },
);
</script>

<style lang="scss" scoped>
.parent-page {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #ecfeff 0%, #f5f7ff 54%, #ffffff 100%);
}

.native-scroll {
    min-height: 100vh;
    height: auto;
    /* 原生纵向滚动时仍需裁剪横向溢出，避免 iOS 整页左右滑动 */
    overflow-x: hidden;
    width: 100%;
}

.decor {
    position: absolute;
    border-radius: 50%;
    filter: blur(64rpx);
    pointer-events: none;
}

.decor-a {
    width: 360rpx;
    height: 360rpx;
    top: 90rpx;
    right: -150rpx;
    background: rgba(34, 211, 238, 0.32);
}

.decor-b {
    width: 300rpx;
    height: 300rpx;
    left: -120rpx;
    bottom: 170rpx;
    background: rgba(34, 197, 94, 0.16);
}

.page-scroll {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

.native-page-scroll {
    min-height: 100vh;
    height: auto;
    width: 100%;
    overflow-x: hidden;
}

.page-content {
    padding: 24rpx 28rpx 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;

    &.with-tab {
        padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    }
}
</style>
