<template>
    <div :class="[$style.slideOver,value&&$style.show]">
        <Touch
            tag="div"
            :class="$style.layer"
            @tap="$emit('input',false)"
        />
        <div :class="[$style.box,className]">
            <slot/>
        </div>
        <slot name="sameLevel"/>
    </div>
</template>

<script>
    import Touch from "../external/Touch";
    export default {
        name: "SlideOver",
        components: {Touch},
        props:{
            value:{
                type:Boolean,
                default:false
            },
            className:{
                type:String,
                default:''
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    $duration: 400ms;
    .slideOver {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        pointer-events: none;
        visibility: hidden;
        transition: pointer-events 0s $duration,visibility 0s $duration;

        &.show{
            pointer-events: auto;
            visibility: visible;
            transition: pointer-events 0s 0s,visibility 0s 0s;
            >.layer{
                opacity: 1;
            }
            >.box{
                transform: translateX(0);
            }
        }
        >.layer{
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            opacity: 0;
            transition: opacity $duration;
        }
    }
    .box{
        max-width: 85%;
        overflow-x: auto;
        position: absolute;
        z-index: 2;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #FFF;
        height: 100%;
        transform: translateX(100%);
        transition: transform $duration;
        overflow-y: auto;
        @include ScrollBarStyle();
    }
</style>