<template>
	<view class="el-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @click="clickHandle" @touchmove.stop.prevent="() => {}" :class="{ 'el-mask-zoom': zoom, 'el-mask-show': show }">
		<slot />
	</view>
</template>

<script setup>
	import { ref,watch,computed } from "vue";
	import { size } from "../../libs/utils.js";
	
	const props = defineProps({
		// 是否显示遮罩
		show: {
			type: Boolean,
			default: false
		},
		// 层级z-index
		zIndex: {
			type: [Number, String],
			default: 2000000000
		},
		// 用户自定义样式
		customStyle: {
			type: Object,
			default () {
				return {}
			}
		},
		// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
		zoom: {
			type: Boolean,
			default: true
		},
		// 遮罩的过渡时间，单位为ms
		duration: {
			type: [Number, String],
			default: 300
		},
		// 是否可以通过点击遮罩进行关闭
		maskClickAble: {
			type: Boolean,
			default: true
		}
	});
	
	const emits = defineEmits(["click"]);
	
	let zoomStyle = ref({ transform: '' });
	let scale     = ref('scale(1.2, 1.2)');
	
	const clickHandle = ()=>{
		if (!props.maskClickAble) return;
		emits('click');
	}
	
	watch(()=>props.show,(newValue,oldValue)=>{
		if(newValue && props.zoom) {
			zoomStyle.value.transform = 'scale(1, 1)';
		} else if(!newValue && props.zoom) {
			zoomStyle.value.transform = scale.value;
		}
	});
	
	const maskStyle = computed(()=>{
		let style = {};
		style.backgroundColor = "rgba(0, 0, 0, 0.2)";
		if(props.show){
			style.zIndex = props.zIndex ? props.zIndex : 2000000000;
		}else{
			style.zIndex = -1;
		}
		
		style.transition = `all ${props.duration / 1000}s ease-in-out`;
		if (size(props.customStyle)) {
			style = {
				...style,
				...props.customStyle
			}
		}
		
		return style;
	});
	
</script>

<style lang="scss" scoped>
	.el-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transition: transform 0.3s;
		&.el-mask-show {
			opacity: 1;
		}
		
		&.el-mask-zoom {
			transform: scale(1.2, 1.2);
		}
	}
</style>