// 如果up-popup弹框的遮罩层被覆盖或者是变为白色，需要查看unocss配置，unocss把u-popup__content—transition转化为两个变量了，需要过滤
<template>
    <up-popup :show="internalShow" mode="center" :round="16" :closeable="false" @close="handleClose" bgColor="transparent">
        <view class="confirm-dialog" :style="{ width }">
            <!-- 标题区域 -->
            <slot name="title">
                <view class="dialog-header pd-32">
                    <text class="dialog-title f-s-32 f-w-6 c-#333">{{ title }}</text>
                    <up-icon v-if="closeable" name="close" size="20" color="#999" class="close-icon" @click="handleClose" />
                </view>
            </slot>
            <!-- 内容区域（slot插槽） -->
            <slot name="content">
                <view class="dialog-content pd-32 pt-0">
                    <slot></slot>
                </view>
            </slot>
            <!-- 按钮区域 -->
            <slot name="footer">
                <view class="dialog-footer pd-32 pt-0">
                    <up-button v-if="showCancel" class="cancel-btn" :style="{ backgroundColor: cancelBgColor, color: cancelColor }" :customStyle="{ height: '80rpx', fontSize: '32rpx', borderRadius: '8rpx', flex: 1 }" @click="handleCancel">
                        {{ cancelText }}
                    </up-button>
                    <up-button class="confirm-btn" :style="{ backgroundColor: confirmBgColor, color: confirmColor }" :customStyle="{ height: '80rpx', fontSize: '32rpx', borderRadius: '8rpx', flex: 1, marginLeft: showCancel ? '24rpx' : '0' }" @click="handleConfirm">
                        {{ confirmText }}
                    </up-button>
                </view>
            </slot>
        </view>
    </up-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
interface Props {
    // 弹框标题，默认"系统提示"
    title?: string;
    // 是否显示关闭按钮
    closeable?: boolean;
    // 控制弹框显示/隐藏
    show?: boolean;
    // 取消按钮文字
    cancelText?: string;
    // 确认按钮文字
    confirmText?: string;
    // 取消按钮背景色
    cancelBgColor?: string;
    // 取消按钮文字颜色
    cancelColor?: string;
    // 确认按钮背景色
    confirmBgColor?: string;
    // 确认按钮文字颜色
    confirmColor?: string;
    // 是否显示取消按钮
    showCancel?: boolean;
    //弹框宽度
    width?: string;
}

const props = withDefaults(defineProps<Props>(), {
    title: '系统提示',
    closeable: true,
    show: false,
    cancelText: '取消',
    confirmText: '确认',
    cancelBgColor: '#F2F2F2',
    cancelColor: '#333',
    confirmBgColor: '#37A954',
    confirmColor: '#fff',
    showCancel: true,
    width: 'auto',
});

const emit = defineEmits<{
    // 取消事件（关闭弹框）
    (e: 'cancel'): void;
    // 确认事件
    (e: 'confirm'): void;
    // 关闭事件
    (e: 'close'): void;
    // 更新 show 状态
    (e: 'update:show', value: boolean): void;
}>();

// 内部显示状态
const internalShow = ref(props.show);

// 监听 props.show 变化
watch(
    () => props.show,
    (newVal) => {
        internalShow.value = newVal;
    }
);

// 处理关闭
const handleClose = () => {
    internalShow.value = false;
    emit('update:show', false);
    emit('close');
};

// 处理取消
const handleCancel = () => {
    internalShow.value = false;
    emit('update:show', false);
    emit('cancel');
};

// 处理确认
const handleConfirm = () => {
    internalShow.value = false;
    emit('update:show', false);
    emit('confirm');
};
</script>

<style lang="scss" scoped>
.confirm-dialog {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16rpx;
    // overflow: hidden;

    .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .dialog-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
        }

        .close-icon {
            padding: 8rpx;
            border-radius: 50%;

            &:active {
                background-color: #f5f5f5;
            }
        }
    }

    .dialog-content {
        flex: 1;
        min-height: 120rpx;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;

        .cancel-btn,
        .confirm-btn {
            :deep(.u-button) {
                border: none !important;
            }
        }
    }
}
</style>
