<template>
    <div v-if="swfShow"
         :class="'y_overload ' + swfClass"
         :style="style + delay"
         @touchmove.stop.prevent="e=>e && e.preventDefault && e.preventDefault()"
         @transitionend="fnTransitionend"
         @webkitTransitionend="fnTransitionend">
        <div class="y_overload_bg" :style="backgroundStr" @click="fnClick"></div>
    </div>
</template>

<script>
    import yTransition from "./yTransition.vue";
    import transition from "./mixins/transition";

    export default {
        name: "yOverload",
        components:{
            yTransition
        },
        computed:{
            style(){
                let styleStr = "";
                return "z-index:"+this.zIndex+";"+styleStr
            },
            backgroundStr(){
                return this.background ? "background:"+this.background + ";" : "";
            }
        },
        data(){
            return {
                delay:"",
                uiShow:this.show || false
            }
        },
        mixins:[transition("y_overload",{hideTimeout:500,showTimeout:500})],
        props:{
            background:String,
            enterDelay:Number,
            leaveDelay:Number,
            show:Boolean,
            zIndex:{
                default:"100"
            }
        },
        methods:{
            fnClick(a){
                this.$emit("click");
            }
        },
        watch:{
            show(){
                this.uiShow = this.show;
            },
            uiShow(){
                this.$emit("update:show",this.uiShow)
            }
        },
        created(){
            this.$on("beforeEnter",()=>{
                this.delay="transition-delay:"+this.enterDelay/1000 + "s;";
            })
            this.$on("afterEnter",()=>{
                this.delay="";
            })
            this.$on("beforeLeave",()=>{
                this.delay="transition-delay:"+this.leaveDelay/1000 + "s;";
            })
            this.$on("afterLeave",()=>{
                this.delay="";
            })
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    .y_overload{
        position: fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        &.show{
            display: block;

        }
        &.transition_show{
            opacity: 1;
        }

        &.y_overload_enter,&.y_overload_leave_to{
            opacity:0;
        }
        &.y_overload_enter_active,&.y_overload_leave_active{
            transition:all .3s;
        }
    }

    .y_overload_bg{
        position: fixed;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background:$mask_color;
    }
</style>
