<template>
	<view v-if="show" class="payment-modal-overlay" @click="handleOverlayClick">
		<view class="payment-modal" @click.stop>
			<!-- 顶部装饰 -->
			<view class="modal-decoration">
				<view class="decoration-circle circle-1"></view>
				<view class="decoration-circle circle-2"></view>
				<view class="decoration-circle circle-3"></view>
			</view>
			
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="handleClose">
				<text class="close-icon">✕</text>
			</view>
			
			<!-- 图标 -->
			<view class="icon-section">
				<view class="icon-wrapper">
					<text class="icon">💳</text>
				</view>
			</view>
			
			<!-- 标题 -->
			<view class="title-section">
				<text class="main-title">确认支付</text>
				<text class="sub-title">{{ serviceName }}</text>
			</view>
			
			<!-- 价格展示 -->
			<view class="price-display">
				<view class="price-wrapper">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ price }}</text>
				</view>
				<text class="price-desc">{{ serviceDesc }}</text>
			</view>
			
			<!-- 订单详情 -->
			<view class="order-details">
				<view class="detail-item">
					<text class="detail-label">订单编号</text>
					<text class="detail-value">{{ orderNo.slice(-8) }}</text>
				</view>
				<view class="detail-divider"></view>
				<view class="detail-item">
					<text class="detail-label">创建时间</text>
					<text class="detail-value">{{ createTime }}</text>
				</view>
			</view>
			
			<!-- 提示信息 -->
			<view class="tips-section">
				<view class="tips-content">
					<text class="tips-icon">🔒</text>
					<text class="tips-text">安全支付 · 快速到账</text>
				</view>
			</view>
			
			<!-- 按钮 -->
			<view class="action-buttons">
				<button class="btn btn-cancel" @click="handleClose" :disabled="paying">
					取消
				</button>
				<button class="btn btn-confirm" @click="handleConfirm" :disabled="paying">
					<text v-if="!paying">立即支付</text>
					<text v-else class="paying-text">
						<text class="loading-dot">●</text>
						<text class="loading-dot">●</text>
						<text class="loading-dot">●</text>
					</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PaymentModal',
	props: {
		// 是否显示
		show: {
			type: Boolean,
			default: false
		},
		// 服务类型
		serviceType: {
			type: String,
			required: true
		},
		// 服务名称
		serviceName: {
			type: String,
			required: true
		},
		// 服务描述
		serviceDesc: {
			type: String,
			default: ''
		},
		// 价格
		price: {
			type: [String, Number],
			required: true
		},
		// 订单号
		orderNo: {
			type: String,
			default: ''
		},
		// 支付提示
		paymentTips: {
			type: String,
			default: '点击确认支付后将开始处理您的请求'
		}
	},
	data() {
		return {
			paying: false,
			createTime: ''
		};
	},
	watch: {
		show(val) {
			if (val) {
				this.createTime = this.formatTime(new Date());
			}
		}
	},
	methods: {
		// 处理遮罩点击
		handleOverlayClick() {
			if (!this.paying) {
				this.handleClose();
			}
		},
		
		// 关闭弹窗
		handleClose() {
			if (this.paying) return;
			this.$emit('close');
		},
		
		// 确认支付
		async handleConfirm() {
			if (this.paying) return;
			
			this.paying = true;
			
			try {
				// 触发支付事件
				this.$emit('confirm', {
					serviceType: this.serviceType,
					orderNo: this.orderNo,
					price: this.price
				});
			} catch (error) {
				console.error('[PaymentModal] 支付失败:', error);
				this.paying = false;
			}
		},
		
		// 支付成功（由父组件调用）
		paymentSuccess() {
			this.paying = false;
			this.$emit('success');
		},
		
		// 支付失败（由父组件调用）
		paymentFailed(error) {
			this.paying = false;
			this.$emit('failed', error);
		},
		
		// 格式化时间
		formatTime(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
	}
};
</script>

<style scoped>
/* 遮罩层 */
.payment-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 40rpx;
	animation: fadeIn 0.3s ease;
}

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

/* 弹窗主体 */
.payment-modal {
	position: relative;
	width: 100%;
	max-width: 640rpx;
	background: #ffffff;
	border-radius: 40rpx;
	overflow: hidden;
	box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.25);
	animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* 顶部装饰 */
.modal-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200rpx;
	background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
	overflow: hidden;
}

.decoration-circle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
	width: 300rpx;
	height: 300rpx;
	top: -150rpx;
	right: -100rpx;
	animation: float 6s ease-in-out infinite;
}

.circle-2 {
	width: 200rpx;
	height: 200rpx;
	top: 50rpx;
	left: -80rpx;
	animation: float 8s ease-in-out infinite reverse;
}

.circle-3 {
	width: 150rpx;
	height: 150rpx;
	top: -50rpx;
	left: 50%;
	animation: float 7s ease-in-out infinite;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-20rpx) rotate(180deg);
	}
}

/* 关闭按钮 */
.close-btn {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	z-index: 10;
	transition: all 0.3s;
}

.close-icon {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
}

.close-btn:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.9);
}

/* 图标区域 */
.icon-section {
	padding: 80rpx 0 32rpx;
	display: flex;
	justify-content: center;
}

.icon-wrapper {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12rpx 40rpx rgba(139, 115, 85, 0.3);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 12rpx 40rpx rgba(139, 115, 85, 0.3);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 16rpx 50rpx rgba(139, 115, 85, 0.4);
	}
}

.icon {
	font-size: 64rpx;
}

/* 标题区域 */
.title-section {
	padding: 0 48rpx 32rpx;
	text-align: center;
}

.main-title {
	display: block;
	font-size: 40rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin-bottom: 12rpx;
}

.sub-title {
	display: block;
	font-size: 26rpx;
	color: #666666;
}

/* 价格展示 */
.price-display {
	padding: 40rpx 48rpx;
	text-align: center;
	background: linear-gradient(135deg, #FDF8F2 0%, #F5EFE7 100%);
	margin: 0 32rpx;
	border-radius: 24rpx;
	border: 2rpx solid rgba(139, 115, 85, 0.15);
}

.price-wrapper {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 12rpx;
}

.price-symbol {
	font-size: 44rpx;
	font-weight: bold;
	color: #8B7355;
	margin-right: 8rpx;
}

.price-value {
	font-size: 88rpx;
	font-weight: bold;
	color: #8B7355;
	line-height: 1;
}

.price-desc {
	font-size: 24rpx;
	color: #999999;
}

/* 订单详情 */
.order-details {
	padding: 32rpx 48rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
}

.detail-label {
	font-size: 26rpx;
	color: #999999;
}

.detail-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

.detail-divider {
	height: 1rpx;
	background: #f0f0f0;
	margin: 8rpx 0;
}

/* 提示信息 */
.tips-section {
	padding: 24rpx 48rpx;
}

.tips-content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 32rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
}

.tips-icon {
	font-size: 28rpx;
	margin-right: 12rpx;
}

.tips-text {
	font-size: 24rpx;
	color: #666666;
}

/* 按钮组 */
.action-buttons {
	display: flex;
	gap: 24rpx;
	padding: 32rpx 48rpx 48rpx;
}

.btn {
	flex: 1;
	height: 96rpx;
	border-radius: 48rpx;
	font-size: 30rpx;
	font-weight: bold;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.btn-cancel {
	background: #f5f5f5;
	color: #666666;
}

.btn-cancel:active {
	background: #e8e8e8;
	transform: scale(0.98);
}

.btn-confirm {
	background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
	color: #ffffff;
	box-shadow: 0 8rpx 24rpx rgba(139, 115, 85, 0.4);
}

.btn-confirm:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 12rpx rgba(139, 115, 85, 0.3);
}

.btn-confirm:disabled {
	opacity: 0.6;
	transform: none;
}

/* 支付中动画 */
.paying-text {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.loading-dot {
	display: inline-block;
	animation: loadingDot 1.4s ease-in-out infinite;
	font-size: 20rpx;
}

.loading-dot:nth-child(1) {
	animation-delay: 0s;
}

.loading-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes loadingDot {
	0%, 60%, 100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	30% {
		opacity: 1;
		transform: scale(1.2);
	}
}
</style>
