<template>
  <div class="panel-box basic-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="chart-area"></div>
      <!-- 暂时注释--开始-->
      <div class="status-cards">
        <div class="status-card using">
          <div class="label">使用</div>
          <div class="value">{{ usage.using }}<span class="unit"> 间</span></div>
        </div>
        <div class="status-card error">
          <div class="label">异常</div>
          <div class="value">{{ usage.abnormal }}<span class="unit"> 间</span></div>
        </div>
        <div class="status-card idle">
          <div class="label">空闲</div>
          <div class="value">{{ usage.idle }}<span class="unit"> 间</span></div>
        </div>
      </div>
      <!-- 暂时注释--结束-->
    </div>
  </div>
</template>

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

export default {
  name: 'BasicStats',
  data() {
    return {
      levels: [],
      usage: { using: 0, abnormal: 0, idle: 0 },
      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 getLabBasicStats()
        this.levels = res.data.levels
        this.usage = res.data.usage
        if (this.chart) {
          this.chart.setOption({ series: [{ label: { formatter: res.data.totalLabs + '\n实验室总数' }, data: res.data.levels.map(l => ({ name: l.name, value: l.value, itemStyle: { color: l.color } })) }] })
        } else {
          this.$nextTick(() => this.initChart(res.data))
        }
      } catch (e) {
        console.error('BasicStats:', e)
      }
    },
    initChart(data) {
      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: 10,
          top: 'center',
          textStyle: { color: '#7eacc8', fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10
        },
        series: [{
          type: 'pie',
          radius: ['60%', '85%'],
          center: ['45%', '50%'],
          label: {
            show: true,
            position: 'center',
            formatter: data.totalLabs + '\n实验室总数',
            fontSize: 14,
            color: '#fff',
            lineHeight: 20
          },
          emphasis: { scaleSize: 6 },
          data: data.levels.map(l => ({
            name: l.name,
            value: l.value,
            itemStyle: { color: l.color }
          }))
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-stats {
  display: flex;
  flex-direction: column;
}

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

.status-cards {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.status-card {
  flex: 1;
  text-align: center;
  padding: 6px;
  border-radius: 4px;
  background: rgba(72,215,255,0.06);
  border: 1px solid rgba(72,215,255,0.12);
  transition: all 0.3s ease;
  animation: cardBreathe 4s ease-in-out infinite;

  &:nth-child(2) { animation-delay: 1.3s; }
  &:nth-child(3) { animation-delay: 2.6s; }

  &:hover {
    transform: translateY(-2px);
    border-color: $accent !important;
    box-shadow: 0 4px 16px rgba(72,215,255,0.15) !important;
  }

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

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

  .unit {
    font-size: 12px;
    color: $text-secondary;
    font-weight: normal;
  }

  &.using .value { color: $accent; }
  &.error .value { color: $accent-red; }
  &.idle .value { color: $accent-green; }
}

@keyframes cardBreathe {
  0%, 100% { border-color: rgba(72,215,255,0.12); box-shadow: 0 0 0 transparent; }
  50% { border-color: rgba(72,215,255,0.3); box-shadow: 0 0 10px rgba(72,215,255,0.08); }
}
</style>
