<script setup lang="ts">
import type { TPopupConfig } from '@/types/draw';
import { computed } from 'vue';

const props = defineProps<{
    modelValue: boolean;
    config: TPopupConfig;
}>();

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

const show = computed({
    get: () => props.modelValue,
    set: value => emit('update:modelValue', value),
});
</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="show = false"
    >
        <view class="wrapper">
            <view class="header">
                {{ config?.title }}
                <image
                    class="close-icon"
                    src="@/static/common/icon_down_out.png"
                    @click.stop="show = false"
                />
            </view>

            <view class="footer">
                <button
                    v-for="(item, index) in config?.btnInfo"
                    :key="index"
                    class="footer-button"
                    @click.stop="
                        () => {
                            item?.fn?.();
                            show = false;
                        }
                    "
                >
                    {{ item?.text }}
                </button>
            </view>
        </view>
    </wd-popup>
</template>

<style lang="scss" scoped>
.wrapper {
    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-icon {
            width: 56upx;
            height: 56upx;
            position: absolute;
            right: 0;
        }
    }
    .footer {
        width: 100%;
        background: #fff;
        padding-top: 16upx;

        &-button {
            width: 100%;
            height: 88upx;
            line-height: 88upx;
            margin-top: 32upx;
            color: $font-color;
            border-radius: 44upx;
            font-size: 28upx;
            background: $bg-fill;
        }
    }
}
</style>
