<template>
	<view class="growth-modal" v-if="visible">
		<view class="mask" @click="handleMaskClick" @touchmove.stop.prevent></view>
		<view class="dialog" @click.stop>
			<view class="icon-area" v-if="icon">
				<text class="icon">{{ icon }}</text>
			</view>
			<text class="title" v-if="title">{{ title }}</text>
			<view class="message" v-if="message">{{ message }}</view>
			<view class="btn-group">
				<view class="btn btn--primary btn--block btn--pill" @click="handleConfirm" hover-class="btn-hover">
					<text>{{ confirmText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GrowthModal',
	props: {
		visible: { type: Boolean, default: false },
		title: { type: String, default: '' },
		message: { type: String, default: '' },
		icon: { type: String, default: '' },
		confirmText: { type: String, default: '确定' }
	},
	emits: ['confirm', 'close'],
	methods: {
		handleMaskClick() {
			this.$emit('close')
		},
		handleConfirm() {
			this.$emit('confirm')
			this.$emit('close')
		}
	}
}
</script>

<style scoped>
.growth-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.dialog {
	position: relative;
	width: 600rpx;
	background: #ffffff;
	border-radius: 12rpx;
	padding: 56rpx 48rpx;
	text-align: center;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.icon-area {
	margin-bottom: 32rpx;
}

.icon {
	font-size: 96rpx;
	display: block;
}

.title {
	font-size: 40rpx;
	font-weight: 700;
	color: #1a1a2e;
	display: block;
	margin-bottom: 24rpx;
}

.message {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
	white-space: pre-wrap;
	min-height: 140rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-group {
	margin-top: 40rpx;
}
</style>