<template>
    <div class="app-view">
        <template v-if="showLoading">
            <slot name="loading">
                <Loading class="app-view__loading" color="#0094ff" />
            </slot>
        </template>
        <template v-else>
            <slot name="header" :animation="showAnimation"></slot>
            <app-scroll-view :class="['app-view__body', flex && 'flex']">
                <slot :animation="showAnimation"></slot>
            </app-scroll-view>
            <slot name="footer" :animation="showAnimation"></slot>
        </template>
    </div>
</template>

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

const props = defineProps({
    // 是否过渡动画中
    animation: {
        type: Boolean,
        default: false
    },
    // 是否等待过渡动画，用于防止动画过程中渲染数据导致页面切换卡顿
    loading: {
        type: Boolean,
        default: true
    },
    flex: {
        type: Boolean,
        default: false
    },
})

const showAnimation = shallowRef(false)
const showLoading = computed(() => {
    return props.loading ? showAnimation.value : false
})

nextTick(() => {
    showAnimation.value = props.animation
})

watch(() => props.animation, (status) => {
    if (!status) {
        showAnimation.value = false
    }
})
</script>

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