<template>
    <div :class="classstr"
         :style="styleStr"
         @transitionend="fnTransitionend"
         @webkitTransitionend="fnTransitionend"
         v-if="uiShow || isHidden">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "yTransition",
        computed:{
            classstr(){
                let addClass = "";
                const step1 = this.name+this.symbol+"enter";
                const step2 = this.name+this.symbol+"enter"+this.symbol + "active";
                const step3 = this.name+this.symbol+"enter"+this.symbol + "to";
                const step4 = this.name+this.symbol+"leave";
                const step5 = this.name+this.symbol+"leave"+this.symbol + "active";
                const step6 = this.name+this.symbol+"leave"+this.symbol + "to";
                switch (this.status) {
                    case 1:
                        addClass = step1;
                        break;
                    case 2:
                        addClass = step1 + " " + step2
                        break;
                    case 3:
                        addClass = step2 + " " + step3
                        break;
                    case 4:
                    case 0:
                        addClass = "";
                        break;
                    case 5:
                        addClass = step4;
                        break;
                    case 6:
                        addClass = step4 + " " + step5
                        break;
                    case 7:
                        addClass = step5 + " " + step6
                        break;
                }
                return "y_transition " + (this.customClass || "") + " " + addClass;
            },
            styleStr(){
                return (this.customStyle ? this.customStyle :"") + (this.isHidden ? (this.uiShow ?"":"display:none;") : "");
            },
            uiShow(){
                return this.status>=1;
            }
        },
        data(){
            return {
                status:0,
                symbol:"_",
            }
        },
        props:{
            customClass:"", //默认样式
            customStyle:"", //默认CSS,
            hideTimeout:{
                default:0
            },
            //动画名称
            name:{
                default:"v"
            },
            isHidden:Boolean,
            show:Boolean, //是否显示
            showTimeout:{
                default:0
            },
        },
        watch:{
            show(){
                if(this.show){
                    this.fnEnter();
                }
                else{
                    this.fnLeave();
                }
            }
        },
        methods:{
            nextTick(){
                return new Promise((reject)=>{
                    setTimeout(reject,1000/30)
                })
            },
            fnEnter(){
                const self = this;
                if(this.status<6){
                    self.status = 1;
                }
                self.$emit("beforeEnter");
                Promise.resolve()
                    .then(self.nextTick)
                    .then(()=>{
                        //console.log("beforeEnter");
                        self.status = 2;
                        self.$emit("enter");
                        return self.nextTick;
                    })
                    .then(self.nextTick)
                    .then(()=>{
                        self.status = 3;
                        if(self.showTimeout >0){
                            setTimeout(self.fnTransitionend,self.showTimeout)
                        }
                    })
            },
            fnLeave(){
                const self = this;
                if(self.status === 0  || self.status > 4){
                    self.status = 5;
                }
                self.$emit("beforeLeave");
                Promise.resolve()
                    .then(self.nextTick)
                    .then(()=>{
                        //console.log("beforeEnter");
                        self.status = 6;
                        self.$emit("leave");
                        return self.nextTick;
                    })
                    .then(()=>{
                        self.status = 7;
                        if(self.hideTimeout >0){
                            setTimeout(self.fnTransitionend,self.hideTimeout)
                        }
                    })
            },
            fnTransitionend(e){
                //console.log(e);
                const self = this;
                if(self.status == 3){
                    self.status = 4;
                    self.$emit("afterEnter");
                }
                if(self.status == 7){
                    self.status = 0;
                    self.$emit("afterLeave");
                }
            },
        },
        mounted(){
            if(this.show){
                this.status = 4;
            }
        }
    }
</script>

<style lang="scss">
</style>
