<template>
  <div class="status-bar" :class="{ 'dark-mode': theme === 'dark' }" :style="{ 'background-color': bgColor }">
    <span class="time">{{ time }}</span>
    <span class="status-icons">
      <img class="signal" :src="`/src/public/status/signal-${theme === 'dark' ? 'dark-' + signal : signal}.png`"
        alt="" />
      <img class="wifi" :src="`/src/public/status/wifi-${theme === 'dark' ? 'dark-' + wifi : wifi}.png`" alt="" />
      <div class="battery">
        <div class="power" :class="{ 'full-power': battery >= 100 }"
          :style="{ 'background-color': isCharging ? '#2DC752' : 'var(--battery-bg)', width: battery + '%' }">
        </div>
        <div class="percent">
          <span class="battery-text" :style="{ 'color': isCharging ? '#ffffff' : 'var(--battery-color)' }">
            {{ battery }}</span>
          <img v-if="isCharging" class="charging" src="/src/public/status/charging.png" alt="" />
        </div>
      </div>
      <img style="width: 1px;height: 4px;margin-left: 1px;" src="/src/public/status/battery.png" alt="" />
    </span>
  </div>
</template>

<script setup>
defineProps({
  time: {
    type: String,
    default: '12:00'
  },
  battery: {
    type: [String, Number],
    default: 60
  },
  signal: {
    type: [String, Number],
    default: 4
  },
  wifi: {
    type: [String, Number],
    default: 3
  },
  isCharging: {
    type: Boolean,
    default: true
  },
  theme: {
    type: String,
    default: 'light'
  },
  bgColor: {
    type: String,
    default: 'transparent'
  }
})
</script>

<style lang="scss" scoped>
.status-bar {
  height: 50px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 20px 31px 16px 44px;
  color: var(--wx-icon-color);
  background: transparent;
  flex-shrink: 0;
  z-index: 10;

  .time {
    font-weight: 500;
    font-size: 17px;
    color: var(--wx-text-primary);
    line-height: 14px;
  }

  .status-icons {
    font-size: 11px;
    display: flex;
    align-items: center;
    color: var(--wx-icon-color);

    .signal {
      width: 20px;
      height: 12px;
    }

    .wifi {
      width: 17px;
      height: 12px;
      margin-left: 6px;
    }

    .battery {
      position: relative;
      width: 24px;
      height: 13px;
      background: #A7A7A7;
      border-radius: 4px 4px 4px 4px;
      font-weight: 700;
      font-size: 11px;
      color: #FFFFFF;
      line-height: 11px;
      margin-left: 6px;
      text-align: center;

      .power {
        height: 100%;
        display: block;
        border-radius: 4px 0 0 4px;

        &.full-power {
          border-radius: 4px;
        }
      }

      .percent {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        .battery-text {
          display: inline-block;
          font-weight: 700;
          font-size: 11px;
          color: #FFFFFF;
          margin-top: -1px;
        }

        .charging {
          display: inline-block;
          width: 7px;
          height: 9px;
          // margin-top: 1px;
        }
      }
    }
  }
}
</style>
