<template>
  <div class="power-usage">
    <div class="usage-cards">
      <div class="usage-card">
        <div class="card-icon">
          <div class="icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#00d4aa"/>
            </svg>
          </div>
        </div>
        <div class="card-content">
          <div class="card-title">总用电量</div>
          <div class="card-value">{{ totalPowerUsage.value }}<span class="unit">{{ totalPowerUsage.unit }}</span></div>
        </div>
      </div>

      <div class="usage-card">
        <div class="card-icon">
          <div class="icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#00d4aa"/>
            </svg>
          </div>
        </div>
        <div class="card-content">
          <div class="card-title">单位电耗</div>
          <div class="card-value">{{ unitPowerConsumption.value }}<span class="unit">{{ unitPowerConsumption.unit }}</span></div>
        </div>
      </div>

      <div class="usage-card">
        <div class="card-icon">
          <div class="icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#00d4aa"/>
            </svg>
          </div>
        </div>
        <div class="card-content">
          <div class="card-title">峰谷时段电量占比</div>
          <div class="card-value">{{ peakValleyRatio.value }}<span class="unit">{{ peakValleyRatio.unit }}</span></div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: peakValleyRatio.value + '%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PowerUsage',
  data() {
    return {
      totalPowerUsage: {
        value: '32,984',
        unit: 'kWh'
      },
      unitPowerConsumption: {
        value: '2.42',
        unit: 'mkWh/t'
      },
      peakValleyRatio: {
        value: '40',
        unit: '%'
      }
    }
  }
}
</script>

<style scoped>
.power-usage {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usage-cards {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.usage-card {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  background: rgba(0, 212, 170, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 212, 170, 0.3);
}

.card-content {
  flex: 1;
}

.card-title {
  color: #60f2ff;
  font-family: 'DingTalk JinBuTi';
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 8px;
}

.card-value {
  color: #ffffff;
  font-family: 'DingTalk JinBuTi';
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.unit {
  color: #60f2ff;
  font-size: 14px;
  font-weight: 400;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(96, 242, 255, 0.2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4aa 0%, #60f2ff 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}
</style>
