<template>
  <div class="panel-box equipment-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 ref="chart" class="equip-chart-wrap"></div>
      <div class="equip-mid">
        <div class="equip-mid-item">
          <div class="em-value">{{ summary.totalDevices }}</div>
          <div class="em-label">设备总数</div>
        </div>
        <div class="equip-mid-item">
          <div class="em-value">{{ summary.totalHours }}<span class="em-unit">h</span></div>
          <div class="em-label">使用总时长</div>
        </div>
        <div class="equip-mid-item">
          <div class="em-value">{{ summary.usageRate }}<span class="em-unit">%</span></div>
          <div class="em-label">设备使用率</div>
        </div>
      </div>
      <div class="equip-bottom">
        <div class="equip-status-card"><div class="es-value" style="color:#48d7ff">{{ status.using }}</div><div class="es-label">使用</div></div>
        <div class="equip-status-card"><div class="es-value" style="color:#36d399">{{ status.idle }}</div><div class="es-label">空闲</div></div>
        <div class="equip-status-card"><div class="es-value" style="color:#ffb020">{{ status.normal }}</div><div class="es-label">正常</div></div>
        <div class="equip-status-card"><div class="es-value" style="color:#ff4d4f">{{ status.repair }}</div><div class="es-label">维修</div></div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'EquipmentStats',
  data() {
    return {
      chart: null,
      summary: { totalDevices: 0, totalHours: '', usageRate: '' },
      status: { using: 0, idle: 0, normal: 0, repair: 0 },
      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 getEquipmentStats()
        this.summary = res.data.summary
        this.status = res.data.status
        if (this.chart) {
          this.chart.setOption({ series: [{ data: res.data.categories.map(c => ({ name: c.name, value: c.value, itemStyle: { color: c.color } })) }] })
        } else {
          this.$nextTick(() => this.initChart(res.data.categories))
        }
      } catch (e) {
        console.error('EquipmentStats:', e)
      }
    },
    initChart(categories) {
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(6,22,56,0.9)',
          borderColor: 'rgba(72,180,255,0.3)',
          textStyle: { color: '#d8f4ff' }
        },
        legend: {
          orient: 'vertical',
          right: 4,
          top: 'center',
          textStyle: { color: '#7eacc8', fontSize: 10 },
          itemWidth: 8,
          itemHeight: 8
        },
        series: [{
          type: 'pie',
          radius: ['30%', '80%'],
          center: ['35%', '50%'],
          label: { show: false },
          emphasis: { scaleSize: 4 },
          data: categories.map(c => ({
            name: c.name,
            value: c.value,
            itemStyle: { color: c.color }
          }))
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

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

.equip-chart-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.equip-mid {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
  flex-shrink: 0;
}

.equip-mid-item {
  text-align: center;
  flex: 1;
  padding: 8px 4px;
  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.3);
    box-shadow: 0 0 12px rgba(72,215,255,0.1);
    transform: translateY(-2px);
  }

  .em-value {
    font-size: 24px;
    font-weight: 700;
    color: $accent;
    font-family: 'Courier New', monospace;
  }

  .em-unit {
    font-size: 11px;
    color: $text-secondary;
  }

  .em-label {
    font-size: 12px;
    color: $text-secondary;
    margin-top: 2px;
  }
}

.equip-bottom {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.equip-status-card {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  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.3);
    box-shadow: 0 0 12px rgba(72,215,255,0.1);
    transform: translateY(-2px);
  }

  .es-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
  }

  .es-label {
    font-size: 12px;
    color: $text-secondary;
    margin-top: 2px;
  }
}
</style>
