<template>
    <div :class="{'am-popup': true, 'className': className, 'am-popup-show': show, 'animation': animation}">
        <div class="am-popup-mask" v-if="mask" @click="onMaskTap" :style="'z-index: ' + zIndex"></div>
        <div class="am-popup-content am-popup-bottom" :style="'z-index: ' + zIndex"><slot></slot></div>
    </div>
</template>

<script>
export default {
    props: {
        className: {
            type: String,
            default: ''
        },
        show: {
            type: Boolean,
            default: false
        },
        position: {
            type: String,
            default: 'bottom'
        },
        mask: {
            type: Boolean,
            default: true
        },
        animation: {
            type: Boolean,
            default: true
        },
        disableScroll: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            zIndex: 10000
        }
    },
    methods: {
        onMaskTap () {
            this.$emit('onClose')
        }
    }
}
</script>

<style lang="less" scoped>
@import './popup.less';
</style>
