<template>
	<scroll-view :scroll-y="true" :scroll-top='scrolltop'  class="pageanimation" :class="{showon:showis,hideon:!Props.modelValue}">
		<slot></slot>
	</scroll-view>
</template>

<script setup>
	import {
		onBackPress
	} from "@dcloudio/uni-app"
	import {
		nextTick,
		ref,
		watch
	} from "vue"
	const scrolltop=ref(0)
	const showis=ref(false)
	const Emits = defineEmits(["update:modelValue","close"])
	const Props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	watch(() => Props.modelValue, () => {
		
		
		if(Props.modelValue){
			showis.value=true;
		}else{
			Emits("close")
			setTimeout(()=>{
				showis.value=false;
				scrolltop.value=100;
				nextTick(()=>{
					scrolltop.value=0;
				})
			},500)
		}
		uni.$emit('back',Props.modelValue)
	})
	uni.$on('close',()=>{
		Props.modelValue=false;
		Emits("update:modelValue",false)
	})
	
</script>

<style scoped lang="scss">
	.pageanimation{
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 100%;
		background: #E7E7ED;
		transition:0.3s;
		box-sizing: border-box;
		padding-bottom: 1rpx;
		&.showon{
			left: 0%;
		}
		&.hideon{
			left: 100%;
		}
	}
</style>