<template>
	<view v-if="show" class="hl88-lr-insufficient-balance-overlay" @tap="handleMaskClick">
		<view class="hl88-lr-insufficient-balance-modal" @tap.stop="">
			<!-- 图标 -->
			<view class="hl88-lr-insufficient-balance-icon-wrap">
				<image class="hl88-lr-insufficient-balance-icon" src="/static/imgs/icon/ic_buy_diamond.png" mode="aspectFit"></image>
			</view>
			<!-- 标题 -->
			<text class="hl88-lr-insufficient-balance-title">{{ title }}</text>
			<!-- 副标题 -->
			<text class="hl88-lr-insufficient-balance-subtitle">{{ subtitle }}</text>
			<!-- 按钮 -->
			<view class="hl88-lr-insufficient-balance-button" :style="buttonStyle" @tap="handleButtonClick">
				<text class="hl88-lr-insufficient-balance-button-text">{{ buttonText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'LiveRoomInsufficientBalanceModal',
	props: {
		// 是否显示
		show: {
			type: Boolean,
			default: false
		},
		// 标题
		title: {
			type: String,
			default: '钻石余额不足'
		},
		// 副标题
		subtitle: {
			type: String,
			default: '储值后才可继续购买'
		},
		// 按钮文字
		buttonText: {
			type: String,
			default: '去储值'
		},
		// 点击遮罩是否关闭
		maskClosable: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		// nvue 中需要使用 backgroundColor 而不是 linear-gradient
		buttonStyle() {
			// #ifdef APP-NVUE
			return {
				backgroundColor: '#ff6b6b' // 使用渐变色的主色
			};
			// #endif
			// #ifndef APP-NVUE
			return {};
			// #endif
		}
	},
	methods: {
		handleMaskClick() {
			if (this.maskClosable) {
				this.$emit('close');
			}
		},
		handleButtonClick() {
			this.$emit('confirm');
		}
	}
};
</script>

<style scoped>
.hl88-lr-insufficient-balance-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;
}

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

.hl88-lr-insufficient-balance-icon-wrap {
	margin-bottom: 40rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
}

.hl88-lr-insufficient-balance-icon {
	width: 200rpx;
	height: 200rpx;
}

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

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

.hl88-lr-insufficient-balance-button {
	/* #ifdef APP-NVUE */
	background-color: #ff6b6b;
	/* #endif */
	/* #ifndef APP-NVUE */
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	/* #endif */
	border-radius: 50rpx;
	width: 100%;
	height: 88rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
	/* #ifndef APP-NVUE */
	box-shadow: 0 8rpx 24rpx rgba(238, 90, 111, 0.4);
	/* #endif */
}

.hl88-lr-insufficient-balance-button-text {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 500;
}
</style>
