<template>
    <view v-show="internalShow" :style="fadeStyle" class="fade-wrapper">
        <slot />
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    show: { type: Boolean, default: false },
    duration: { type: Number, default: 300 }, // ms
});

const internalShow = ref(props.show);
const fadeStyle = ref({
    opacity: props.show ? 1 : 0,
    transition: `opacity ${props.duration}ms ease`,
});

watch(
    () => props.show,
    (val) => {
        if (val) {
            internalShow.value = true;
            requestAnimationFrame(() => {
                fadeStyle.value.opacity = 1;
            });
        } else {
            fadeStyle.value.opacity = 0;
            // 动画结束后隐藏 DOM
            setTimeout(() => {
                internalShow.value = false;
            }, props.duration);
        }
    }
);
</script>

<style scoped>
.fade-wrapper {
    width: 100%;
    height: 100%;
}
</style>
