<!-- 弹窗组件 -->
<template>
<view class="add_popup" v-if="person.isShowPopup">
	<view class="popup_cont" :style="{width:props.width&&props.width>0?props.width+'px;':'auto;',
	                              height:props.height&&props.height>0?props.height+'px;':'auto;',
							      background:props.bgColor+'!important;'}">
		<view class="popup_close" @click="cancel" v-if="props.showCancel"></view>
		<slot></slot>
	</view>
</view>
</template>

<script setup lang="ts">
import { reactive, shallowRef, nextTick, onMounted, watch } from 'vue'
const props = defineProps({
    isShow: {
        type: Boolean,
        required: true
    },
	width: {
		type: Number,
		required: false
	},
	height: {
		type: Number,
		required: false
	},
	bgColor: {
		type: String,
		required: false
	},
	showCancel:{
		type:Boolean,
		default:true
	}
})
interface Iemit{
	(e:'cancelBtn'):void
}	
const emit=defineEmits<Iemit>()

let person=reactive({
	isShowPopup:false
})

watch(()=>props.isShow,(newVal)=>{
	person.isShowPopup=newVal
})

onMounted(()=>{
})
const cancel=()=>{
	person.isShowPopup=!person.isShowPopup
	emit('cancelBtn')
}
</script>

<style lang="scss" scoped>
.add_popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: rgba(0,0,0,.4);
	z-index: 99;
	.popup_cont{
		text-align: center;
		margin: -60rpx auto 0 auto;
		border-radius: 20rpx;
		color: #3D425B;
		font-size: 30rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.popup_close{
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			transform: translate(-50%);
			width: 80rpx;
			height: 80rpx;
			background: url('@/static/education/cancel.png') no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>