<template>
	<div :class="prefixCls">
		<mf-dialog
			:visible="visible"
			:footer="false"
			hideTitle
			unmountOnClose
			fullscreen
			:class="`${prefixCls}-wrapper`"
			:modal-class="`${prefixCls}-dialog`">
			<mf-video
				autoplay
				:controls="false"
				modelValue="https://images.iqyjsnwv.com/tmp/hello-BCSGJ8fP.mp4" />
			<div :class="`${prefixCls}-shadow`">
				<div :class="`${prefixCls}-title`">
					{{ $t('common.fbTitle') }}
				</div>
				<div :class="`${prefixCls}-content`">
					{{ $t('common.fbContent') }}
				</div>
				<div :class="`${prefixCls}-footer`">
					<mf-button
						size="large"
						type="primary"
						@click="ok">
						{{ $t('common.fbOK') }}
					</mf-button>
					<mf-button
						size="large"
						@click="cancel">
						{{ $t('common.fbCancel') }}
					</mf-button>
				</div>
			</div>
		</mf-dialog>
	</div>
</template>

<script>
export default {
	name: 'mf-forbidden',
	data() {
		return {
			prefixCls: 'mf-forbidden'
		}
	},
	props: {
		visible: Boolean
	},
	methods: {
		cancel() {
			this.$router.replace('/403')
		},
		ok() {
			this.$store.dispatch('main/setForbidden', false)
		}
	}
}
</script>

<style lang="less">
.mf-forbidden {
	overflow: hidden;
	&-wrapper {
		overflow: hidden;
		.arco-modal-wrapper {
			overflow: hidden;
		}
		.arco-modal-mask {
			/* 背景高斯模糊关键属性 */
			backdrop-filter: blur(10px);
			background-color: rgba(0, 0, 0, 0.7);
		}
	}
	&-dialog {
		overflow: hidden;
		// width: 428px;
		// height: 258px;
		// background: linear-gradient(0deg, #271433 0%, #e6217a 49%);
		// border-radius: 20px;
		// border: 2px solid #e6217a;
		// top: 45% !important;
		// transform: translateY(-45%) !important;

		.arco-modal-body {
			padding: 0;
			height: 100%;
			overflow: hidden;
			.arco-spin {
				height: 100%;
				overflow: hidden;
				.mf-dialog-wrap {
					height: 100%;
					overflow: hidden;
				}
			}
		}

		.mf-video {
			position: absolute;
			width: 100% !important;
			height: 100% !important;
			padding: 0 !important;
			video {
				width: 100%;
				height: 100%;
			}
		}
	}
	&-title {
		font-size: 28px;
		color: #ffffff;
		text-align: center;
		font-weight: bold;
	}

	&-content {
		font-size: 16px;
		color: #ffffff;
		margin-top: 40px;
		line-height: 24px;
		text-align: center;
	}

	&-shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;
	}

	&-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60px;
		flex-direction: column;
		.mf-button {
			width: 300px;
			height: 50px;
			font-size: 16px;
			font-weight: bold;
			border-radius: 10px;
			margin-bottom: 30px;
			border-radius: 25px;

			&:last-child {
				color: #ffffff;
				background-color: #1a1a1a;
				&:hover {
					background-color: #262626;
				}
				&:active {
					background-color: #0d0d0d;
				}
			}
		}
	}
}

@media (max-width: 576px) {
	.mf-forbidden {
		&-title {
			font-size: 24px;
		}

		&-dialog {
			.mf-video {
				video {
					object-fit: cover;
				}
			}
		}
	}
}
</style>
