<template>
    <view v-if="show" class="van-overlay" :style="'z-index: '+(zIndex)+'; '+(customStyle)" :duration="duration"
        @click.stop="onClick" @touchmove.stop.prevent="noop">
        <slot></slot>
    </view>
</template>

<script>
    import VanTransition from "../transition/index.vue"
    export default {
        components: {
            VanTransition
        },
        props: {
            show: Boolean,
            customStyle: String,
            duration: {
                type: null,
                default: 300
            },
            zIndex: {
                type: Number,
                default: 1
            }
        },
        watch: {
            show: (newData, oldData) => {
                // console.log('overlay show watch')
                return newData
            }
        },
        methods: {
            onClick: function() {
                this.$emit('click');
            },
            // for prevent touchmove
            noop: function() {}
        }
    }
</script>
<style>
    @import '../common/index.css';

    .van-overlay {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7);
        background-color: var(--overlay-background-color, rgba(0, 0, 0, .7))
    }
</style>