<template>
  <div class="hardware-data">
    <!-- 标题 -->
    <div class="module-title">
      <img src="@/assets/images/shb.png" class="title-icon" />
      硬件数据
    </div>

    <!-- 智能电表部分 -->
    <div class="data-section">
      <div class="device-info">
        <img src="@/assets/images/dblxzhb.png" class="title-icon" />
        <div>
          <div class="device-count">{{ electricState.deviceCount }}</div>
          <div class="device-name">智能电表</div>
        </div>
      </div>
      <div class="data-cards">
        <div class="data-card">
          <div class="data-label">年度用电</div>
          <div>
            <div class="data-value">{{ electricState.annualUsage }}</div>
            <div class="data-unit">kW·h</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">月均用电</div>
          <div>
            <div class="data-value">{{ electricState.monthlyAvgUsage }}</div>
            <div class="data-unit">kW·h</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">日均用电</div>
          <div>
            <div class="data-value">{{ electricState.dailyAvgUsage }}</div>
            <div class="data-unit">kW·h</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">开关次数</div>
          <div>
            <div class="data-value">{{ electricState.switchCount }}</div>
            <div class="data-unit">近12个月</div>
          </div>
        </div>
      </div>
    </div>

    <div class="charts-container">
      <div ref="powerChart" class="chart-item"></div>
      <div ref="waterChart" class="chart-item"></div>
    </div>

    <!-- 智能水表部分 -->
    <div class="data-section">
      <div class="device-info">
        <img src="@/assets/images/zhnmj.png" class="title-icon" />
        <div>
          <div class="device-count">{{ waterState.deviceCount }}</div>
          <div class="water-device-name">智能水表</div>
        </div>
      </div>
      <div class="data-cards">
        <div class="data-card">
          <div class="data-label">年度用水</div>
          <div>
            <div class="data-value">{{ waterState.annualUsage }}</div>
            <div class="water-data-unit">m³</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">月均用水</div>
          <div>
            <div class="data-value">{{ waterState.monthlyAvgUsage }}</div>
            <div class="water-data-unit">m³</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">日均用水</div>
          <div>
            <div class="data-value">{{ waterState.dailyAvgUsage }}</div>
            <div class="water-data-unit">m³</div>
          </div>
        </div>
        <div class="data-card">
          <div class="data-label">开关次数</div>
          <div>
            <div class="data-value">{{ waterState.switchCount }}</div>
            <div class="water-data-unit">近12个月</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { huiJiaApi } from "@/api"
  import * as echarts from "echarts"

  export default {
    name: "HardwareData",
    data() {
      return {
        electricState: {
          deviceCount: 8921, // 设备数量
          annualUsage: 42891, // 年度用量 近12月的用量之和
          monthlyAvgUsage: 18921, // 月均用量 近12月用量月平均数
          dailyAvgUsage: 8921, // 日均用量 近12月用量日平均数
          switchCount: 887, // 开关次数 近12月成功开启、关闭次数
          monthStatisticsList: [],
        },
        waterState: {
          deviceCount: 8921, // 设备数量
          annualUsage: 42891, // 年度用量 近12月的用量之和
          monthlyAvgUsage: 18921, // 月均用量 近12月用量月平均数
          dailyAvgUsage: 8921, // 日均用量 近12月用量日平均数
          switchCount: 887, // 开关次数 近12月成功开启、关闭次数
          list: [],
        },
        powerChartInstance: null,
        waterChartInstance: null,
      }
    },
    mounted() {
      this.getData()
      this.initPowerChart()
      this.initWaterChart()
      window.addEventListener("resize", this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.handleResize)
      if (this.powerChartInstance) {
        this.powerChartInstance.dispose()
      }
      if (this.waterChartInstance) {
        this.waterChartInstance.dispose()
      }
    },
    methods: {
      getData() {
        huiJiaApi.getElectricData().then((res) => {
          if (res && res.data) {
            this.electricState = res.data.data
            this.initPowerChart()
          }
        })
        huiJiaApi.getWaterData().then((res) => {
          if (res && res.data) {
            this.waterState = res.data.data
            this.initWaterChart()
          }
        })
      },
      // 初始化用电量柱状图
      initPowerChart() {
        this.powerChartInstance = echarts.init(this.$refs.powerChart)

        const option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "rgba(64, 158, 255, 0.3)",
            textStyle: {
              color: "#fff",
            },
            formatter: (params) => {
              let result = ``
              params.forEach((param) => {
                result += `${param.name}<br/>${
                  param.seriesName
                }: ${param.value.toLocaleString()}<br/>`
              })
              return result
            },
          },
          grid: {
            left: "1%",
            right: "1%",
            top: "5%",
            bottom: "2%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.electricState.monthStatisticsList.map((item) => item.staData),
            axisLine: {
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 11,
              interval: 0,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              // 将坐标轴内的线设置为虚线
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 4000,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 11,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(160, 179, 214, 0.1)",
                type: "dashed",
                width: 1,
              },
            },
          },
          series: [
            {
              name: "用电量",
              type: "bar",
              data: this.electricState.monthStatisticsList.map((item) => item.count),
              barWidth: "30%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  { offset: 0, color: "#FCE2B4" },
                  { offset: 1, color: "#F66757" },
                ]),
                borderRadius: [20, 20, 0, 0],
              },
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 10,
                formatter: (params) =>
                  params.value >= 10000
                    ? (params.value / 10000).toFixed(1) + "万"
                    : params.value,
              },
            },
          ],
        }

        this.powerChartInstance.setOption(option)
        this.powerChartInstance.resize()
      },

      // 初始化用水量柱状图
      initWaterChart() {
        this.waterChartInstance = echarts.init(this.$refs.waterChart)

        const option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "rgba(64, 158, 255, 0.3)",
            textStyle: {
              color: "#fff",
            },
            formatter: (params) => {
              let result = ``
              params.forEach((param) => {
                result += `${param.name}<br/>${
                  param.seriesName
                }: ${param.value.toLocaleString()}<br/>`
              })
              return result
            },
          },
          grid: {
            left: "1%",
            right: "1%",
            top: "2%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.waterState.monthStatisticsList.map((item) => item.staData),
            axisLine: {
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 11,
              interval: 0,
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              // 将坐标轴内的线设置为虚线
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            // 反转 y 轴的 min 和 max，实现“倒立”
            min: 4000,
            max: 0,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 11,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(160, 179, 214, 0.1)",
                type: "dashed",
                width: 1,
              },
            },
          },
          series: [
            {
              name: "用水量",
              type: "bar",
              data: this.waterState.monthStatisticsList.map((item) => item.count),
              barWidth: "30%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#3AB3E3" },
                  { offset: 1, color: "#1620D4" },
                ]),
                borderRadius: [0, 0, 20, 20],
              },
              label: {
                show: true,
                position: "bottom",
                color: "#fff",
                fontSize: 10,
                formatter: (params) =>
                  params.value >= 10000
                    ? (params.value / 10000).toFixed(1) + "万"
                    : params.value,
              },
            },
          ],
        }

        this.waterChartInstance.setOption(option)
        this.waterChartInstance.resize()
      },

      handleResize() {
        if (this.powerChartInstance) {
          this.powerChartInstance.resize()
        }
        if (this.waterChartInstance) {
          this.waterChartInstance.resize()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .hardware-data {
    background: var(--content-bg);
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: halfW(20);
  }

  .module-title {
    display: flex;
    align-items: center;
    color: var(--title-primary);
    font-size: halfW(16);
    border-radius: 4px;
    padding: halfH(4) halfW(10);
    background: var(--title-bg);
  }

  .data-section {
    display: flex;
    justify-content: space-between;
    gap: halfW(16);
    padding: halfH(10) halfW(10);
  }

  .device-info {
    text-align: right;
    background: var(--title-bg);
    display: flex;
    align-items: center;
    gap: halfW(20);
    justify-content: space-between;
    border: 1px solid rgba(64, 158, 255, 0.1);
    border-radius: halfW(6);
    padding: halfH(16) halfW(10);
  }

  .device-name {
    color: #fea373;
    font-size: halfW(14);
    font-weight: 500;
  }
  .water-device-name {
    color: #3ab3e3;
    font-size: halfW(14);
    font-weight: 500;
  }

  .device-count {
    color: #fff;
    font-size: halfW(18);
    font-weight: 500;
    margin-bottom: halfH(10);
  }

  .data-cards {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--title-bg);
    border: 1px solid rgba(64, 158, 255, 0.1);
    border-radius: halfW(4);
  }

  .data-card {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 1px solid rgba(64, 158, 255, 0.3);
    text-align: right;
    padding: halfH(10) halfW(10);
    &:last-child {
      border-right: none;
    }
  }

  .data-label {
    color: var(--primary);
    font-size: halfW(14);
    font-weight: 500;
  }

  .data-value {
    color: #fff;
    font-size: halfW(18);
    font-weight: 600;
    margin-bottom: halfH(2);
  }

  .data-unit {
    color: #fea373;
    font-size: halfW(14);
  }
  .water-data-unit {
    color: #3ab3e3;
    font-size: halfW(14);
  }

  /* 修改为两个图表容器 */
  .charts-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .chart-item {
    flex: 1;
    width: 100%;
    height: 100%;
  }
</style>
