<template>
	<el-dialog
		class="base-modal"
		v-model="showDialog"
		destroy-on-close
		align-center
		:show-close="false"
		:width="modalWidth"
		style="border-radius: 2.9rem; padding: 0; --el-dialog-padding-primary: 0;background-color: #f7f7f7;"
	>
		<template #header="{ close }">
			<div class="header-close" @click="close">
				<svg-icon name="close" size="23" size-unit="px" />
			</div>
		</template>
		<div class="modal-box">
			<slot v-if="currentData" :currentData="currentData"></slot>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
	const props = defineProps({
		modalWidth: {
			type: String,
			default: '63vw'
		}
	})
	const showDialog = ref(false)
	let currentData = ref(null)
	const open = (data: any) => {
		currentData.value = data
		showDialog.value = true
	}
	const close = () => {
		showDialog.value = false
		currentData.value = null
	}

	defineExpose({
		open,
		close
	})
</script>
 
<style lang="less" scoped>
	.header-close {
		position: absolute;
		top: 3rem;
		right: 4rem;
		width: 4rem;
		height: 4rem;
		cursor: pointer;
		z-index: 1000;
	}
	.modal-box {
		width: 100%;
		height: 70vh;
	}
</style>
