<template>
	<view class="update-modal" v-if="show" @tap.stop="handleMaskClick">
		<view class="modal-content" @tap.stop>
			<!-- 版本号标题 -->
			<view class="version-title">发现新版本 {{ version }}</view>
			
			<!-- 更新内容 -->
			<view class="update-content">
				<text class="content-text">{{ updateContent }}</text>
			</view>
			
			<!-- 按钮区域 -->
			<view class="button-area">
				<view class="cancel-btn" v-if="!forceUpdate" @tap="handleCancel">稍后再说</view>
				<view class="confirm-btn" @tap="handleConfirm">立即更新</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'UpdateModal',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		version: {
			type: String,
			default: ''
		},
		updateContent: {
			type: String,
			default: ''
		},
		downloadUrl: {
			type: String,
			default: ''
		},
		forceUpdate: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleMaskClick() {
			// 强制更新时，点击遮罩不关闭
			if (!this.forceUpdate) {
				this.handleCancel();
			}
		},
		handleCancel() {
			this.$emit('cancel');
		},
		handleConfirm() {
			this.$emit('confirm', this.downloadUrl);
		}
	}
}
</script>

<style lang="scss" scoped>
.update-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	
	.modal-content {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
		
		.version-title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			padding: 60rpx 40rpx 40rpx;
		}
		
		.update-content {
			max-height: 600rpx;
			padding: 0 40rpx 40rpx;
			overflow-y: auto;
			
			.content-text {
				font-size: 28rpx;
				line-height: 44rpx;
				color: #666666;
				white-space: pre-wrap;
				word-break: break-all;
			}
		}
		
		.button-area {
			display: flex;
			border-top: 1px solid #eeeeee;
			
			.cancel-btn,
			.confirm-btn {
				flex: 1;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.cancel-btn {
				color: #999999;
				border-right: 1px solid #eeeeee;
			}
			
			.confirm-btn {
				color: #007aff;
			}
		}
	}
}
</style>

