<template>
	<view class="dialog-overlay" v-if="visible" @click="handleOverlayClick">
		<view class="dialog-container" @click.stop>
			<!-- 弹窗标题 -->
			<view class="dialog-header">
				<text class="dialog-title">{{ title }}</text>
			</view>
			
			<!-- 弹窗内容 -->
			<view class="dialog-content">
				<slot name="content">
					<text class="default-content">{{ content }}</text>
				</slot>
			</view>
			
			<!-- 弹窗底部按钮 -->
			<view class="dialog-footer">
				<view 
					class="dialog-btn cancel"
					
					@click="oncancel"
				>
					<text class="btn-text">取消</text>
				</view>
				<view
					class="dialog-btn confirm"
					@click="onconfirm"
				>
					<text class="btn-text">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps, defineEmits } from 'vue'
	
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '温馨提示'
		},
		content: {
			type: String,
			default: ''
		},
		
		closeOnOverlay: {
			type: Boolean,
			default: true
		}
	})
	
	const emit = defineEmits(['close'])
	

	
	const oncancel=()=>{
		emit('close');
	  
	}
	const onconfirm=()=>{
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	
	.dialog-container {
		background-color: #ffffff;
		border-radius: 20rpx;
		width: 92%;
		
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	}
	
	.dialog-header {
		padding: 40rpx 40rpx 20rpx;
		text-align: center;
		.dialog-title {
			font-size: 36rpx;
			color: #8B2316;
			
		}
	}
	
	.dialog-content {
		padding: 40rpx;
		min-height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.default-content {
			font-size: 32rpx;
			color: #333;
			line-height: 1.5;
			text-align: center;
		}
	}
	
	.dialog-footer {
		display: flex;
		padding:0 40rpx;
		
		.dialog-btn {
			flex: 1;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1rpx solid #f0f0f0;
			border-right: 1rpx solid #f0f0f0;
			transition: background-color 0.2s;
			
			&:last-child {
				border-right: none;
			}
			
			&:active {
				background-color: #f5f5f5;
			}
			
			&.cancel {
				.btn-text {
					color: #999999;
				}
			}
			
			&.confirm {
				.btn-text {
					color: #8B2316;
					font-weight: 500;
				}
			}
			
			&.default {
				.btn-text {
					color: #333333;
				}
			}
			
			.btn-text {
				font-size: 32rpx;
			}
		}
	}
</style>
