<template>
	<view>
		<el-mask :show="modelValue" :zIndex="zIndex" :customStyle="customStyle" :zoom="zoom" :duration="duration" :maskClickAble="maskClickAble">
			<view class="wrap">
				<el-loading-icon :mode="mode" :color="color" :size="size"></el-loading-icon>
			</view>
		</el-mask>
	</view>
</template>

<script setup>
	import { ref,computed } from "vue";
	
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		// 层级z-index
		zIndex: {
			type: [Number, String],
			default: 2000000000
		},
		// mask attr
		// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
		zoom: {
			type: Boolean,
			default: true
		},
		// 遮罩的过渡时间，单位为ms
		duration: {
			type: [Number, String],
			default: 300
		},
		customStyle: {
			type: Object,
			default: {
				'background-color': 'rgba(255,255,255)'
			}
		},
		// 是否可以通过点击遮罩进行关闭
		maskClickAble: {
			type: Boolean,
			default: true
		},
		// loading icon attr
		// 动画的类型
		mode: {
			type: String,
			default: 'circle'
		},
		// 动画的颜色
		color: {
			type: String,
			default: '#c7c7c7'
		},
		// 加载图标的大小，单位rpx
		size: {
			type: [String, Number],
			default: '34'
		}
	});
	
	const emits    = defineEmits(["modelValue","update:modelValue","change"]);
	
	
</script>

<style lang="scss" scoped>
	.wrap {
		position: fixed; top: 50%; left: 50%;
		transform: translate(-50%,-50%);
	}
</style>