<template>
	<el-dialog
		class="image-preview"
		v-model="showDialog"
		align-center
		:show-close="false"
		width="70vw"
		style="border-radius: 20px; padding: 0; --el-dialog-padding-primary: 0"
	>
		<template #header="{ close }">
			<div class="header-close" @click="close">
				<svg-icon name="close" size="23" size-unit="px" />
			</div>
		</template>
		<div class="preview-box">
			<div class="image-box">
				<img :src="url" />
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
	import { computed, ref, onBeforeUnmount, shallowRef } from 'vue'
	const showDialog = ref(false)
	const url = ref('')
	const open = (url_: any) => {
		showDialog.value = true
		url.value = url_
	}
	const close = () => {
		showDialog.value = false
	}

	defineExpose({
		open,
		close
	})
</script>
 
<style lang="less" scoped>
	.header-close {
		position: absolute;
		top: 30px;
		right: 40px;
		width: 40px;
		height: 40px;
		cursor: pointer;
	}
	.preview-box {
		width: 100%;
		height: 70vh;
		padding: 67px;
		display: flex;
		> .image-box {
			margin: auto;
			max-width: 90%;
			height: 100%;
			padding: 50px;
			border-radius: 10px;
			border: 1px solid #d9d9d9;
			> img {
				max-width: 100%;
				width: auto;
				height: 100%;
				object-fit: contain;
			}
		}
	}
</style>
