<template>
	<view class="dialog-mask" v-if="visible" @click.self="cancel">
		<view class="dialog-content">
			<view class="dialog-title" v-if="title">{{ title }}</view>
			<view class="dialog-message">{{ message }}</view>
			<view class="dialog-actions">
				<button class="btn-cancel" @click="cancel">{{ cancelText }}</button>
				<button class="btn-confirm" @click="confirm">{{ confirmText }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ConfirmDialog',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			message: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			cancelText: {
				type: String,
				default: '取消'
			}
		},
		emits: ['confirm', 'cancel'],
		methods: {
			confirm() {
				this.$emit('confirm')
			},
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped>
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	.dialog-content {
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		width: 560rpx;
		text-align: center;
	}
	.dialog-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	.dialog-message {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		line-height: 1.6;
	}
	.dialog-actions {
		display: flex;
		gap: 20rpx;
	}
	.btn-cancel,
	.btn-confirm {
		flex: 1;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 16rpx 0;
	}
	.btn-cancel {
		background: #f5f5f5;
		color: #666;
	}
	.btn-confirm {
		background: #007aff;
		color: #fff;
	}
</style>
