<template>
    <div class="steps flex text-font-white  justify-center relative">
      <div class="step-item flex flex-col  content-center relative mr-10 items-center" v-for="(i,index) in data" :key="index"
      :class="currentStep < index+1?'step-item':' step-item-actived'"
      >
         <div class="cycle relative items-center  rounded-full z-10" :class="currentStep < index+1?'bg-font-gray bg-opacity-20':' bg-font-blue bg-opacity-80'">
            <div class="center-child" v-if="currentStep < index+1">{{index+1}}</div>
            <div class="center-child" v-else-if="currentStep=== index+1">{{index+1}}</div>
            <div class="center-child" v-else>
                 <app-icon name='icon-comfirm'></app-icon>
            </div>
         </div>
         <div class='text-sm mt-2' :class="currentStep < index+1?'text-font-gray bg-opacity-20':' text-font-blue bg-opacity-80'">
          {{i.text}}
         </div>
      </div>
    </div>
</template>

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

export default Vue.extend({
  props: {
      data:{
        type:Array,
        required:true
      },
      currentStep:{
        type:Number,
        required:true
      }
  },
  data(){
      return{
          status:['finished','onprocess','undo']
      }
  },
  components:{
           'app-icon':()=>import('@/components/common/Icon.vue')
  },
  watch:{
      currentStep(newV){
          console.log(newV,this.data.length);
          if(newV<=this.data.length){
              this.$emit('stepOnChange',this.data[this.currentStep-1] )
          }else{
               this.$emit('stepOnFinished',true)
          }
      }
  },
  computed:{

  }
});
</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:last-of-type {
      margin-right: 0;
    }
    .step-item:after{
      content:'';
      width: 24px;
      height:2px;
      border-radius: 3px;
      background-color:#8899B3;
      position: absolute;
      top: 34%;
      left: 116%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }
    .step-item:before{
      content:'';
      width: 22px;
      height:2px;
      border-radius: 3px;
      background-color:#8899B3;
      position: absolute;
      top: 34%;
      right: 75%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }
    .step-item-actived::before{
      content:'';
      width: 22px;
      height:2px;
      border-radius: 3px;
      background-color:#0078FF;
      position: absolute;
      top: 34%;
      right: 75%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }

    .step-item-actived::after{
      content:'';
      width: 24px;
      height:2px;
      border-radius: 3px;
      background-color:#0078FF;
      position: absolute;
      top: 34%;
      left: 116%;
      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%);
   }
  .step-item:first-of-type::before{
      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>