<template>
  <div class="steps flex">
    <div class="step flex" v-for="(item, index) in bCList" :key="item.status">
      <div :class="'cricle' + ' ' + (status >= item.status? 'speed-bg-color' : '')">
        <span class="num">{{index+1}}</span>
      </div>
      <div
        :class="'step_title' + ' ' + (status >= item.status ? 'speed-text-color' : '')"
      >
        {{item.name}}
      </div>
      <div>
        <img src="../assets/img/signUp/left.png" alt="" v-if="item.status<4"/>
      </div>
    </div>
    <!-- 1 -->
    <!--    <div class="step flex">-->
    <!--      <div :class="'cricle' + ' ' + (status >= 0? 'speed-bg-color' : '')">-->
    <!--        <span class="num">1</span>-->
    <!--      </div>-->
    <!--      <div-->
    <!--        :class="'step_title' + ' ' + (status >= 0 ? 'speed-text-color' : '')"-->
    <!--      >-->
    <!--        确认报名须知-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <img src="../assets/img/signUp/left.png" alt=""/>-->
    <!--      </div>-->
    <!--    </div>-->
    <!-- 2 -->
    <!--    <div class="step flex">-->
    <!--      <div-->
    <!--        class="cricle cc"-->
    <!--        :class="'cricle' + ' ' + (status >= 1 ? 'speed-bg-color' : '')"-->
    <!--      >-->
    <!--        <span class="num">2</span>-->
    <!--      </div>-->
    <!--      <div-->
    <!--        :class="'step_title' + ' ' + (status >= 1? 'speed-text-color' : '')"-->
    <!--      >-->
    <!--        填写邀请码-->
    <!--      </div>-->
    <!--      <img src="../assets/img/signUp/left.png" alt=""/>-->
    <!--    </div>-->
    <!-- 3 -->
    <!--    <div class="step flex">-->
    <!--      <div-->
    <!--        class="cricle cc"-->
    <!--        :class="'cricle' + ' ' + (status >=2 ? 'speed-bg-color' : '')"-->
    <!--      >-->
    <!--        <span class="num">3</span>-->
    <!--      </div>-->
    <!--      <div-->
    <!--        :class="'step_title' + ' ' + (status >=2 ? 'speed-text-color' : '')"-->
    <!--      >-->
    <!--        填写报名资料-->
    <!--      </div>-->
    <!--      <img src="../assets/img/signUp/left.png" alt=""/>-->
    <!--    </div>-->
    <!-- 4 -->
    <!--    <div class="step flex">-->
    <!--      <div-->
    <!--        class="cricle cc"-->
    <!--        :class="'cricle' + ' ' + (status >=3 ? 'speed-bg-color' : '')"-->
    <!--      >-->
    <!--        <span class="num">4</span>-->
    <!--      </div>-->
    <!--      <div :class="'step_title' + ' ' + (status >=3? 'speed-text-color' : '')">-->
    <!--        报名资料审核-->
    <!--      </div>-->
    <!--      <img src="../assets/img/signUp/left.png" alt=""/>-->
    <!--    </div>-->
    <!-- 5 -->
    <!--    <div class="step flex">-->
    <!--      <div-->
    <!--        class="cricle cc"-->
    <!--        :class="'cricle' + ' ' + (status >= 4 ? 'speed-bg-color' : '')"-->
    <!--      >-->
    <!--        <span class="num">5</span>-->
    <!--      </div>-->
    <!--      <div :class="'step_title' + ' ' + (status >= 4 ? 'speed-text-color' : '')">-->
    <!--        缴费-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: "breadcrumb",
    props: {statusNum: [String, Number]}, //进度参数
    data() {
      return {
        status: this.statusNum,
        bCList: []
      };
    },
    created() {
      const doubt_code = window.localStorage.getItem("doubt_code");
      const doubt_info = window.localStorage.getItem("doubt_info");
      const doubt_check = window.localStorage.getItem("doubt_check");
      const newArr = [
        {
          name: '确认报名须知',
          status: 0
        },
        {
          name: '填写邀请码',
          status: 1
        },
        {
          name: '填写报名资料',
          status: 2
        },
        {
          name: '报名资料审核',
          status: 3
        },
        {
          name: '缴费',
          status: 4
        }
      ];
      newArr.forEach((item, index, array) => {
        if(doubt_code == 0 && item.status == 1){
          array.splice(item, 1);
        }
        if(doubt_info == 0 && item.status == 2){
          array.splice(item, 1);
        }
        if(doubt_check == 0 && item.status == 3){
          array.splice(item, 1);
        }
      })
      this.bCList = newArr;
    },
    watch: {
      statusNum(val) {
        console.log(val)
        this.status = val;
      },
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .flex {
    display: flex;
  }

  .speed-bg-color {
    background-color: var(--color) !important;
  }

  .speed-text-color {
    color: var(--color) !important;
  }

  .steps {
    .step {
      align-items: center;
    }

    .num {
      color: #ffff;
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .cricle {
      position: relative;
      width: 57px;
      height: 29px;

      background: #d0ced0;
      border-radius: 41px;
      margin-right: 10px;
    }

    img {
      margin: 15px;
    }

    .step_title {
      font-size: 14px;
      width: 100%;
      height: 20px;
      font-weight: 600;
      color: #d0ced0;
    }
  }
</style>
