<template>
    <div :class="modalBoxClass"
         :style="modalBoxStyle"
         @click="clickHandle">
        <slot></slot>
    </div>
</template>

<script>
import { prefix, prefixMixins, getZIndex } from 'jdd-design/utils';
export default {
    name: `${prefix}-modal`,
    mixins: [prefixMixins],
    data() {
        return {
            zIndex: getZIndex()
        };
    },
    props: {
        transparent: {
            type: Boolean,
            default: false
        },
        opacity: {
            type: Number,
            validator: val => {
                return val >= 0 && val <= 1;
            }
        }
    },
    computed: {
        modalBoxClass() {
            let clsNames = [`${prefix}-modal`];
            this.transparent && clsNames.push('is-transparent');
            return clsNames;
        },
        modalBoxStyle() {
            let style = {
                'z-index': this.zIndex
            };
            if (this.opacity != undefined) {
                style['background-color'] = `rgba(0,0,0,${this.opacity})`;
            }
            return style;
        }
    },
    methods: {
        clickHandle(evt) {
            this.$emit('click', evt);
        }
    }
};
</script>