<template>
	<view v-if="show" class="message-mask">
		<view class="message-box">
			<image src="@/static/images/message.png" mode="aspectFill"></image>
			<view class="box-title">{{ title }}</view>
			<view class="box-content">{{ title }}</view>
			<view class="box-footer flex">
				<view class="btn cancel" @click="show = false">取消</view>
				<view class="btn submit" @click="$emit('submit')">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: () => '提示',
			},
			content: {
				type: String,
				default: () => '请确认当前订单已收货',
			},
		},
		data() {
			return {
				show: true,
			};
		},
	};
</script>

<style lang="scss" scoped>
	.message-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
		.message-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%);
			z-index: 100;
			padding: 100rpx 30rpx 60rpx;
			background: linear-gradient(to bottom, #BED3FE 0%, #fff 100%);
			box-shadow: 0rpx 3rpx 2rpx 0rpx rgba(255,255,255,0.69);
			border-radius: 50rpx;
			border: 1px solid #FFFFFF;
			width: 610rpx;
			>image {
				position: absolute;
				top: -72rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 145rpx;
				height: 144rpx;
				z-index: 101;
			}
			.box-title {
				color: #333333;
				font-size: 34rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.box-content {
				color: #666;
				font-size: 32rpx;
				margin-bottom: 40rpx;
				text-align: center;
			}
			.box-footer {
				justify-content: space-between;
				>view {
					width: 230rpx;
					height: 88rpx;
					background: #EEEEEE;
					border-radius: 44rpx;
					color: #666;
					font-size: 32rpx;
					text-align: center;
					line-height: 88rpx;
					&.submit {
						background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);
						box-shadow: -1rpx -2rpx 0rpx 0rpx rgba(255,255,255,0.51), -1rpx -2rpx 5rpx 0rpx rgba(52,121,253,0.56), 1rpx 3rpx 0rpx 0rpx rgba(250,253,255,0.88);
						color: #fff;
					}
				}
			}
		}
	}
</style>