<template>
	<view v-if="visible" class="confirm-overlay" :class="{ 'confirm-overlay-enter': showAnimation }" @click="onOverlay">
		<view class="confirm-overlay__content" @click.stop>
			<view class="confirm-fixed" :class="{ 'confirm-scale-enter': showAnimation }">
				<view class="confirm-container">
					<text class="confirm-title">{{ title }}</text>
					<view class="confirm-content-wrap">
						<text class="confirm-content">{{ content }}</text>
					</view>
					<view class="confirm-actions">
						<view v-if="showCancel" class="btn-cancel" hover-class="hover_btn" @click="onCancel">
							<text class="btn-text-cancel">{{ cancelText }}</text>
						</view>
						<view class="btn-confirm" hover-class="hover_btn" @click="onConfirm">
							<text class="btn-text-confirm">{{ confirmText }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="uts">
	type PopupConfirmProps = {
		visible : boolean
		title : string
		content : string
		confirmText : string
		cancelText : string
		closeOnOverlay : boolean
		showCancel : boolean
	}

	type PopupConfirmEmits = {
		(e : 'confirm') : void
		(e : 'cancel') : void
	}

	const props = withDefaults(defineProps<PopupConfirmProps>(), {
		visible: false,
		title: '提示',
		content: '',
		confirmText: '确定',
		cancelText: '取消',
		closeOnOverlay: true,
		showCancel: true
	})

	const emit = defineEmits<PopupConfirmEmits>()

	const showAnimation = ref(false)

	// 进入时触发动画，退出时复位
	watch(() : boolean => props.visible, (val : boolean) : void => {
		if (val == true) {
			nextTick(() => {
				showAnimation.value = true
			})
		} else {
			showAnimation.value = false
		}
	})

	const onCancel = () : void => {
		emit('cancel')
	}

	const onConfirm = () : void => {
		emit('confirm')
	}

	const onOverlay = () : void => {
		if (props.closeOnOverlay == true) {
			emit('cancel')
		}
	}
</script>
<style>
	.confirm-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 10000;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease-out;
	}

	.confirm-overlay-enter {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.confirm-overlay__content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.confirm-fixed {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		opacity: 0;
		transform: scale(0.7) translateY(50rpx);
		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.confirm-scale-enter {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	.confirm-container {
		width: 566rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.confirm-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #21061A;
	}

	.confirm-content-wrap {
		margin-top: 20rpx;
		width: 100%;
		max-width: 518rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.confirm-content {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		text-align: center;
		padding: 30rpx 0;
		width: 100%;
		white-space: pre-wrap;
		line-height: 1.5;
	}

	.confirm-actions {
		margin-top: 36rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-cancel {
		width: 210rpx;
		height: 72rpx;
		background-color: #F4F4F5;
		border-radius: 12rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-confirm {
		width: 210rpx;
		height: 72rpx;
		background-color: #fd3da0;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-text-cancel {
		color: #333333;
		font-size: 26rpx;
		font-weight: 700;
	}

	.btn-text-confirm {
		color: #FFFFFF;
		font-size: 26rpx;
		font-weight: 700;
	}
</style>