<!-- 飞控中心电池-->
<template>
  <div class="cpt-observe-mspace-dashboard-battery" v-if="isShow">
    <div class="battery-inner" v-for="(item,index) in _batteryList" :key="index">
      <div class="dec mr9 f12">{{index+1}}</div>
      <div class="size-wrap">
        <div class="size-box">
          <div class="size-inner">
            <div class="dianchigai"></div>
            <div
              v-if="item.statusType !==3"
              class="size-inner-box"
              :style="`height: ${item.chargeRemaining || 100}%; ${setColor(item.chargeRemaining || 100)}`"
            ></div>
          </div>
        </div>
        <span v-if="item.statusType === 3" class="size__text">{{"已关机"}}</span>
        <span v-else class="size__text">{{item.chargeRemaining || 100}}%</span>
      </div>

      <div style="marin-left: 12px">
        <div class="voltage-box">
          <div class="voltage-value f12 ml10 jcsb">
            {{ item.voltage === -1 ? '-' : Number(item.voltage).toFixed(0) }}
            <span class="cf ml2">v</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 电池列表
    batteryList: {
      type: Array,
      default: () => [
        /* {
          id: -1, // 电池id,0普通电池,52左智能电池，53右智能电池
          active: 0, // 电池激活类型（鹰巢无人机，这个参数才生效）
          chargeRemaining: -1, // 电池中的剩余能量百分比
          current: 0, // 电池的实时电流消耗（A）。负值表示电池正在放电，正值表示正在充电
          cycleIndex: -1, // 充电循环次数
          fullChargeCapacity: -1, // 电池完全充电时存储在电池中的总电量 100%
          lowVoltWarnValue: -1, // 低电压报警阈值（V）
          temperature: -1, // 电池温度(℃)
          voltage: -1, // 返回当前电池电压（V）
          statusType: 3, // 电池状态 0无效值，1开机，2充电中，3关机
        }, */
      ],
    },
  },
  data() {
    return {
      isShow: true,
    };
  },
  computed: {
    _batteryList() {
      console.log('电池信息', this.batteryList)
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      })
      if (this.batteryList.length > 0) {
        return this.batteryList;
      } else {
        return [
          {
            statusType: 3, // 电池状态 0无效值，1开机，2充电中，3关机
            chargeRemaining: -1, // 电池中的剩余能量百分比
            voltage: -1, // 返回当前电池电压（V）
          },
        ];
      }
    },
  },

  mounted() {},
  methods: {
    setColor(size) {
      if (size > 95) {
        return "background-color: #76c230";
      } else if (size > 30) {
        return " background: linear-gradient(to top,yellow,green);";
      } else {
        return "background-color: #f73939";
      }
    },
    setClass(index, num) {
      let str = "";
      if (num > 1 && index == 0) {
        str = str + " " + "top-10 ";
      } else if (num == 1 && index == 0) {
        str = str + " " + "top7";
      }
      if (num > 1 && index == 1) {
        str = str + " " + "top20 ";
      }
      return str;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.cpt-observe-mspace-dashboard-battery {
  width: 110px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;

  .battery-inner {
    display: flex;
    align-items: center;
    position: relative;

    .dec {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      text-align: center;
      line-height: 18px;
      color: #fff;
      border: 1px solid #50abff;
      background: #080c41;
      margin-right: 9px;
      font-size: 12px;
    }
    /* &::before {
      width: 1px;
      height: 90px;
      content: " ";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      background-image: linear-gradient(
        206deg,
        rgba(36, 146, 252, 0) 5%,
        #2492fc 56%,
        rgba(36, 146, 252, 0) 100%
      );
      transform: translateY(-50%);
    } */
    .voltage-box {
      width: 100%;
      box-sizing: border-box;

      .voltage-value {
        font-size: 14px;
        color: #93d755;
        font-weight: 400;
        margin-top: 3px;
        display: flex;
        font-size: 12px;
      }

      .voltage-unit {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #b3bbc5;
        letter-spacing: 0;
        font-weight: 400;
      }
    }

    .status-wrap {
      .status-box {
        width: 36px;
        height: 16px;
      }
    }

    .size-wrap {
      width: 55px;
      height: 25px;
      flex-shrink: 0;
      position: relative;

      .size-box {
        transform: rotate(90deg) translate(-25px, -15px);
        box-sizing: border-box;
        width: 25px;
        height: 60px;

        .size-inner {
          margin-top: 8px;
          width: 100%;
          height: calc(100%);
          border: 1px solid #50abff;
          box-sizing: border-box;
          // border-radius: 4px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 2px;
          position: relative;
          .dianchigai {
            position: absolute;
            left: 2px;
            top: 2px;
            width: 89%;
            height: calc(100% - 3px);
            // border: 1px solid red;
            background-image: linear-gradient(
              to right,
              #fff -14%,
              transparent 41%
            );
            // border-radius: 3px;
          }
          &::before {
            content: " ";
            display: block;
            position: absolute;
            top: -5px;
            left: 50%;
            width: 10px;
            height: 4px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #50abff;
            border-bottom: 0px;
            transform: translateX(-50%);
          }

          .size-inner-box {
            width: 100%;
            // border-radius: 4px;
          }
        }
      }
      .size__text {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translate(0%, -50%);
        font-size: 12px;
        color: #fff;
        white-space: nowrap;
      }
    }
  }
}
.batteryI {
  display: flex;
  align-items: center;
}

.battery-size {
  position: absolute;
  left: 43px;
  top: 28px;
  font-size: 12px;
  color: #fff;
}
</style>