<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import VChart from 'vue-echarts';
import dayjs from 'dayjs';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';

import SvgIcon from '@/components/SvgIcon.vue';
import TimeRangeSelect from '@/components/TimeRangeSelect.vue';
import { useRequest } from '@/hooks/request';
import { useViewVisible } from '@/hooks/view-visible';
import { t } from '@/i18n';
import { downloadElectricityHisData, getElectricityDataStatistics } from '@/api';
import { downloadBlob, formatTimeByScale, getEChartsColors, timeSorter } from '@/utils';
import { TimeScaleType } from '@/constants';
import type { IconfontIcon } from '@/icons/fonts/iconfont';

import cumulativeElectricityBill from '@/assets/img/cumulative-electricity-bill.png';
import cumulativeElectricityConsumption from '@/assets/img/cumulative-electricity-consumption.png';
import electricityDailyConsumption from '@/assets/img/electricity-daily-consumption.png';
import electricitySequentialGrowth from '@/assets/img/electricity-sequential-growth.png';

import { DeviceType } from '../device-work-status/device-card';

import type { SegmentedBaseOption } from 'ant-design-vue/es/segmented/src/segmented';
import type { Dayjs } from 'dayjs';
import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
import type {
  DatasetComponentOption,
  GridComponentOption,
  LegendComponentOption,
  TitleComponentOption,
  TooltipComponentOption,
} from 'echarts/components';
import type { ComposeOption } from 'echarts/core';
import type { DevGroupTabCompProps, ElectricityStatisticsResult, EnergyCardItem, RangeValue } from '@/types';

type StatisticsValue = 'electricityConsumption' | 'electricityCost';

interface StatisticsTypeItem extends SegmentedBaseOption {
  value: StatisticsValue;
  payload: {
    title: string;
    icon: IconfontIcon;
  };
}

interface EquipmentData {
  key: string;
  name: string;
  type: string;
  electricity: number;
  cost: number;
  dailyElectricity: number;
  ratio: number;
  children?: EquipmentData[];
}

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  DatasetComponent,
  LegendComponent,
  TitleComponent,
]);

type EChartsOption = ComposeOption<
  | TitleComponentOption
  | LegendComponentOption
  | TooltipComponentOption
  | DatasetComponentOption
  | GridComponentOption
  | BarSeriesOption
  | LineSeriesOption
  | PieSeriesOption
>;

const props = defineProps<DevGroupTabCompProps>();

const deviceTypes = [DeviceType.冷水主机, DeviceType.冷却塔, DeviceType.冷却泵, DeviceType.冷冻泵];

const { isLoading, handleRequest } = useRequest();
const energyConsumeResult = ref<ElectricityStatisticsResult>();
let consumeTimeRange: Dayjs[] = [];

const handleConsumeTimeChange = (range: RangeValue) => {
  consumeTimeRange = range;
  getEnergyConsumeResult();
};

const getEnergyConsumeResult = () => {
  handleRequest(async () => {
    energyConsumeResult.value = await getElectricityDataStatistics({
      deviceGroupId: props.deviceGroupId,
      deviceTypes,
      startTime: consumeTimeRange[0].format('YYYY-MM-DD HH:mm:ss'),
      endTime: consumeTimeRange[1].format('YYYY-MM-DD HH:mm:ss'),
    });

    energyConsumeResult.value.groupQueryVos.forEach((item) => {
      item.groupName = item.deviceTypeName + t('common.group');
    });

    energyConsumeResult.value.hisQueryVos.forEach((item) => {
      item.groupName = item.deviceTypeName + t('common.group');
    });
  });
};

const energyCardList = computed<EnergyCardItem[]>(() => {
  return [
    {
      value: energyConsumeResult.value?.cumulativeEnergy ?? '-',
      unit: t('energyAnalysis.tenThousandKwh'),
      description: t('energyAnalysis.cumulativeElectricityConsumption'),
      icon: cumulativeElectricityConsumption,
      bgColor: '#FFF6E6',
    },
    {
      value: energyConsumeResult.value?.cumulativeBill ?? '-',
      unit: t('energyAnalysis.tenThousandYuan'),
      description: t('energyAnalysis.cumulativeElectricityCost'),
      icon: cumulativeElectricityBill,
      bgColor: '#EFF1FE',
    },
    {
      value: energyConsumeResult.value?.ringGrowth ?? '-',
      unit: '%',
      description: t('energyAnalysis.electricityConsumptionGrowthRate'),
      icon: electricitySequentialGrowth,
      bgColor: 'var(--antd-color-primary-opacity-15)',
    },
    {
      value: energyConsumeResult.value?.cumulativeDailyUse ?? '-',
      unit: t('energyAnalysis.tenThousandKwh'),
      description: t('energyAnalysis.averageDailyElectricityConsumption'),
      icon: electricityDailyConsumption,
      bgColor: 'rgba(104, 194, 58, 0.12)',
    },
  ];
});

const statisticsTypes = computed<StatisticsTypeItem[]>(() => {
  return [
    {
      value: 'electricityConsumption',
      payload: {
        title: t('energyAnalysis.electricityConsumption'),
        icon: 'electricity-quantity',
      },
    },
    {
      value: 'electricityCost',
      payload: {
        title: t('energyAnalysis.electricityCost'),
        icon: 'electricity-bill',
      },
    },
  ];
});

const currentStatisticsType = ref<StatisticsValue>('electricityConsumption');

const isElectricityConsume = computed(() => {
  return currentStatisticsType.value === 'electricityConsumption';
});

const pieOption = computed<EChartsOption>(() => {
  const centerValue = isElectricityConsume.value
    ? energyConsumeResult.value?.cumulativeEnergy
    : energyConsumeResult.value?.cumulativeBill;
  const unitText = isElectricityConsume.value
    ? t('energyAnalysis.tenThousandKwh')
    : t('energyAnalysis.tenThousandYuan');
  const legendData = energyConsumeResult.value?.groupQueryVos.map((item) => item.groupName as string) || [];
  const seriesData = energyConsumeResult.value?.groupQueryVos.map((item) => ({
    name: item.groupName as string,
    value: isElectricityConsume.value ? item.totalEnergyW : item.totalBillW,
  }));

  return {
    tooltip: {
      trigger: 'item',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      formatter(params: any) {
        return `${params.marker}${params.name}: ${params.value}${unitText}`;
      },
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      textStyle: {
        color: '#000',
        fontSize: 12,
      },
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 24,
      data: legendData,
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '65%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'outside',
          formatter: '{d}%',
        },
        labelLine: {
          show: true,
        },
        data: seriesData,
        center: ['50%', '50%'],
      },
      {
        type: 'pie',
        radius: ['0', '30%'],
        itemStyle: {
          color: 'transparent',
        },
        tooltip: {
          show: false,
        },
        label: {
          position: 'center',
          formatter: `{value|${centerValue ?? '-'}}\n{title|${unitText}}`,
          rich: {
            value: {
              fontSize: 30,
              fontWeight: 'bold',
              color: '#000',
              lineHeight: 36,
            },
            title: {
              fontSize: 14,
              color: '#666',
              lineHeight: 22,
            },
          },
        },
        data: [{ value: 1, name: '' }],
      },
    ],
    color: getEChartsColors(legendData.length),
  };
});

const lineOption = computed<EChartsOption>(() => {
  const unitText = isElectricityConsume.value ? 'kWh' : t('energyAnalysis.yuan');
  const tooltipTitle = isElectricityConsume.value
    ? t('energyAnalysis.totalElectricityConsumption')
    : t('energyAnalysis.totalElectricityCost');
  const timeScaleType = energyConsumeResult.value?.timeScaleType;
  const hisQueryVos = energyConsumeResult.value?.hisQueryVos || [];
  const deviceTypes = hisQueryVos.map((item) => item.groupName as string) || [];
  const dataset = {
    source: [['time', ...deviceTypes]],
  };

  const timeSet = new Set<string>();

  hisQueryVos.forEach((item) => {
    item.valueList.forEach((valueItem) => {
      timeSet.add(valueItem.time);
    });
  });

  const times = Array.from(timeSet).sort(timeSorter);

  times.forEach((time) => {
    const row: Array<string | number> = [time];

    deviceTypes.forEach((deviceType) => {
      const deviceData = hisQueryVos.find((item) => item.groupName === deviceType);
      const valueItem = deviceData?.valueList.find((item) => item.time === time);
      const currentValue = isElectricityConsume.value ? valueItem?.energy : valueItem?.bill;
      row.push(currentValue ?? '-');
    });

    dataset.source.push(row as string[]);
  });

  return {
    title: {
      text: `${t('common.unit')}: ${unitText}`,
      textStyle: {
        color: '#999',
        fontSize: 10,
        fontWeight: 400,
        lineHeight: 14,
      },
      left: '7%',
      top: '9%',
    },
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const tempParms = params as any[];
        let time = formatTimeByScale(tempParms[0].axisValue, timeScaleType);

        if (timeScaleType === TimeScaleType.Hour) {
          time += ` - ${time.split(':')[0]}:59`; // 若时间尺度为小时，则显示为 01:00 - 01:59
        }

        let totalValue = 0;

        tempParms.forEach((param) => {
          totalValue += param.value[param.encode.y[0]];
        });

        let tableHtml = '<table class="echarts-tooltip-electricity">';
        tableHtml += `<tr><th>${time}</th></tr>`;
        tableHtml += `<tr><td>${tooltipTitle}</td><td>${totalValue}${unitText}</td><td>100.00%</td></tr>`;

        tempParms.forEach((param) => {
          const value = param.value[param.encode.y[0]];
          const percent = ((value / totalValue) * 100).toFixed(2) + '%';
          tableHtml += `<tr><td>${param.marker}${param.seriesName}</td><td>${value}${unitText}</td><td>${percent}</td></tr>`;
        });

        tableHtml += '</table>';
        return tableHtml;
      },
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      textStyle: {
        color: '#000',
        fontSize: 12,
      },
      itemWidth: 22,
      itemHeight: 8,
      itemGap: 24,
      data: deviceTypes,
    },
    dataset,
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#EBEBEB',
        },
      },
      axisLabel: {
        color: '#999',
        fontSize: 10,
        formatter(value) {
          return formatTimeByScale(value, timeScaleType);
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#999',
        fontSize: 10,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#EBEBEB',
        },
      },
    },
    series: deviceTypes.map((type) => ({
      name: type,
      type: 'line',
      stack: 'Total',
      areaStyle: {
        opacity: 0.3,
      },
      symbolSize: 6,
      encode: {
        x: 'time',
        y: type,
      },
    })),
    grid: {
      left: '4%',
      right: 0,
      bottom: 46,
      top: '17.5%',
      containLabel: true,
    },
    color: getEChartsColors(deviceTypes.length),
  };
});

const deviceAndGroups = computed<EquipmentData[]>(() => {
  const groupQueryVos = energyConsumeResult.value?.groupQueryVos || [];

  return groupQueryVos.map((item) => ({
    key: item.deviceType,
    name: item.groupName as string,
    type: item.deviceTypeName,
    electricity: item.totalEnergy,
    cost: item.totalBill,
    dailyElectricity: item.totalDailyUse,
    ratio: item.totalRatio,
    children: item.valueList?.map((child) => ({
      key: child.deviceId.toString(),
      name: child.deviceName,
      type: item.deviceTypeName,
      electricity: child.energy,
      cost: child.bill,
      dailyElectricity: child.dailyUse,
      ratio: child.ratio,
    })),
  }));
});

const exportData = async () => {
  const fileName = t('energyAnalysis.energyConsumptionAnalysis') + ' - ' + dayjs().format('YYYYMMDDHHmmss');
  const file = await downloadElectricityHisData({
    deviceGroupId: props.deviceGroupId,
    deviceTypes,
    startTime: consumeTimeRange[0].format('YYYY-MM-DD HH:mm:ss'),
    endTime: consumeTimeRange[1].format('YYYY-MM-DD HH:mm:ss'),
  });

  downloadBlob(file, fileName);
};

const { isLoading: isDevElectricLoading, handleRequest: handleDevElectricRequest } = useRequest();
const { visible, showView } = useViewVisible();
const selectedDevice = ref<EquipmentData>();
const devEnergyConsumeResult = ref<ElectricityStatisticsResult>();
let devElectricTimeRange: Dayjs[] = [];

const handleDevElectricTimeChange = (range: RangeValue) => {
  devElectricTimeRange = range;
  getDevElectricityData();
};

watch(visible, () => {
  if (!visible.value) {
    devEnergyConsumeResult.value = undefined;
  }
});

const viewDevElectricityData = (record: EquipmentData) => {
  selectedDevice.value = record;
  showView();
};

const getDevElectricityData = () => {
  handleDevElectricRequest(async () => {
    devEnergyConsumeResult.value = await getElectricityDataStatistics({
      deviceGroupId: props.deviceGroupId,
      deviceId: selectedDevice.value?.key,
      startTime: devElectricTimeRange[0].format('YYYY-MM-DD HH:mm:ss'),
      endTime: devElectricTimeRange[1].format('YYYY-MM-DD HH:mm:ss'),
    });
  });
};

const devElectricityOption = computed<EChartsOption>(() => {
  const timeScaleType = devEnergyConsumeResult.value?.timeScaleType;
  const hisQueryVos = devEnergyConsumeResult.value?.hisQueryVos[0]?.valueList || [];
  const energy: number[] = [];
  const bill: number[] = [];

  const allTimesSet = new Set<string>();

  hisQueryVos.forEach((item) => {
    allTimesSet.add(item.time);
    energy.push(item.energy);
    bill.push(item.bill);
  });

  const times = Array.from(allTimesSet).sort(timeSorter);

  // 计算 Y 轴的分割段数
  const yAxisSegments = 5;
  const energyMax = Math.ceil(Math.max(...energy) / yAxisSegments) * (yAxisSegments + 1);
  const billMax = Math.ceil(Math.max(...bill) / yAxisSegments) * (yAxisSegments + 1);

  return {
    title: [
      {
        text: `${t('common.unit')}(kWh)`,
        textStyle: {
          color: '#999',
          fontSize: 12,
          fontWeight: 400,
          lineHeight: 17,
        },
        left: '6%',
        top: 0,
      },
      {
        text: `${t('common.unit')}(${t('energyAnalysis.yuan')})`,
        textStyle: {
          color: '#999',
          fontSize: 12,
          fontWeight: 400,
          lineHeight: 17,
        },
        right: '2%',
        top: 0,
      },
    ],
    tooltip: {
      trigger: 'axis',
      formatter(params) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const tempParms = params as any[];
        const time = formatTimeByScale(tempParms[0].axisValue, timeScaleType);

        let tableHtml = '<table class="echarts-tooltip-electricity">';
        tableHtml += `<tr><th>${time}</th></tr>`;

        tempParms.forEach((param) => {
          const { seriesName } = param;
          let unit = '';

          if (seriesName === t('energyAnalysis.electricityConsumption')) {
            unit = 'kWh';
          } else if (seriesName === t('energyAnalysis.electricityCost')) {
            unit = t('energyAnalysis.yuan');
          }

          tableHtml += `<tr><td>${param.marker}${param.seriesName}</td><td>${param.value ?? '-'}${unit}</td></tr>`;
        });

        tableHtml += '</table>';
        return tableHtml;
      },
    },
    legend: [
      {
        orient: 'horizontal',
        bottom: 0,
        left: 263,
        textStyle: {
          color: '#000',
          fontSize: 12,
        },
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 24,
        data: [t('energyAnalysis.electricityConsumption')],
      },
      {
        orient: 'horizontal',
        bottom: 0,
        left: 331,
        textStyle: {
          color: '#000',
          fontSize: 12,
        },
        itemWidth: 22,
        itemHeight: 8,
        itemGap: 24,
        data: [t('energyAnalysis.electricityCost')],
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#EBEBEB',
        },
      },
      axisLabel: {
        color: '#999',
        fontSize: 10,
        formatter(value) {
          return formatTimeByScale(value, timeScaleType);
        },
      },
      axisTick: {
        show: false,
      },
      data: times,
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        min: 0,
        max: energyMax,
        interval: energyMax / yAxisSegments,
        axisLabel: {
          color: '#999',
          fontSize: 10,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#EBEBEB',
          },
        },
      },
      {
        type: 'value',
        position: 'right',
        min: 0,
        max: billMax,
        interval: billMax / yAxisSegments,
        axisLabel: {
          color: '#999',
          fontSize: 10,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#EBEBEB',
          },
        },
      },
    ],
    series: [
      {
        name: t('energyAnalysis.electricityConsumption'),
        type: 'bar',
        data: energy,
        barWidth: 24,
      },
      {
        name: t('energyAnalysis.electricityCost'),
        type: 'line',
        yAxisIndex: 1,
        data: bill,
        symbolSize: 6,
      },
    ],
    grid: {
      left: '4%',
      right: 0,
      bottom: 38,
      top: 25,
      containLabel: true,
    },
    color: getEChartsColors(2),
  };
});
</script>

<template>
  <ASpin :spinning="isLoading">
    <ACard :title="$t('energyAnalysis.energyConsumptionAnalysis')" :bordered="false">
      <template #extra>
        <TimeRangeSelect @change="handleConsumeTimeChange" />
        <AButton class="export-button" @click="exportData">{{ $t('common.export') }}</AButton>
      </template>
      <ARow class="energy-card-list" :gutter="[24, 24]">
        <ACol v-for="(item, index) in energyCardList" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
          <div
            class="energy-card-container"
            :style="{
              backgroundColor: item.bgColor,
            }"
          >
            <img class="energy-card-icon" :src="item.icon" />
            <div>
              <div class="energy-card-title">
                <span class="energy-card-value">{{ item.value }}</span>
                <span class="energy-card-unit">{{ item.unit }}</span>
              </div>
              <div class="energy-card-description">{{ item.description }}</div>
            </div>
          </div>
        </ACol>
      </ARow>
      <ASegmented v-model:value="currentStatisticsType" :options="statisticsTypes">
        <template #label="{ payload }">
          <SvgIcon :name="payload.icon" />
          <span>{{ payload.title }}</span>
        </template>
      </ASegmented>
      <div class="chart-container">
        <div class="chart-wrapper chart-pie">
          <VChart class="chart" :option="pieOption" autoresize />
        </div>
        <div class="chart-wrapper chart-line">
          <VChart class="chart" :option="lineOption" autoresize />
        </div>
      </div>
      <ATable class="hvac-table hvac-table-tree" :data-source="deviceAndGroups" :pagination="false" :indent-size="0">
        <ATableColumn :title="$t('energyAnalysis.deviceGroupName')" data-index="name" key="name">
          <template #default="{ record }">
            <span v-if="record.children">{{ record.name }}</span>
            <a v-else class="device-name" @click="viewDevElectricityData(record)">
              {{ record.name }}
            </a>
          </template>
        </ATableColumn>
        <ATableColumn :title="$t('energyAnalysis.deviceType')" data-index="type" key="type" />
        <ATableColumn
          :title="$t('energyAnalysis.electricityConsumptionUnit')"
          data-index="electricity"
          key="electricity"
        />
        <ATableColumn :title="$t('energyAnalysis.electricityCostUnit')" data-index="cost" key="cost" />
        <ATableColumn
          :title="$t('energyAnalysis.dailyElectricityUnit')"
          data-index="dailyElectricity"
          key="dailyElectricity"
        />
        <ATableColumn :title="$t('energyAnalysis.electricityRatioUnit')" data-index="ratio" key="ratio" />
      </ATable>
      <AModal v-model:open="visible" :title="selectedDevice?.name" :width="920" :footer="null" destroy-on-close>
        <ASpin class="center-loading" :spinning="isDevElectricLoading" />
        <TimeRangeSelect class="device-electricity-select" @change="handleDevElectricTimeChange" />
        <div class="device-electricity-detail">
          <div class="device-electricity-summary">
            <div class="device-electricity-item">
              <span class="device-electricity-value">{{ devEnergyConsumeResult?.cumulativeEnergy ?? '-' }}</span>
              <span class="device-electricity-label">{{ $t('energyAnalysis.tenThousandKwh') }}</span>
              <div class="device-electricity-title">
                <SvgIcon name="electricity-quantity" />
                <span class="device-electricity-label">{{ $t('energyAnalysis.totalElectricityConsumption') }}</span>
              </div>
            </div>
            <div class="device-electricity-item">
              <span class="device-electricity-value">{{ devEnergyConsumeResult?.cumulativeBill ?? '-' }}</span>
              <span class="device-electricity-label">{{ $t('energyAnalysis.tenThousandYuan') }}</span>
              <div class="device-electricity-title">
                <SvgIcon name="electricity-bill" />
                <span class="device-electricity-label">{{ $t('energyAnalysis.totalElectricityCost') }}</span>
              </div>
            </div>
          </div>
          <VChart class="device-electricity-chart" :option="devElectricityOption" autoresize />
        </div>
      </AModal>
    </ACard>
  </ASpin>
</template>

<style lang="scss" scoped>
.energy-card-list {
  margin-bottom: 24px;
}

:deep(.ant-card-body) {
  .ant-segmented {
    padding: 4px;
    color: var(--antd-color-primary);
    background-color: var(--antd-color-primary-opacity-15);
    border-radius: 4px;

    .ant-segmented-item-label {
      display: flex;
      align-items: center;
      padding-inline: 12px;

      i {
        margin-right: 4px;
        font-size: 16px;
      }
    }

    .ant-segmented-item-selected {
      color: var(--antd-color-primary);
      box-shadow: none;
    }

    .ant-segmented-item {
      + .ant-segmented-item {
        margin-left: 8px;
      }

      &:hover:not(.ant-segmented-item-selected, .ant-segmented-item-disabled) {
        color: var(--antd-color-primary);

        &::after {
          background-color: var(--antd-color-primary-opacity-15);
        }
      }
    }
  }
}

.chart-container {
  display: flex;
  margin-bottom: 40px;
}

.chart-wrapper {
  height: 318px;
}

.chart-pie {
  width: 360px;
}

.chart-line {
  width: calc(100% - 360px);
}

.chart {
  height: 100%;
}

.device-name {
  color: var(--antd-color-primary);
}

.device-electricity-select {
  margin-top: 16px;
}

.device-electricity-detail {
  display: flex;
  margin-top: 14px;
}

.device-electricity-summary {
  width: 250px;
  height: 258px;
  padding: 40px 24px;
  margin-top: 10px;
  background: #f5f7fa;
  border-radius: 8px;
}

.device-electricity-item {
  &:first-child {
    padding-bottom: 25px;
    border-bottom: 1px dashed #e4e7ed;
  }

  & + & {
    margin-top: 24px;
  }
}

.device-electricity-value {
  margin-right: 4px;
  font-family: DINAlternate;
  font-size: 30px;
  font-weight: bold;
  line-height: 36px;
  color: #000;
}

.device-electricity-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #000;
}

.device-electricity-title {
  display: flex;
  align-items: center;
  margin-top: 4px;

  i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    font-size: 16px;
    color: #fff;
    border-radius: 2px;
  }

  .svg-icon-electricity-quantity {
    background-color: var(--antd-color-primary);
  }

  .svg-icon-electricity-bill {
    background-color: #1f8ffb;
  }
}

.device-electricity-chart {
  height: 314px;
}
</style>
