<template>
    <div :class="classStr">
        <div class="y_stepItem_point"></div>
        <div class="y_stepItem_line"></div>
        <div class="y_stepItem_main">
            <div class="y_stepItem_title" v-if="title">{{title}}</div>
            <div class="y_stepItem_desc" v-if="desc">{{desc}}</div>
        </div>
    </div>
</template>

<script>
    import findParent from "./mixins/findParent";
    const parentName = "ySteps";
    export default {
        name: "yStepItem",
        computed:{
            classStr(){
                let ret = "y_stepItem ";
                return ret + ("y_stepItem_step" + this.status) +
                    (this.ySteps && this.ySteps.swf ? " y_stepItem_swf" :"") +
                    (this.isFirst ? " y_stepItem_first" : "") +
                    (this.isLast ? " y_stepItem_last" : "")
            }
        },
        data(){
            return {
                status:0,
                isFirst:false,
                isLast:false
            }
        },
        inject:["ySteps"],
        mixins: [findParent(parentName)],
        props:{
            title:String,
            desc:String
        }
    }
</script>

<style lang="scss">
    @import "../css/base.scss";
    @import "../css/var.scss";
    @keyframes y_steps_point
    {
        0% {
            box-shadow: 0 0 0 0px rgba(57,198,219,.5);
        }
        75% {
            box-shadow: 0 0 0 2.5px rgba(57,198,219,.5);
        }
        100% {
            box-shadow: 0 0 0 2.5px rgba(57,198,219,.5);
        }
    }
    @-webkit-keyframes y_steps_point
    {
        0% {
            box-shadow: 0 0 0 0px rgba(57,198,219,.5);
        }
        75% {
            box-shadow: 0 0 0 2.5px rgba(57,198,219,.5);
        }
        100% {
            box-shadow: 0 0 0 2.5px rgba(57,198,219,.5);
        }
    }
    .y_stepItem{
        position: relative;
        flex:2;
        &.y_stepItem_swf{
            &.y_stepItem_step1 {
                .y_stepItem_point {
                    &:before {
                        animation: y_steps_point 1s infinite;
                    }
                }
            }
        }
    }
    .y_stepItem_point{
        display: block;
        line-height: 1;
        position: relative;
        z-index: 3;
        height: 20px;
        text-align: center;
        &:before{
            content:" ";
            display: inline-block;
            background: #fff;
            border-radius: 50px;
            width: 5px;
            height: 5px;
            vertical-align: top;
            margin-top:7.5px;
        }
    }
    .y_stepItem_line{
        height: 10px;
        top:0;
        left:50%;
        display: block;
        width: 100%;
        position: absolute;
        z-index: 2;
        border-bottom:1px solid #fff;
    }
    .y_stepItem_main{
        margin-top: 3px;
        color:#fff;
        font-size: $font_size_t5;
        text-align: center;
    }
    .y_stepItem_step0{
        .y_stepItem_point{

            &:before{
                background: #c0c4cc;
            }
        }
        .y_stepItem_main{
            color:#c0c4cc;
        }
    }
    .y_stepItem_step1{
        .y_stepItem_point{
            &:before{
                background: $color_topic_secondary;
                width: 8px;
                height: 8px;
                margin-top: 6px;
                box-shadow: 0 0 0 2.5px rgba(57,198,219,.5);
            }
        }
        .y_stepItem_main{
            color:$color_topic_secondary;
        }


    }

    .y_stepItem_step2{
        .y_stepItem_point{

            &:before{
                background: $color_topic_secondary;
            }
        }
        .y_stepItem_line{
            border-color: $color_topic_secondary;
        }
        .y_stepItem_main{
            color:#fff;
        }
    }
    .y_stepItem{
        &.y_stepItem_first{
            flex:1;
            .y_stepItem_point{
                text-align: left;
            }
            .y_stepItem_line{
                left:0;
                width: 200%;
            }
            .y_stepItem_main{
                text-align: left;
            }
        }
        &.y_stepItem_last{
            flex:1;
            .y_stepItem_point{
                text-align: right;
            }
            .y_stepItem_line{
                width: 0;
            }
            .y_stepItem_main{
                clear: both;
                text-align: right;
            }
        }
    }
</style>
