<template>
    <div class="vux-loginload">
        <div class="weui-mask_transparent" v-show="isShowMask && show"></div>
        <transition :name="currentTransition">
            <div class="weui-loginload" :class="loginLoadClass" v-show="show">
                <i class="weui-icon_loginload"></i>
                <p class="weui-loginload__content" :style="style" v-html="text">
                    <slot></slot>
                </p>
            </div>
        </transition>
    </div>
</template>

<script>

export default {
    name:'mu-loginload',
    props: {
        value: Boolean,
        type: {
            type: String,
            default: 'success'
        },
        transition: String,
        isShowMask: {
            type: Boolean,
            default: true
        },
        text: String,
        position: String
    },
    data () {
        return {
             show: false
        }
    },
    created () {
        if(this.value) {
            this.show = true
        }
    },
    methods:{
        fixSafariOverflowScrolling(type) {
             if(!this.$overflowScrollingList.length) return
             for(let i = 0; i < this.$overflowScrollingList.length; i++) {
                 this.$overflowScrollingList[i].style.webkitOverflowScrolling = type
             }
        }
    },
    mounted:function(){
        this.$overflowScrollingList = document.querySelectorAll('.vux-fix-safari-overflow-scrolling')
    },
    computed: {
        currentTransition () {
            if(this.transition) {
                return this.transition
             }
             if(this.position === 'top') {
                return 'vux-slide-from-top'
             }
             if(this.position === 'bottom') {
                return 'vux-slide-from-bottom'
             }
             return 'vux-fade';
        },
        loginLoadClass() {
            return {
                'vux-loginload-top': this.position === 'top',
                'vux-loginload-bottom': this.position === 'bottom',
                'vux-loginload-middle': this.position === 'middle'
            }
        }
    },
    watch: {
        show(val) {
           if(val) {
               this.$emit('input', true)
               this.$emit('on-show')
               this.fixSafariOverflowScrolling('auto')
               clearTimeout(this.timeout)
            }
         },
        value (val) {
            this.show = val
        }
     }
}
</script>

<style lang="less">
.weui-loginload.vux-loginload-middle {
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
}
.vux-slide-from-top-enter, .vux-slide-from-top-leave-active {
     opacity: 0;
     transform: translateX(-50%) translateY(-100%)!important;
}
.vux-slide-from-bottom-enter, .vux-slide-from-bottom-leave-active {
     opacity: 0;
     transform: translateX(-50%) translateY(100%)!important;
}
.vux-slide-from-top-enter-active,
.vux-slide-from-top-leave-active,
.vux-slide-from-bottom-enter-active,
.vux-slide-from-bottom-leave-active {
     transition: all 400ms cubic-bezier(.36,.66,.04,1);
}
.weui-mask_transparent {
    position: fixed;
    z-index: 1000;
    width:100%;
    height:100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.weui-loginload {
    position: fixed;
    z-index: 5000;
    top: 50%;
    left: 50%;
    margin-top:-67px;
    background: rgba(0, 0, 0, 0.56);
    text-align: center;
    border-radius: 10px;
    color: #fff;
    transform: translateX(-50%);
}

.weui-icon_loginload {
    width: 35px;
    height: 35px;
    margin-top: 32px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: loginLoading 1s steps(12, end) infinite;
    animation: loginLoading 1s steps(12, end) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%;
}
.weui-loginload.weui-loginload_forbidden {
    color: #F76260;
}
.weui-loginload.weui-loginload_forbidden .weui-loginload__content {
    margin-top: 10px;
}
.weui-loginload.weui-loginload_text{
    min-height: 0;
}
.weui-loginload_text .weui-loginload__content {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 15px;
}
.weui-loginload__content {
    color: #ffffff;
    font-size: 16px;
    position: relative;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
    margin: 9px 34px 32px 34px;
}

.weui-loading_loginload .weui-loginload__content {
    margin-top: 0;
}

@keyframes loginLoading {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
</style>
