<template>
    <div :class="{y_popup:1,y_popup_full:type=='full',y_popup_round: isRound,y_popup_disOverload:disOverload}">
        <y-overload v-if="!disOverload" :show="uiShow" @click="fnClick" :leave-delay="200" :z-index="zIndex+1"></y-overload>
        <div class="y_popup_disOverload_mask" @click="fnClick" :style="'z-index:'+(zIndex+1) + ';'" v-else-if="swfShow"></div>
        <div :class="'y_popup_main ' + swfClass" :style="styleStr" v-if="swfShow"
             @touchmove.stop.prevent="fnTouchMove"
             @transitionend="fnTransitionend"
             @webkitTransitionend="fnTransitionend">
            <div class="y_popup_header" v-if="(title || !disableBtnClose || isSlotTitle) && type != 'full'">
                <div class="y_popup_title" v-if="isSlotTitle">
                    <slot name="title"></slot>
                </div>
                <div class="y_popup_title" v-else-if="title">{{title}}</div>
                <div class="y_popup_close" v-if="!disableBtnClose" @click="uiShow = false"></div>
            </div>
            <div v-if="type=='full' && !disableBtnClose" class="y_popup_close" @click="uiShow = false"></div>
            <slot></slot>
        </div>
    </div>
</template>

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

    export default {
        name: "yPopup",
        components:{
            yOverload,
            yTransition
        },
        computed:{
            isDisableClickOver(){
                return this.disableClickOverload;
            },
            isSlotTitle(){
                return this.$slots && !!this.$slots.title
            },
            styleStr(){
                return (this.background ? "background:"+ this.background + ";" : "") +
                    (this.bottom ? "bottom:"+this.bottom+";" : "") +
                    (this.zIndex ? "z-index:"+ this.plus(this.zIndex,1)  +";" : "");
            }
        },
        data(){
            return {
                "uiShow":this.show
            }
        },
        methods:{
            plus:(a,b)=>a+b,
            fntest(){

            },
            fnTouchMove(e){
                e && e.preventDefault && e.preventDefault();
                return true;
            },
            fnClick(){
                if(!this.isDisableClickOver){
                    this.uiShow = false;
                }
            }
        },
        mixins:[transition("y_popup")],
        props:{
            background:"",
            bottom:"",
            disableClickOverload:Boolean,
            disableBtnClose:Boolean,
            disOverload:Boolean,
            isRound:Boolean,
            show:Boolean,
            title:"",
            type:{
                default:""
            },
            zIndex:{
                default:100
            },
        },
        watch:{
            show(){
                this.uiShow = this.show;
            },
            uiShow(){
                this.$emit("update:show",this.uiShow)
            }
        },
        created(){
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    .y_popup{
        .y_popup_enter,.y_popup_leave_to{
            transform:translate(0,100%);

        }
        
        .y_popup_disOverload_mask{
            position: fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
        }
        
      

        .y_popup_enter_active{
            transition:all .3s ease .3s;
        }
        .y_popup_leave_active{
            transition:all .3s;
        }

        &.y_popup_disOverload{
            
            .y_popup_enter_active{
                transition:all .3s;
            }
        }


        &.y_popup_round{
            .y_popup_main{
                border-radius: $border_radius $border_radius 0 0;
            }
        }
        &.y_popup_full{
            position: relative;
            .y_popup_close{
                line-height: 1;
                position: absolute;
                right:18px;
                top: 20px;
            }
        }
        .y_popup_main{
            min-height: 100px;
            width: 100%;
            background: $color_bg_default;
            position: fixed;
            bottom:0;
            left:0;
        }
        .y_popup_header{
            display: flex;
            box-sizing:border-box;
            padding: $popup_padding_top $popup_padding_horizantal 0;
        }
        .y_popup_title{
            display: block;
            flex: 1;
            text-align: left;
            font-size: $font_size_t4;
            color:$font_color_title;
        }
        .y_popup_close{
            text-align: center;
            &:before{
                font-family: yesaway_ui;
                content:'\e605';
                display: inline-block;
                height: 24px;
                width: 24px;
                line-height: 24px;
            }
        }

    }
</style>
