<template>
  <div class="signal-intensity-view">
    <div class="box">
      <span class="wifi-icon strength-no strength-3">
        <span v-for="idx in list" :key="idx" :style="signalIntensity(idx) ? 'background: #07eb58': ''"></span>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "SignalIntensity",
  props: {
    intensityNumber: {
      type: [String,Number],
      default: '0'
    }
  },
  data() {
    return {
      list: 5
    }
  },
  methods: {
    signalIntensity(idx){
      return Number(this.intensityNumber) ? Number(this.intensityNumber) >= idx : false
		}
  }
};
</script>
<style lang="scss">
.signal-intensity-view {
  width: 23px;
  align-content: baseline;
  align-items: flex-end;
  display: flex;
  height: 21px;
  .box {
    width: 100%;
    > span {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.5);
      height: 15px;

      >span {
        width: 3px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.5);
      }
      span:nth-child(1) {
        height: 20%;
        left: 0px;
      }
      span:nth-child(2) {
        height: 40%;
        left: 10px;
      }
      span:nth-child(3) {
        height: 60%;
        left: 20px;
      }
      span:nth-child(4) {
        height: 80%;
        left: 30px;
      }
      span:nth-child(5) {
        height: 100%;
        left: 40px;
      }
    }
  }
}
</style>
