<template>
    <div :class="'y_popupMiddle ' + swfClass"
         v-if="swfShow"
         @touchmove.stop.prevent="e=>e && e.preventDefault && e.preventDefault()"
         @transitionend="fnTransitionend"
         @webkitTransitionend="fnTransitionend"
         @click="fnMask"
         :style="{zIndex:zIndex}">
        <div class="y_popupMiddle_main"
             :style="styleStr"
             @click.stop=""
             @transitionend.stop=""
             @webkitTransitionend.stop="">
            <slot></slot>
            <div class="y_popupMiddle_main_close"
                 v-if="!disClose"
                 hover-class="hover"
                 @click.stop="fnClose"></div>
        </div>
    </div>
</template>

<script>
    import transition from "../mixins/transition";
    export default {
        name: "yPopupMiddle",
        data(){
            return {
                uiShow:this.show,
            }
        },
        methods:{
            fnClose(){
                this.uiShow = false;
            },
            fnMask(){
                if(!this.disAutoHide){
                    this.fnClose();
                }
            }
        },
        props:{
            disAutoHide:Boolean,
            disClose:Boolean,
            show:Boolean,
            styleStr:"",
            zIndex:{
                default:100
            },
        },
        mixins:[transition("y_popupMiddle")],
        watch:{
            show(){
                this.uiShow = this.show;
            },
            uiShow(){
                this.$emit("update:show",this.uiShow)
            }
        },
    }
</script>

<style lang="scss">
    @import "../../css/var.scss";
    @import "../../css/function/layer.mixin.scss";

    .y_popupMiddle{
        @include mask();
        background: $popupMiddle_mask_color;
        @include vertical();


        &.y_popupMiddle_enter,&.y_popupMiddle_leave_to{
            background: rgba(000,000,000,0);
            .y_popupMiddle_main{
                transform: translateY(-20px);
                opacity: 0;
            }

        }
        &.y_popupMiddle_enter_active{
            transition:all $popupMiddle_swf_time;
            .y_popupMiddle_main{

                transition: all $popupMiddle_swf_time ease-in-out $popupMiddle_swf_time_pre;
            }
        }
        &.y_popupMiddle_leave_active{
            transition:all $popupMiddle_swf_time ease-in-out $popupMiddle_swf_time_pre;
            .y_popupMiddle_main{
                transition: all $popupMiddle_swf_time;
            }
        }

    }
    .y_popupMiddle_main{
        align-self: center;
    }
    .y_popupMiddle_main_close{
        color: #fff;
        width: $popupMiddle_close_size;
        height: $popupMiddle_close_size;
        margin: 33px auto 0 auto;
        border-radius: 13px;
        border: 1px solid #fff;
        display: flex;
        line-height: 1;
        justify-content: center;
        flex-direction: column;
        transition: all .2s;

        &:after {
            font-family: yesaway_ui;
            content:'\e605';
            font-size: $popupMiddle_close_size - 10px;
            align-self: center;
        }

        &:active, &.hover {
            transform: scale(1.2);
            opacity: .8;
        }
    }
</style>