Vue.component("retail-drawer", {
    template: `<div v-if="show" class="drawer-mask" :style="[modelZIndex]">
                    <div class="drawer-model" v-if="showModel" @click="closeDrawer"></div>
                    <div class="drawer-box" :class="show?'drawer-in':'drawer-on'" :style="[modelStyle]">
                        <p class="drawer-title">
                            <slot name="title">
                                <span>{{title}}</span>
                                <i class="el-icon-close drawer-close drawer-close-right" v-if="showClose&&closeType=='right'" @click="closeDrawer"></i>
                                <i class="el-icon-arrow-left drawer-close drawer-close-left" v-if="showClose&&closeType=='left'" @click="closeDrawer"></i>
                           </slot>
                        </p>
                        <div class="drawer-container-box">
                            <slot name="body"></slot>
                        </div>
                    </div>
                </div>`,
    props: {
        'title': {
            type: String,
            default: '详情'
        },
        'show': {
            type: Boolean,
        },
        'showModel': {
            type: Boolean,
            default: true,
        },//是否显示遮罩层
        'showClose': {
            type: Boolean,
            default: true,
        },//是否显示关闭按钮
        'width': {
            type: String,
            default: '40%',
        },
        'height': {
            type: String,
            default: 'calc(100vh - 65px)',
        },
        'minWidth': {
            type: String,
            default: '400px',
        },
        'minHeight': {
            type: String,
            default: '300px',
        },
        "zIndex": {
            type: Number,
            default: 10000000000,
        },
        'closeType':{
            type: String,
            default: 'right',
        }

    },
    computed: {
        modelStyle() {
            return {
                'width': this.width,
                'height': this.height,
                'min-width': this.minWidth,
                'min-height': this.minHeight,
            }
        },
        modelZIndex() {
            return {
                'z-index': this.zIndex
            }
        }
    },
    methods: {
        //关闭
        closeDrawer() {
            this.$emit('update:show', false);
            this.$emit('close');
        },
    }
});