<template>
	<view class="popup-mask" v-if="visible" @click.self="close">
		<view class="popup-content">
			<image class="popup-bg-icon" :src="icon" mode="aspectFit" v-if="icon"></image>
			<view class="popup-header">
				<text class="popup-title">{{ title }}</text>
				<view class="popup-close" @click="close">
					<text class="close-icon">×</text>
				</view>
			</view>
			<scroll-view class="popup-body" scroll-y :show-scrollbar="false">
				<rich-text :nodes="content"></rich-text>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'RichContentPopup',
		props: {
			visible: { type: Boolean, default: false },
			title: { type: String, default: '' },
			content: { type: String, default: '' },
			icon: { type: String, default: '' }
		},
		emits: ['close'],
		methods: {
			close() { this.$emit('close') }
		}
	}
</script>

<style scoped>
	/* 隐藏滚动条 */
	:deep(.popup-body) ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
	.popup-mask {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	.popup-content {
		background: linear-gradient(180deg, #E8F0FE 0%, #FFFFFF 40%);
		border-radius: 24rpx;
		width: 640rpx;
		max-height: 75vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}
	.popup-bg-icon {
		position: absolute;
		width: 320rpx;
		height: 320rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.3;
		pointer-events: none;
		z-index: 0;
	}
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 36rpx 40rpx;
		z-index: 1;
	}
	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}
	.popup-close {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 56rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-close:active { opacity: 0.6; }
	.close-icon {
		font-size: 44rpx;
		color: #999;
		line-height: 1;
	}
	.popup-body {
		flex: 1;
		width: 90%;
		margin: 0 auto 0; 
		max-height: 55vh;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #555;
		line-height: 2;
		text-align: center;
		z-index: 1;
		display: flex;
		justify-content: center;
	}
</style>
