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

const props = defineProps<{
    modelValue: boolean;
    title?: string;
}>();

const emit = defineEmits(['update:modelValue', 'onClose']);

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

function handleClose() {
    emit('update:modelValue', false);
    emit('onClose');
}
</script>

<template>
    <wd-popup
        v-model="show"
        position="bottom"
        safe-area-inset-bottom
        custom-style="border-radius: 32rpx 32rpx 0 0;"
        :close-on-click-modal="false"
        @click-modal="handleClose"
    >
        <view class="mfx_popup">
            <view class="mfx_popup-header">
                {{ title || '' }}
                <image
                    class="mfx_popup-header-close"
                    src="@/static/common/icon_down_out.png"
                    @click.stop="handleClose"
                />
            </view>
            <slot></slot>
        </view>
    </wd-popup>
</template>

<style lang="scss" scoped>
.mfx_popup {
    background: #fff;
    color: $font-color;
    padding: 32upx;
    color: $font-color;

    &-header {
        height: 56upx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        font-size: 32upx;
        position: relative;

        &-close {
            width: 56upx;
            height: 56upx;
            position: absolute;
            right: 0;
        }
    }
}
</style>
