<template>
	<uv-popup 
			ref="popup"
			:customStyle="props.customStyle"
			:closeOnClickOverlay="props.closeOnClickOverlay"
			@maskClick="maskClick"
			:mode="props.mode"
			:bgColor='props.bgColor'
			:closeable="props.closeable"
			@change="handleChange"
			:safeAreaInsetBottom="false"
			zIndex="999"
		>
			<slot></slot>
		</uv-popup>
</template>

<script setup>
	import { ref,watch,computed, nextTick } from 'vue';
	const popup = ref();
	// 接收 v-model
	const props = defineProps({
		modelValue:{
		type:Boolean,
		default:false
	},
	closeOnClickOverlay:{
		type:Boolean,
		default:false
	},
	mode:{
		type:String,
		default:'center'
	},
	customStyle:{
		type:String,
		default:'width: 90%; height: auto; padding:20rpx 0; border-radius: 32rpx;'
	},
	bgColor:{
		type:String,
		default:'#FFFFFF'
	},
	closeable:{
	    type:Boolean,
		default:false
	}
	});
	const handleChange = (e) => {
	    emit('update:modelValue', e.show);
	}
	const maskClick = () => {
	if (props.closeOnClickOverlay) {
		modelValue.value = false;
	}
	}
	const emit = defineEmits(['close', 'confirm', 'update:modelValue']);
	const modelValue = computed({
		  get() {
			return props.modelValue;
		  },
		  set(value) {
			emit('update:modelValue', value);
			if(value){
				popup.value.open()
			}else{
				popup.value.close()
			}
		  }
	})
	watch(() => modelValue.value, (val) => {
		// 组件没出来之前
		if(!popup.value){
			nextTick(()=>{
				val?popup.value?.open():popup.value?.close();
			})
		}else{
			val?popup.value?.open():popup.value?.close();
		}
	},{
		  immediate:true
	});

</script>

<style lang="scss">
.modal-container {
			// height: 700rpx;
			// background: #000;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			
			.modal-title {
				width: 486rpx;
				height: 42rpx;
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				position: relative;
				// display: inline-block; 
				z-index: 1;
				&::before{
					position: absolute;
					content: ' ';
					width: 100%;
					height: 14rpx;
					background-color: var(--main-color);
					border-radius: 100px;
					display: block;
					bottom: 0;
					z-index: -1;
				}
			}
			.modal-text {
				width: 486rpx;
				margin-top: 38rpx;
				font-size: 26rpx;
				font-weight: 600;
				text-align: left;
				line-height: 32rpx;
			}
			.upload {
				margin-top: 30rpx;
				height: 250rpx;
				width: 100%;
				// background: #000;
				display: flex;
				justify-content: center;
				// overflow-x: scroll;
				overflow-y: scroll;
				// white-space: nowrap;
				flex-wrap:nowrap;
				// overflow: hidden;
			}
			.modal-button {
				margin-top: 80rpx;
				width: 527.22rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				& > .modal-button-1 {
					width: 260rpx;
					height: 72rpx;
					background: #F4F3F3;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 700;
					border-radius: 14rpx;
					&:active {
						background: #888;
					}
				}
				& > .modal-button-2 {
					width: 260rpx;
					height: 72rpx;
					background: var(--main-color);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 700;
					color: #FBFBFB;
					border-radius: 14rpx;
					&:active {
						background: #888;
					}
				}
			}
		}
</style>