<template>
	<view v-if="show" class="pay-popup-overlay" @tap="handleMaskClick">
		<view class="pay-popup-modal" @tap.stop="">
			<!-- 图标 -->
			<view v-if="icon || showDefaultIcon" class="pay-popup-icon-container">
				<view class="pay-popup-icon-wrapper">
					<!-- 如果传入了图标路径，显示图片 -->
					<image 
						v-if="icon" 
						class="pay-popup-icon" 
						:src="icon" 
						mode="aspectFit"
					></image>
					<!-- 否则显示默认渐变背景 -->
					<view v-else class="pay-popup-icon-gradient"></view>
				</view>
			</view>
			
			<!-- 标题 -->
			<text v-if="titleText" class="pay-popup-title">{{ titleText }}</text>
			
			<!-- 副标题/文字内容 -->
			<text v-if="subtitle" class="pay-popup-subtitle">{{ subtitle }}</text>
			
			<!-- 按钮容器 -->
			<view class="pay-popup-buttons">
				<!-- 关闭按钮 -->
				<view class="pay-popup-button pay-popup-button-close" :style="buttonCloseStyle" @tap="handleClose">
					<text class="pay-popup-button-text pay-popup-button-text-close">{{ closeText }}</text>
				</view>
				<!-- 确认支付按钮 -->
				<view 
					class="pay-popup-button pay-popup-button-confirm" 
					:style="buttonConfirmStyle"
					@tap="handleConfirm"
				>
					<text class="pay-popup-button-text pay-popup-button-text-confirm">{{ confirmText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'LiveVideoPayPop',
	props: {
		// 是否显示
		show: {
			type: Boolean,
			default: false
		},
		// 图标路径（如果传入则显示图片，否则显示默认渐变背景）
		icon: {
			type: String,
			default: ''
		},
		// 是否显示默认图标（当icon为空时，是否显示默认渐变图标）
		showDefaultIcon: {
			type: Boolean,
			default: true
		},
		// 支付金额（钻石数）
		amount: {
			type: [Number, String],
			default: 0
		},
		// 标题（如果不传则使用默认格式：支付{amount}钻石，如果传入空字符串则不显示标题）
		title: {
			type: String,
			default: ''
		},
		// 副标题/文字内容（如果传入空字符串则不显示）
		subtitle: {
			type: String,
			default: '解锁观看完整剧集'
		},
		// 关闭按钮文字
		closeText: {
			type: String,
			default: '关闭'
		},
		// 确认按钮文字
		confirmText: {
			type: String,
			default: '确认支付'
		},
		// 点击遮罩是否关闭
		maskClosable: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		// 标题文本（如果title为空字符串，返回null不显示；如果title有值则使用，否则使用默认格式）
		titleText() {
			if (this.title === '') {
				// 如果明确传入空字符串，则不显示标题
				return null;
			}
			if (this.title) {
				return this.title;
			}
			// 如果title未设置，使用默认格式
			return `支付${this.amount}钻石`;
		},
		// 关闭按钮样式（nvue中需要使用内联样式设置间距）
		buttonCloseStyle() {
			// #ifdef APP-NVUE
			// nvue中使用flex: 1平分空间，通过marginRight设置间距
			return {
				marginRight: '20rpx'
			};
			// #endif
			// #ifndef APP-NVUE
			return {};
			// #endif
		},
		// 确认按钮样式（nvue中需要使用内联样式）
		buttonConfirmStyle() {
			// #ifdef APP-NVUE
			return {
				backgroundColor: '#19be6b'
			};
			// #endif
			// #ifndef APP-NVUE
			return {};
			// #endif
		}
	},
	methods: {
		handleMaskClick() {
			if (this.maskClosable) {
				this.$emit('close');
			}
		},
		handleClose() {
			this.$emit('close');
		},
		handleConfirm() {
			this.$emit('confirm', {
				amount: this.amount
			});
		}
	}
};
</script>

<style scoped>
.pay-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.pay-popup-modal {
	background-color: #ffffff;
	border-radius: 32rpx;
	width: 600rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
	/* #endif */
	flex-direction: column;
	align-items: center;
	padding: 60rpx 40rpx 40rpx;
}

.pay-popup-icon-container {
	margin-bottom: 40rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
}

.pay-popup-icon-wrapper {
	width: 200rpx;
	height: 200rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
}

.pay-popup-icon-gradient {
	width: 250rpx;
	height: 200rpx;
	border-radius: 100rpx;
	/* #ifndef APP-NVUE */
	background: linear-gradient(135deg, #ffd700 0%, #4a90e2 50%, #ff69b4 100%);
	/* 添加闪光效果 */
	box-shadow: 
		0 0 20rpx rgba(255, 215, 0, 0.6),
		0 0 40rpx rgba(74, 144, 226, 0.4),
		0 0 60rpx rgba(255, 105, 180, 0.3);
	/* #endif */
	/* #ifdef APP-NVUE */
	/* nvue中使用纯色背景，渐变可能不支持 */
	background-color: #4a90e2;
	/* #endif */
}

.pay-popup-icon {
	width: 200rpx;
	height: 200rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	/* #ifndef APP-NVUE */
	transform: translate(-50%, -50%);
	/* #endif */
	/* #ifdef APP-NVUE */
	margin-top: -100rpx;
	margin-left: -100rpx;
	/* #endif */
}

.pay-popup-title {
	color: #333333;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	text-align: center;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.pay-popup-subtitle {
	color: #666666;
	font-size: 28rpx;
	margin-bottom: 50rpx;
	text-align: center;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.pay-popup-buttons {
	width: 444rpx;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	
	/* #ifndef APP-NVUE */
	display: flex;
	gap: 20rpx;
	/* #endif */
}

.pay-popup-button {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	align-items: center;
	justify-content: center;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	/* #ifdef APP-NVUE */
	/* nvue中确保按钮内容不被裁剪 */
	overflow: hidden;
	/* #endif */
	/* 按钮文字与背景左右间距 */
	padding-left: 20rpx;
	padding-right: 20rpx;
}

/* 关闭按钮 */
.pay-popup-button-close {
	background-color: #f5f5f5;
	border-width: 1rpx;
	border-style: solid;
	border-color: #cccccc;
	/* #ifndef APP-NVUE */
	box-shadow: none;
	/* #endif */
}

.pay-popup-button-text-close {
	color: #333333;
	font-size: 32rpx;
	font-weight: 500;
}

/* 确认支付按钮 */
.pay-popup-button-confirm {
	/* #ifndef APP-NVUE */
	background: linear-gradient(135deg, #19be6b 0%, #16ab60 100%);
	box-shadow: 0 8rpx 24rpx rgba(25, 190, 107, 0.4);
	/* #endif */
	/* #ifdef APP-NVUE */
	/* nvue中背景色通过内联样式设置 */
	border-width: 0;
	/* #endif */
}

.pay-popup-button-text-confirm {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
	/* #ifdef APP-NVUE */
	/* nvue中确保文字完整显示 */
	text-align: center;
	/* #endif */
}
</style>