<template>
  <div class="steps flex">
    <!-- 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,
    };
  },
  created() {},
  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>