<template>
    <div :class="classStr">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "ySteps",
        computed: {
            classStr() {
                return "y_steps " +
                    //(this.swf ? "y_steps_swf" : "") +
                    (this.customClass ? this.customClass : "")
            }
        },
        data(){
            return {
                dataStep:this.step
            }
        },
        methods:{
            fnStep(){
                const self = this;
                if(self.$children && self.$children.forEach && self.$children.length>0){
                    self.$children.forEach((item,index)=>{
                        if(!item)return;
                        if(index<this.dataStep){
                            item.status = 2;
                        }
                        if(index==this.dataStep){
                            item.status = 1;
                        }
                        if(index>this.dataStep){
                            item.status = 0;
                        }
                        if(index == 0){
                            item.isFirst = true;
                        }
                        else{
                            item.isFirst = false;
                        }
                        if(index == self.$children.length - 1){
                            item.isLast = true;
                        }
                        else{
                            item.isLast = false;
                        }
                    })
                }
                let count = 0;
                for(let n in this._childrens["yStepItem"]){
                    if(n == 0)
                    if(count<this.dataStep){
                        self._childrens["yStepItem"][n].status = 2;
                    }
                    if(count==this.dataStep){
                        self._childrens["yStepItem"][n].status = 1;
                    }
                    if(count>this.dataStep){
                        self._childrens["yStepItem"][n].status = 0;
                    }
                    count++;
                }
            }
        },
        model:{
            prop:"step",
            event:"update:step"
        },
        props:{
            customClass:String,
            swf:Boolean,
            step:{
                default:0,
                type:Number,
            }
        },
        provide(){
            return {
                ySteps:this
            }
        },
        watch:{
            step(){
                this.dataStep = this.step
            },
            dataStep(){
                this.fnStep();
                this.$emit("update:step",this.dataStep)
            }
        },
        mounted() {
            this.fnStep();
        }
    }
</script>

<style lang="scss">
    @import "../css/base.scss";
    @import "../css/var.scss";
    .y_steps{
        display: flex;
        background: $color_topic_gradient;
        padding: 10px;
        .y_stepItem,y-step-item,component{
            flex: 2;
            &:first-child{
                flex: 1;
            }
            &:last-child{
                flex: 1;
            }
        }
    }
</style>
