<template>
    <Drawer
        class="drawer-container"
        :title="title"
        :value="true"
        :width="width"
        :mask-closable="maskClosable"
        :styles="styles"
        @on-close="onCancel"
    >
        <component
            class="drawer-container__component"
            :is="componentName"
            :rowData="rowData"
            :opType="opType"
        ></component>
        <div class="drawer-container__buttons">
            <Button style="margin-right: 8px">取消</Button>
            <Button type="primary">确认</Button>
        </div>
    </Drawer>
</template>
<script>
export default {
    name: 'CommonDrawerContainer',
    data() {
        return {
            styles: {
                display: 'flex',
                flexDirection: 'column'
            }
        }
    },
    computed: {},
    props: {
        componentName: {
            type: String
        },
        title: {
            type: String
        },
        width: {
            type: Number,
            default: 400
        },
        maskClosable: {
            type: Boolean,
            default: false
        },
        // 网格数据
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        // 操作类型
        opType: {
            type: String
        }
    },
    methods: {
        onCancel() {
            this.$emit('on-cancel')
            this.remove()
        },
        onOK() {
            // if (this.beforeOk) {
            //     if (!this.beforeOk()) {
            //         this.$emit('on-ok')
            //         return
            //     }
            // }

            this.remove()
            this.$emit('on-ok')
        },
        remove() {
            setTimeout(() => {
                this.destroy()
            }, 300)
        },
        destroy() {
            this.$destroy()
            document.body.removeChild(this.$el)
        }
    },
    mounted() {},
    created() {}

    // eslint-disable-next-line
}
</script>   
<style lang="less">
.drawer-container {
    &__component {
        flex: 1;
        overflow: auto;
    }

    &__buttons {
        text-align: right;
        margin-top: 16px;
    }
}
</style>
