<template>
	<view class="mask u-fixed tranistion position-all u-flex u-flex-col u-row-center u-col-center" v-if="show"
		:style="computedStyle" @tap="maskClick">
		<view class="w-full" @tap.stop="nullFunction">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		show:{
			type: Boolean,
			default: false
		},
		zIndex: {
			type: [Number, String]
		},
		tapClose: {
			type: Boolean,
			default: true
		}
	})
	const emits = defineEmits(['close', 'toggle', 'open'])
	watch(()=>props.show,(newval)=>{
		show.value=newval
	})
	let show = ref(props.show)

	function close() {
		show.value = false
		emits('close')
	}

	function open() {
		show.value = true
		emits('open')
	}

	function nullFunction() {

	}

	function toggle() {
		if (show.value) {
			close()
		} else {
			open()
		}
	}

	function maskClick() {
		if (props.tapClose) {
			close()
		}
	}
	const computedStyle = computed(() => {
		return `
		z-index:${props.zIndex};
		`
	})

	defineExpose({
		close,
		toggle,
		open
	})
</script>

<style lang="scss">
	.mask {
		background-color: rgba(51, 51, 51, .5);
	}
</style>