<template>
	<mf-dialog
		:title="$t('common.filePreview')"
		hideTitle
		:footer="false"
		unmountOnClose
		:loading="loading"
		:loading-text="$t('common.videoLoadingText')"
		modal-class="preview-dialog"
		class="preview-dialog-wrapper"
		:visible="visible"
		@cancel="cancel">
		<div class="preview-close">
			<mf-icon
				value="icon-close"
				@click="$emit('cancel')" />
		</div>
		<mf-file-preview
			v-if="url"
			:modelValue="url" />
	</mf-dialog>
</template>
<script>
export default {
	name: 'mf-preview',
	data() {
		return {}
	},
	props: {
		url: String,
		visible: Boolean,
		loading: Boolean
	},
	methods: {
		cancel() {
			this.$emit('cancel')
		}
	}
}
</script>
<style lang="less">
.preview-dialog {
	overflow: hidden;
	background: #0f0f12;
	border-radius: 20px;
	border: 2px solid #e6217a;
	height: 520px;
	width: 864px;
	top: 45% !important;
	transform: translateY(-45%) !important;

	.preview-close {
		position: fixed;
		right: 16px;
		top: 12px;
		cursor: pointer;
		color: #fff;
		z-index: 1;

		.mf-icon {
			font-size: 14px;
		}
	}
	
	.mf-file-preview {
		height: 450px;
		overflow: hidden;
	}

	&-wrapper {
		.arco-modal-mask {
			/* 背景高斯模糊关键属性 */
			backdrop-filter: blur(10px);
			background-color: rgba(0, 0, 0, 0.7);
		}
	}

	.arco-modal-body {
		padding: 30px;
		height: 100%;
		.arco-spin {
			width: 100%;
			height: 100%;
			
			&-mask {
				background-color: #111111;
			}
		}
	}
}

@media (max-width: 576px) {
	.preview-dialog {
		width: calc(100% - 16px) !important;

		.arco-modal-body {
			padding: 12px 12px 12px 12px;
		}
	}
}
</style>
