<template>
  <vab-card :body-style="{ height: '300px' }" class="chart-card">
    <template #header>
      <div class="card-header">
        <span class="title">
          <vab-icon icon="flashlight-line" class="mr-5" />
          水电能耗监测
        </span>
        <el-tag size="small" type="warning" effect="plain">今日TOP5</el-tag>
      </div>
    </template>
    <vab-chart :option="option" />
  </vab-card>
</template>

<script setup>
import { reactive } from 'vue'
import { graphic } from 'echarts/core'

const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  grid: {
    top: '5%',
    left: '2%',
    right: '4%',
    bottom: '0%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['一号书院', '二号书院', '三号书院', '四号书院', '五号书院'],
    axisTick: { alignWithLabel: true },
  },
  yAxis: {
    type: 'value',
    splitLine: { show: false },
  },
  series: [
    {
      name: '用电量(kWh)',
      type: 'bar',
      barWidth: '40%',
      data: [320, 280, 250, 220, 190],
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f6d365' },
          { offset: 1, color: '#fda085' },
        ]),
      },
    },
  ],
})
</script>

<style lang="scss" scoped>
.chart-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .mr-5 { margin-right: 8px; }
  }
}
</style>