<template>
    <div ref="viewRef" class="app-view" safe-area-inset-bottom>
        <slot name="header"></slot>
        <app-scroll-view :class="['app-view__body', flex && 'flex']">
            <Loading class="app-view__loading" v-if="loading" />
            <slot></slot>
        </app-scroll-view>
        <slot name="footer"></slot>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted } from 'vue'
import { Loading } from 'vant'

defineProps({
    // 显示一个加载动画
    loading: {
        type: Boolean,
        default: false
    },
    flex: {
        type: Boolean,
        default: false
    },
})

const emit = defineEmits(['ready'])
const viewRef = shallowRef()

onMounted(() => {
    emit('ready', viewRef.value)
})
</script>

<style lang="less">
@import './index.less';
</style>