<template>
    <a-modal 
        :visible="true" 
        :width="width" 
        :maskClosable="false" 
        :destroyOnClose="true"
        :title="title" 
        :footer="null"
        :wrapClassName="wrapClassName"
        @cancel="onClose" 
    >
        <slot name="modalContent"></slot>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';

const props = {
    width: {
        type: String,
        default: '1000px'
    },
    title:{
        type:String,
        default:"版本资源"
    },
    wrapClassName:{
        type:String,
        default:""
    }
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const propsData = reactive({
            width: props.width,
            title: props.title,
            wrapClassName:props.wrapClassName
        })
        watch(
            () => props.width,
            (val) => {
                propsData.width = val
            }
        )
        watch(
            () => props.title,
            (val) => {
                propsData.title = val
            }
        )
        watch(
            () => props.wrapClassName,
            (val) => {
                propsData.wrapClassName = val
            }
        )
        const onClose = (e) => {
            emit('closeModal')
        }
        return {
            ...toRefs(propsData),
            //func
            onClose
        };
    },
});
</script>