<template>
<Layout-Child>
  <div class="w-7/12 mx-auto">
    <div class="steps flex text-font-white relative">
      <div class="step-item flex flex-col content-center relative mr-5 items-center" v-for="(i,index) in mySteps" :key="i">
         <div class="cycle relative items-center bg-font-gray bg-opacity-20 rounded-full z-10">
            <div class=" center-child ">{{index+1}}</div>
         </div>
         <div class='text-sm mt-2'>
          {{i}}
         </div>
      </div>
    </div>

    <div @click="nextStep">click</div>
  </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data(){
    return{
      mySteps:['Step 1', 'Step 2', 'Step 3'],
      currentStep:1,
    }
  },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
  },
  methods:{
    nextStep(){
      if(this.currentStep<this.mySteps.length){
        this.currentStep++
        this.$emit('stepOnChange',this.currentStep)
      }else{
        this.$emit('stepOnFinished',true)
      } 
      console.log(this.currentStep);    
    }
  }
});
</script>
<style lang="less" scoped>
  .cycle{
    padding:25px;
    height:0px;
    width: 0px;
    margin: 0 auto;
  }
  .center-child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .steps{
    .step-item:after{
      content:'';
      width: 24px;
      height:5px;
      border-radius: 3px;
      background-color:#8899B3;
      position: absolute;
      top: 34%;
      left: 120%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }
  }
   .step-item:last-of-type::after{
      content:'';
      width: 0px;
      height:0px;
      border-radius: 3px;
      background-color:#8899B3;
      position: absolute;
      top: 38%;
      left: 110%;
      z-index: 1;
      transform: translate(-50%, -50%);
   }
  // .steps:last-child{
  //   .step-item:after{
  //     content:'';
  //     width: 0px;
  //     height:0px;
  //     border-radius: 3px;
  //     background-color:red;
  //     position: absolute;
  //     top: 38%;
  //     left: 110%;
  //     z-index: 1;
  //     transform: translate(-50%, -50%);
  //   }
  // }
</style>