<template>
    <Modal
        ref="modal"
        v-model="show"
        :closable="escClosable"
        :mask-closable="maskClosable"
        :footer-hide="true"
        :transition-names="[`drawer-fade-${placement}`, '']"
        :beforeClose="beforeClose"
        fullscreen
        :class-name="`common-drawer-overlay ${placement}`">
        <DrawerOverlayView
            :placement="placement"
            :size="size"
            :minSize="minSize"
            :resize="resize"
            @on-close="onClose">
            <slot/>
        </DrawerOverlayView>
    </Modal>
</template>

<script>
import DrawerOverlayView from "./view";

export default {
    name: 'DrawerOverlay',
    components: {DrawerOverlayView},
    props: {
        value: {
            type: Boolean,
            default: false
        },
        maskClosable: {
            type: Boolean,
            default: true
        },
        escClosable: {
            type: Boolean,
            default: true
        },
        placement: {
            validator (value) {
                return ['right', 'bottom'].includes(value)
            },
            default: 'bottom'
        },
        size: {
            type: [Number, String],
            default: "100%"
        },
        minSize: {
            type: Number,
            default: 300
        },
        resize: {
            type: Boolean,
            default: true
        },
        beforeClose: Function
    },
    data() {
        return {
            show: this.value,
        }
    },
    watch: {
        value(v) {
            this.show = v;
        },
        show(v) {
            this.value !== v && this.$emit("input", v)
        }
    },
    methods: {
        onClose() {
            this.$refs.modal.close();
        }
    }
};
</script>
