<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:bolt" />
        </span>
        <span>能耗周趋势</span>
      </div>
      <span class="tag">本周能耗对比</span>
    </div>
    <div class="card-body">
      <div id="chart-energy" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import { useChart, colors, style } from '../utils'

const { init } = useChart('chart-energy')

const energyDays = ['周一','周二','周三','周四','周五','周六','周日']
const energyUse = [520, 540, 580, 610, 640, 590, 560]
const energyStd = [500, 520, 540, 560, 580, 560, 540]

onMounted(() => {
  const chart = init()
  if (!chart) return

  chart.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    legend: { top: 0, right: 0, textStyle: style.legendText },
    grid: { top: '20%', left: '6%', right: '6%', bottom: '10%', containLabel: true },
    xAxis: { type: 'category', data: energyDays, axisLine: style.axisLine, axisLabel: style.axisLabel },
    yAxis: { type: 'value', axisLine: { show: false }, axisLabel: style.axisLabel, splitLine: style.splitLine },
    series: [
      {
        name: '实际能耗(kWh)',
        type: 'bar',
        barWidth: 16,
        itemStyle: {
          borderRadius: [4,4,0,0],
          color: new echarts.graphic.LinearGradient(0,0,0,1,[
            { offset: 0, color: colors.danger },
            { offset: 1, color: 'rgba(239,68,68,0.10)' }
          ])
        },
        data: energyUse
      },
      {
        name: '基准能耗(kWh)',
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: { width: 2, color: colors.green },
        data: energyStd
      }
    ]
  })
})
</script>

<style scoped>
.card {
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
  border-radius: 10px;
  border: 1px solid rgba(30,64,175,0.85);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,1),
    inset 0 0 0 1px rgba(56,189,248,0.05);
  padding: 10px 10px 10px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(56,189,248,0.75);
  opacity: 0.6;
  pointer-events: none;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-left: none;
  border-top: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag {
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  border: 1px solid rgba(148,163,184,0.4);
  color: #94a3b8;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

@media (max-width: 1600px) {
  .chart { min-height: 160px; }
}
</style>
