<template>
  <div class="bin-bottom">
    <div class="bin-carbg">
      <img src="../assets/car1x.png" class="car">
      <div v-if="BatteryOnCar" class="battery-yellow" :class="yellowBattery">
        <div class="battery-yellow-img">
          <img src="../assets/yellow.png">
        </div>
        <div class="battery-yellow-text">
          <p>SOC</p>
          <p>{{ BatteryOnCar }}%</p>
        </div>
      </div>
    </div>
    <div class="bin-battery">
      <div v-for="(item, index) in storeInfoList" :key="index" class="battery-list">
        <div v-if="Carconnection(index)" class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]">
          <template v-if="step >= 3 && swapCode === index">
            <p v-show="swapSoc">SOC  {{ swapSoc }}%</p>
            <p v-show="swapCurrent">{{ swapCurrent }} A</p>
          </template>
          <template v-else>
            <p v-show="item.soc">SOC  {{ item.soc }}%</p>
            <p v-show="item.current">{{ item.current }} A</p>
          </template>
        </div>
        <div v-if="swapCode === index" class="battery-defaultcls defaultbg">
          <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc }}%</p>
          <p v-show="item.current && yellowBattery.yellowshow">{{ item.current }} A</p>
        </div>
        <div class="battery-liststatus">
          <img v-show="item.chargerInfoVo.chgState === 0" src="../assets/status0.png">
          <img v-show="item.chargerInfoVo.chgState === 1" src="../assets/status1.png">
          <img v-show="item.chargerInfoVo.chgState === 2" src="../assets/status2.png">
          <img v-show="item.chargerInfoVo.chgState === 3" src="../assets/status3.png">
        </div>
      </div>

    </div>
    <div class="battery-num">
      <img v-for="(index) in 8" :key="index" src="../assets/nostatus.png">
    </div>
  </div>
</template>

<script>
/*
    * @step：动画步骤
    * @BatteryOnCar：控制车上亏电电池是否亮起
    * @storeInfoList：充电仓电池列表
    * @swapCode：换电电池编号
    * @connectionState：车站连接状态 1已连接 0断开连接
    * @swapCurrent：绿电池缓存电流,
    * @swapSoc：绿电池缓存SOC,
*/
export default {
  props: ['BatteryOnCar', 'storeInfoList', 'swapCode', 'connectionState', 'swapCurrent', 'swapSoc', 'step'],
  data() {
    return {

    }
  },
  computed: {
    // 设置黄电池动画
    yellowBattery: {
      get() {
        const cls = {}
        if (this.step === 0 || this.step === 1) {
          cls['onestepPotion'] = true
        } else if (this.step === 2) {
          cls['onestepPotion'] = true
          cls['yellowAnimationOne'] = true
        } else if (this.step === 3) {
          cls['twostepPotion'] = true
        } else if (this.step === 4) {
          cls['twostepPotion'] = true
          if (this.swapCode === 1) {
            cls['yellowAnimationSwapone'] = true
          } else if (this.swapCode === 2) {
            cls['SwaptwoPotion'] = true
            cls['yellowAnimationSwaptwo'] = true
          } else if (this.swapCode === 0) {
            cls['SwapZeroPotion'] = true
            cls['yellowAnimationSwapZero'] = true
          } else if (this.swapCode === 4) {
            cls['SwapthreePotion'] = true
            cls['yellowAnimationSwapthree'] = true
          } else if (this.swapCode === 5) {
            cls['SwapfourPotion'] = true
            cls['yellowAnimationSwapfour'] = true
          } else if (this.swapCode === 6) {
            cls['SwapfivePotion'] = true
            cls['yellowAnimationSwapfive'] = true
          } else if (this.swapCode === 7) {
            cls['SwapsixPotion'] = true
            cls['yellowAnimationSwapsix'] = true
          }
        }
        return cls
      },
      set(val) {
        return val
      }
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    // 设置车辆断开状态
    Carconnection(index) {
      if (this.swapCode === index && this.connectionState === 0 && this.step >= 3) {
        return false
      } else {
        return true
      }
    },
    // 设置换电电池背景
    setBatteryBg(index) {
      if (this.swapCode === index && this.step !== 5) {
        return 'lightbg'
      } else {
        return 'defaultbg'
      }
    },
    // 设置绿电池动画
    greenBattery(index) {
      const cls = {}
      if (this.step === 3 && this.swapCode === index) {
        if (this.swapCode === 1) {
          cls['greenAnimationOne'] = true
        } else if (this.swapCode === 2) {
          cls['greenAnimationTwo'] = true
        } else if (this.swapCode === 0) {
          cls['greenAnimationZero'] = true
        } else if (this.swapCode === 4) {
          cls['greenAnimationThree'] = true
        } else if (this.swapCode === 5) {
          cls['greenAnimationFour'] = true
        } else if (this.swapCode === 6) {
          cls['greenAnimationFive'] = true
        } else if (this.swapCode === 7) {
          cls['greenAnimationSix'] = true
        }
      }
      if (this.step === 4 && this.swapCode === index) {
        if (this.swapCode === 1) {
          cls['greenStepOnePotion'] = true
        } else if (this.swapCode === 2) {
          cls['greenStepTwoPotion'] = true
        } else if (this.swapCode === 0) {
          cls['greenStepZeroPotion'] = true
        } else if (this.swapCode === 4) {
          cls['greenStepThreePotion'] = true
        } else if (this.swapCode === 5) {
          cls['greenStepFourPotion'] = true
        } else if (this.swapCode === 6) {
          cls['greenStepFivePotion'] = true
        } else if (this.swapCode === 7) {
          cls['greenStepSixPotion'] = true
        }
      }
      return cls
    }
  }
}
</script>

<style lang="scss" scoped>
.yellowshow{
  visibility: hidden;
}
.battery-defaultcls {
  width: 73px;
  height: 36px;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.defaultbg{
  background-image: url("../assets/statusbg.png");
  background-size: 100% 100%;
  color: #73cb95;
}
.yellowbg{
  background-image: url("../assets/yellow.png");
  background-size: 100% 100%;
  color: #f6bb47;
}
.lightbg{
  background-image: url("../assets/lightbg.png");
  background-size: 100% 100%;
  color: #233C39;
  position: absolute;
  z-index:99999
}
.yellowAnimationOne{
  animation: yellowOnestep 2s linear forwards
}
@keyframes yellowOnestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(119px, 28px);
    }
}
.greenAnimationZero{
  animation: greenZerostep 2s linear forwards
}
@keyframes greenZerostep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 110px);
    }
}
.greenAnimationOne{
  animation: greenOnestep 2s linear forwards
}
@keyframes greenOnestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 63px);
    }
}
.greenAnimationTwo{
  animation: greenTwostep 2s linear forwards
}
@keyframes greenTwostep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 18px);
    }
}
.greenAnimationThree{
  animation: greenThreestep 2s linear forwards
}
@keyframes greenThreestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -74.5px);
    }
}
.greenAnimationFour{
  animation: greenFourstep 2s linear forwards
}
@keyframes greenFourstep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -121px);
    }
}
.greenAnimationFive{
  animation: greenFivestep 2s linear forwards
}
@keyframes greenFivestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -166px);
    }
}
.greenAnimationSix{
  animation: greenSixstep 4s linear forwards
}
@keyframes greenSixstep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -212px);
    }
}
.greenStepZeroPotion{
  left:-117px;
  top:110px;
}
.greenStepOnePotion{
  left:-117px;
  top:63px;
}
.greenStepTwoPotion{
  left:-117px;
  top:18px;
}
.greenStepThreePotion{
  left:-117px;
  top:-74.5px;
}
.greenStepFourPotion{
  left:-117px;
  top:-121px;
}
.greenStepFivePotion{
  left:-117px;
  top:-166px;
}
.greenStepSixPotion{
  left:-117px;
  top:-212px;
}
.onestepPotion{
  top: 114px;
  left: 27%;
}
.twostepPotion{
  top:142px;
  left:158px
}
.threestepPotion{
  top:52px;
  left:158px
}
.yellowAnimationSwapone{
  animation: yellowThreestep 2s linear forwards
}
@keyframes yellowThreestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(0, -92.5px);
    }
}
.yellowAnimationSwaptwo{
  transition: top 2s;
}
.yellowAnimationSwapthree{
  transition: top 2s;
}
.yellowAnimationSwapfour{
  transition: top 2s;
}
.yellowAnimationSwapfive{
  transition: top 4s;
}
.yellowAnimationSwapsix{
  transition: top 5s;
}
.SwaptwoPotion{
  top:96px
}
.SwapthreePotion{
  top:188px
}
.SwapfourPotion{
  top:233px
}
.SwapfivePotion{
  top:279px
}
.SwapsixPotion{
  top:325px
}
.yellowAnimationSwapZero{
  transition: top 4s;
}
.SwapZeroPotion{
  top:4px
}
.bin-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
}

.bin-carbg {
  width: 38%;
  position: relative;
  padding-top: 5px;
}

.bin-carbg .car {
  position: absolute;
  width: 137px;
  height: 362px;
  left: 5%;
}

.bin-carbg .battery-yellow {
  position: relative;
  width: 73px;
  z-index: 9999;
}

.battery-yellow .battery-yellow-img {
  width: 73px;
  position: absolute;
}

.battery-yellow .battery-yellow-text {
  width: 73px;
  display: flex;
  position: absolute;
  z-index: 99;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #f6bb47;
  padding-left: 3px;
}

.battery-yellow-text p {
  padding-left: 6px;
}
.bin-battery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding-left: 10px;
  flex: 1;

  .battery-list {
    width: 98%;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    padding-left: 2%;
  }

  .battery-list .battery-listbg {
    width: 73px;
    height: 36px;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
  }

  .battery-listbg p:first-child,.battery-defaultcls p:first-child {
    margin-top: 4px;
  }

  .battery-listbg p,.battery-defaultcls p {
    margin: 0;
    padding:0 3px;
    margin-top: 2px;
    text-align: right;
  }

  .battery-list .battery-lightbg {
    width: 73px;
    height: 36px;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    z-index: 999;
    position: absolute;
  }

  .battery-list .battery-liststatus {
    width: 25px;
    height: 31px;
    margin-top: 3px;
    margin-left: 5px;
  }
}
.battery-num {
  width: 101px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.battery-num img {
  width: 101px;
  height: 35px;
}
</style>
