<template>
    <span :class="bodyClassStr">
        <span :class="classStr"><span class="y_loading_point_a" v-if="topic =='point'"></span><span class="y_loading_point_b" v-if="topic =='point'"></span><span class="y_loading_point_c" v-if="topic =='point'"></span></span>
    </span>
</template>

<script>
    export default {
        name: "yLoading",
        computed: {
            classStr() {
                return "y_loading_box" + " "
                    + (this.topic == "common" ? "y_loading_normal" : "") + " "
                    + (this.topic == "car" ? "y_loading_car" : "") + " "
                    + (this.topic == "pet" ? "y_loading_pet" : "") + " "
                    + (this.size == "normal" ? "y_loading_size_normal" : "") + " "
                    + (this.size == "fill" ? "y_loading_size_fill" : "") + " "
                    + (this.size == "small" ? "y_loading_size_small" : "") + " "
                    + (this.color == "topic" ? "y_loading_color_topic" : "") + " "
                    + (this.color == "white" ? "y_loading_color_white" : "") + " "
                    + (this.topic == "point" ? "y_loading_point" : "") + " "
            },
            bodyClassStr(){
                return "y_loading "
                    + (this.topic == "icon" ? "y_loading_icon" : "") + " "
            }
        },
        props: {
            color:{
                default:"topic"
            },
            size: {
                default: "normal"
            },
            topic: {
                default: "common"
            },
        }
    }
</script>

<style lang="scss">
    @import "../css/base.scss";
    @import "../css/var.scss";

    @keyframes y_loading_rotate {
        from {
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }
        to {
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
    }

    @keyframes y_loading_point {
        0% {
            background: none;
        }
        3% {
            background: $color_topic_main;
        }
        33% {
            background: $color_topic_main;
        }
        56% {
            background: none;
        }
    }

    .y_loading {
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left:0;
        top:0;
    }

    .y_loading_point{
        text-align: center;
    }

    .y_loading_point_a,.y_loading_point_b,.y_loading_point_c{
        display: inline-block;
        border-radius:50%;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        box-sizing:border-box;
        border:1px solid $color_topic_main;
        animation: y_loading_point 2s infinite;

        &:last-child{
            margin-right: 0;
        }
    }

    .y_loading_point_b{
        animation-delay: .7s;
    }

    .y_loading_point_c{
        animation-delay: 1.4s;
    }


    .y_loading_point{
        .y_loading_point_a,.y_loading_point_b,.y_loading_point_c{
            //background: $color_topic_main;
        }
    }

    .y_loading_box {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
    }

    .y_loading_normal {
        animation: y_loading_rotate .8s linear infinite;

        &:after {
            font-family: "yesaway_ui";
            content: '\e602';
            color: $color_topic_main;
        }
    }

    .y_loading_icon{
        display: inline-block;
        animation: y_loading_rotate .8s linear infinite;
        position: relative;
        height: auto;
        width: auto;
        left:auto;
        top:auto;

        .y_loading_box {
            display: inline-block;
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            &:after {
                font-family: "yesaway_ui";
                content: '\e602';
                color: $color_topic_main;
            }
        }
    }

    .y_loading_car {
        background: url("http://img-cdn.yesaway.cn/idximg/loading@2x.gif") no-repeat center center;
        background-size: contain;
        margin: 0 auto;
    }

    .y_loading_pet {
        background: url("https://oss-prod.lookingpet.com/1158919970090093015.gif") no-repeat center center;
        background-size: contain;
        margin: 0 auto;
    }

    .y_loading_size_normal {
        width: 40px;
        height: 40px;

        &:after {
            line-height: 40px;
            text-align: center;
            font-size: 32px;
        }

        &.y_loading_car {
            width: 120px;
            height: 120px;
        }
        &.y_loading_pet{
            width: 120px;
            height: 120px;
            border-radius: 10px;
        }
    }

    .y_loading_size_fill {
        width: 40px;
        height: 40px;

        &:after {
            line-height: 40px;
            text-align: center;
            font-size: 32px;
        }

        &.y_loading_car {
            width: 100%;
            position: absolute;
            height: 100%;
        }
    }

    .y_loading_size_small {
        width: 20px;
        height: 20px;

        &:after {
            line-height: 20px;
            text-align: center;
            font-size: 18px;
        }
    }

    .y_loading_color_white{
        &.y_loading_box {
            &:after {
                color: #fff;
            }
        }
    }
</style>
