<template>
  <div>
    <!-- :class=`secondSign1${v}` -->
    
    <div class="sd_progress">
      <div class="bottonBar"></div>
      <!-- 第一个 -->
      <div v-for="(v, index) in block" :key="index">
       
        <span
          :class="'sign_' + (index + 1)"
          :style="newDynamicSignStyle(index)"
          v-show="Currentstep == index + 1"
          @click="tableShow('2')"
        ></span>
        <span
          :class="'NoYet_' + (index + 1)"
          v-show="Currentstep < index + 1"
          :style="newDynamicSignStyle(index)"
        ></span>
        <span
          :class="'Current_' + (index + 1)"
          :style="newDynamicSignStyle(index)"
          v-show=" Currentstep > index + 1"
          @click="tableShow('2')"
        ></span>

        <span
          :class="[
          'StepName_' + (index + 1),
            {
              weightFont: step >= index + 1 || Currentstep >= index + 1,
              blurColor: Currentstep == index + 1,
            },
            
          ]"
          :style="newDynamicSignStyle(index)"
          >{{ v.name }}</span
        >
        <!-- <span
          class="secondStepName weightFont"
          v-show="step >= 2 || Currentstep >= 2"
          >招聘任务分配</span
        >
        <span
          class="secondStepName weightFont blurColor"
          v-show="Currentstep == 2"
          >招聘任务分配</span
        > -->
        <span
          :class="['stagebBar_' + (index + 1),{'stagebBarChild_1':true}]"
          :style="newDynamicSignStyle(index)"
          v-show="Currentstep > (index+1)"
        ></span>
        <span :class="'stagebBar_'+(index + 1)" v-show="Currentstep == (index+1)" :style="newDynamicSignStyle(index)">
          <span
            :class="'stagebBarChild_'+ (index + 1)"
            
            :style="
              'display:inline-block;float:left;height: 100%;width:' +
              stepPercent
            "
          >
            <span class="currentRateRelative"
              ><span class="currentRate" v-show="(index+1) == Currentstep">{{
                stepPercent
              }}</span></span
            >
          </span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SwSubnavigation",
  componentName: 'SwSubnavigation',
  props: {
    block: {
      type: Array,
      default: 4,
    },
    Currentstep: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      a: this.num1 ? this.num1 : 0,
      b: this.num2 ? this.num2 : 0,
      sum: 0,

      num1: 4,
      num2: 5,
      sumFromChild: 0,
      step: 2,
      loading: true,
      stepPercent: "60%",
      leaveuser: "shanchunyan",
    };
  },
  computed: {
    newDynamicSignStyle() {
      return function (index) {
        let value = (index / this.block.length) * 100;
        console.log(value, "看看value的值");
        return `left:${value}%;`;
      };
    },
  },
  mounted() {
    console.log(this.block, "看看block的值");
    let ClassName = document.getElementsByClassName("sd_progress")[0].children;

    console.log(ClassName, "看看类名");

    this.sumFunc();
  },
  methods: {
    sumFunc() {
      let a = Number(this.a);
      let b = Number(this.b);
      if (isNaN(a) || isNaN(b)) {
        return;
      } else {
        this.sum = a + b;
        this.$emit("getSumFromChild", this.sum);
      }
    },
    // 动态样式
    // 动态css 的值
    // dynamicStyle(){
    //   // sign
    //    for(let i=0;i++,i<this.block){

    //    }
    // }
  },
};
</script>
<style >
/* .sd_progress{
  padding: 8px 8px;
} */
.bottonBar {
    margin: 15px 0px;
    height: 15px;
    width: 100%;
    background-image: linear-gradient(#F7F7F7, #D9D9D9);
    position: relative;
    border-radius: 7.5px;
}

[class*="sign_"] {
  position: absolute;
  top: 5px;
  left: 0px;
  display: inline-block;
  width: 35px;
  height: 35px;
  transform: translate(-50%);
  background-image: url("../../../assets/人头.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 100;
}
/* [NoYet_] */
[class*="NoYet_"] {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0%;
  width: 30px;
  height: 30px;
  transform: translate(-50%);
  background-image: url("../../../assets/编组 15.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1000;
}
/* Current_ */
[class*="Current_"] {
  position: absolute;
  top: 5px;
  left: 16.7%;
  width: 35px;
  height: 35px;
  transform: translate(-50%);
  background-image: url("../../../assets/编组 17.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 100;
}
/* StepName */
[class*="StepName_"] {
  position: absolute;
  top: 45px;
  left: 0%;
  height: 15px;
  transform: translate(-50%);
  color: #283447;
}
[class*="stagebBar_"]{
  position: absolute;
  top: 15px;
  left: 0%;
  height: 15px;
  width: 25%;
  border-radius: 7.5px;
}

/* stagebBarChild_1 */
[class*="stagebBarChild_"]{
  border-radius: 7.5px;
  background-image: linear-gradient(#3FC4FF, #5582FF, #3FC4FF);
  box-shadow: 0px 3px 10px 0px rgba(92, 140, 186, 0.5);
}

.weightFont {
  font-weight: 700;
}
.blurColor {
      color: #1677FF;
    }
.secondSign {
  background-image: url("../../../assets/编组 16.png");
}

.secondNoYet {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0%;
  width: 30px;
  height: 30px;
  transform: translate(-50%);
  background-image: url("../../../assets/编组 15.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1000;
}

.secondCurrent {
  position: absolute;
  top: 5px;
  left: 16.7%;
  width: 35px;
  height: 35px;
  transform: translate(-50%);
  background-image: url("../../../assets/编组 17.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 100;
}
.secondStepName {
  position: absolute;
  top: 45px;
  left: 0%;
  height: 15px;
  transform: translate(-50%);
  color: #283447;
}

.secondStepName {
  left: 25%;
}
.secondstagebBar,
.firstagebBarChild {
  position: absolute;
  top: 15px;
  left: 0%;
  height: 15px;
  width: 25%;
  border-radius: 7.5px;
}
.secondStepName {
  position: absolute;
  top: 45px;
  left: 0%;
  height: 15px;
  transform: translate(-50%);
  color: #283447;
}
.currentRateRelative {
  color: white;
  float: right;
  position: relative;
}
.secondstagebBarChild:hover .currentRate {
  z-index: 1200;
}
.secondstagebBarChild {
  border-radius: 7.5px;
  background-image: linear-gradient(#3fc4ff, #5582ff, #3fc4ff);
  box-shadow: 0px 3px 10px 0px rgba(92, 140, 186, 0.5);
}
</style>