<template>
    <Modal
        title="分配"
        :value="true"
        :fullscreen="false"
        closable
        :mask-closable="false"
        @on-ok="onOK"
        @on-cancel="onCancel"
        :width="600"
        :styles="styles"
        :loading="loading"
    >
        <slot></slot>
        <slot name="footer" slot="footer"></slot>
    </Modal>
</template>
<script>
export default {
    name: 'WebBaseModal',
    data() {
        return {}
    },
    props: {
        styles: Object,
        loading: Boolean,
        beforeOk: Function
    },
    computed: {},
    components: {},
    methods: {
        onCancel() {
            this.remove()
        },
        onOK() {
            if (this.beforeOk && !this.beforeOk()) {
                this.$emit('on-ok')
                return
            }
            this.$emit('on-ok')
            this.remove()
        },
        remove() {
            setTimeout(() => {
                this.destroy()
            }, 300)
        },
        destroy() {
            this.$destroy()
            document.body.removeChild(this.$el)
        }
    }
}
</script>
<style>
</style>
