<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    modelValue: boolean;
    type?: string; // alert confirm
    title?: string;
    content?: string;
    cancelBtnText?: string;
    confirmBtnText?: string;
}>();

const emits = defineEmits(['update:modelValue', 'onConfirm', 'onCancel']);

const show = computed({
    get: () => props.modelValue,
    set: value => emits('update:modelValue', value),
});

function handleCancel() {
    emits('onCancel');
    show.value = false;
}
function handleConfirm() {
    emits('onConfirm');
    show.value = false;
}
</script>

<template>
    <wd-overlay :show="show" :z-index="999">
        <view class="wrapper">
            <wd-transition :show="show" name="zoom-in">
                <view class="block">
                    <view v-if="title" class="title">{{ title }}</view>
                    <view class="content">
                        {{ content || '提示内容' }}
                    </view>
                    <view class="footer">
                        <template v-if="type === 'confirm'">
                            <button
                                class="footer-button"
                                :style="{ marginRight: '24upx' }"
                                @click.stop="handleCancel"
                            >
                                {{ cancelBtnText || '取消' }}
                            </button>
                            <button class="footer-button primary" @click.stop="handleConfirm">
                                {{ confirmBtnText || '确定' }}
                            </button>
                        </template>
                        <template v-else>
                            <button class="footer-button primary" @click.stop="show = false">
                                {{ confirmBtnText || '好的，我知道了' }}
                            </button>
                        </template>
                    </view>
                </view>
            </wd-transition>
        </view>
    </wd-overlay>
</template>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
        width: 612upx;
        /* padding: 32upx 40upx; */
        padding: 32upx 0;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 30upx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 32upx;
            color: $font-color;
            font-weight: bold;
        }

        .content {
            color: #333;
            font-size: 28upx;
            margin-top: 36upx;
            padding: 0 40upx;
        }
        .footer {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 72upx;
            padding: 0 0 0 24upx;
            box-sizing: border-box;

            &-button {
                flex: 1;
                height: 88upx;
                background: $bg-fill;
                border-radius: 44upx;
                font-size: 32upx;
                font-weight: bold;
                color: $font-color;
                margin-right: 24rpx;

                &.primary {
                    background: $theme-color;
                }
            }
        }
    }
}
</style>
