<template>
  <div class="panel-box device-stats">
    <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div><div class="corner-deco br"></div>
    <div class="panel-title">智能环境感知应用设备统计</div>
    <div class="panel-content">
      <div class="device-top">
        <div class="device-stat-card">
          <div class="ds-label">在线设备</div>
          <div class="ds-value">{{ online }}</div>
        </div>
        <div class="device-stat-card offline">
          <div class="ds-label">离线设备</div>
          <div class="ds-value">{{ offline }}</div>
        </div>
      </div>
      <div class="device-bottom">
        <div ref="chart" class="device-gauge-wrap"></div>
        <div class="device-type-list">
          <div class="device-type-item" v-for="item in devices" :key="item.name">
            <span class="dt-name">{{ item.name }}</span>
            <span class="dt-value">{{ item.count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDeviceStats } from '@/api'

export default {
  name: 'DeviceStats',
  data() {
    return { online: 0, offline: 0, devices: [], chart: null, timer: null }
  },
  async mounted() {
    await this.loadData()
    this.timer = setInterval(this.loadData, 5 * 60 * 1000)
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
    clearInterval(this.timer)
  },
  methods: {
    async loadData() {
      try {
        const res = await getDeviceStats()
        this.online = res.data.online
        this.offline = res.data.offline
        this.devices = res.data.devices
        if (this.chart) {
          this.chart.setOption({ series: [{ data: [{ value: res.data.onlineRate, name: '设备在线率' }] }] })
        } else {
          this.$nextTick(() => this.initChart(res.data.onlineRate))
        }
      } catch (e) {
        console.error('DeviceStats:', e)
      }
    },
    initChart(rate) {
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 210,
          endAngle: -30,
          radius: '90%',
          center: ['50%', '58%'],
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              width: 14,
              color: [[0.7,'rgba(72,215,255,0.2)'],[0.9,'rgba(72,215,255,0.4)'],[1,'#48d7ff']]
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          pointer: {
            length: '60%',
            width: 4,
            itemStyle: { color: '#48d7ff' }
          },
          title: {
            show: true,
            offsetCenter: [0, '72%'],
            fontSize: 12,
            color: '#7eacc8'
          },
          detail: {
            valueAnimation: true,
            fontSize: 26,
            color: '#48d7ff',
            fontWeight: 700,
            offsetCenter: [0, '40%'],
            formatter: '{value}%',
            fontFamily: 'Courier New'
          },
          data: [{ value: rate, name: '设备在线率' }]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.device-stats {
  height:340px;
  display: flex;
  flex-direction: column;
}

.device-top {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.device-stat-card {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  background: rgba(72,215,255,0.06);
  border: 1px solid rgba(72,215,255,0.1);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(72,215,255,0.3);
    box-shadow: 0 0 12px rgba(72,215,255,0.1);
    transform: translateY(-2px);
  }

  .ds-label { font-size: 12px; color: #7EACC8; }
  .ds-value {
    font-size: 22px;
    font-weight: 700;
    color: $accent;
    font-family: 'Courier New', monospace;
  }

  &.offline .ds-value { color: $text-secondary; }
}

.device-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  min-height: 0;
}

.device-gauge-wrap {
  width: 50%;
  height: 100%;
  min-height: 140px;
}

.device-type-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.device-type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(72,215,255,0.04);
  border: 1px solid rgba(72,215,255,0.08);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(72,215,255,0.35);
    background: rgba(72,215,255,0.08);
    box-shadow: 0 0 12px rgba(72,215,255,0.1);
    transform: translateX(3px);
  }

  .dt-name { font-size: 13px; color: $text-secondary; }
  .dt-value {
    font-size: 18px;
    font-weight: 700;
    color: $accent;
    font-family: 'Courier New', monospace;
  }
}
</style>
