<template>
  <div class="panel-box person-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="flip-counter-row">
        <div class="flip-group">
          <div class="flip-label">今日总进入人数</div>
          <div class="flip-digits">
            <div class="flip-digit" v-for="(d, i) in todayTotal" :key="'t'+i">{{ d }}</div>
          </div>
        </div>
        <!-- 等待更新老师签到数--开始 -->
        <!--<div class="flip-group">-->
          <!--<div class="flip-label">当前正在实验人数</div>-->
          <!--<div class="flip-digits">-->
            <!--<div class="flip-digit" v-for="(d, i) in currentLab" :key="'c'+i">{{ d }}</div>-->
          <!--</div>-->
        <!--</div>-->
        <!-- 等待更新老师签到数--结束 -->
      </div>
      <div ref="chart" class="chart-area"></div>
    </div>
  </div>
</template>

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

export default {
  name: 'PersonStats',
  data() {
    return {
      todayTotal: [0, 0, 0, 0, 0],
      currentLab: [0, 0, 0, 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 getPersonStats()
        this.todayTotal = res.data.todayTotal
        this.currentLab = res.data.currentLab
        if (this.chart) {
          this.chart.setOption({
            xAxis: { data: res.data.hourlyData.map(d => d.hour) },
            series: [{ data: res.data.hourlyData.map(d => d.enter) }, { data: res.data.hourlyData.map(d => d.lab) }]
          })
        } else {
          this.$nextTick(() => this.initChart(res.data.hourlyData))
        }
      } catch (e) {
        console.error('PersonStats:', e)
      }
    },
    initChart(data) {
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(6,22,56,0.9)',
          borderColor: 'rgba(72,180,255,0.3)',
          textStyle: { color: '#d8f4ff' }
        },
        legend: {
          data: ['进入人数', '实验人数'],
          top: 0,
          right: 0,
          textStyle: { color: '#7eacc8', fontSize: 10 },
          itemWidth: 14,
          itemHeight: 2
        },
        grid: { left: 35, right: 10, top: 24, bottom: 20 },
        xAxis: {
          type: 'category',
          data: data.map(d => d.hour),
          boundaryGap: false,
          axisLabel: { color: '#7eacc8', fontSize: 10 },
          axisLine: { lineStyle: { color: 'rgba(72,180,255,0.2)' } }
        },
        yAxis: {
          type: 'value',
          axisLabel: { color: '#7eacc8', fontSize: 10 },
          splitLine: { lineStyle: { color: 'rgba(72,180,255,0.08)' } }
        },
        series: [
          {
            name: '进入人数',
            type: 'line',
            smooth: true,
            data: data.map(d => d.enter),
            lineStyle: { color: '#48d7ff', width: 2 },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0,0,0,1,[
                { offset: 0, color: 'rgba(72,215,255,0.25)' },
                { offset: 1, color: 'rgba(72,215,255,0)' }
              ])
            },
            itemStyle: { color: '#48d7ff' },
            symbolSize: 4
          },
          //  等待更新老师签到数--开始
          // {
          //   name: '实验人数',
          //   type: 'line',
          //   smooth: true,
          //   data: data.map(d => d.lab),
          //   lineStyle: { color: '#3a7bff', width: 2 },
          //   areaStyle: {
          //     color: new echarts.graphic.LinearGradient(0,0,0,1,[
          //       { offset: 0, color: 'rgba(58,123,255,0.2)' },
          //       { offset: 1, color: 'rgba(58,123,255,0)' }
          //     ])
          //   },
          //   itemStyle: { color: '#3a7bff' },
          //   symbolSize: 4
          // }
          //  等待更新老师签到数--结束
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

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

.flip-counter-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.flip-group {
  text-align: center;
}

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

.flip-digits {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.flip-digit {
  width: 32px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: $accent;
  background: linear-gradient(180deg, rgba(72,215,255,0.12) 0%, rgba(6,22,56,0.9) 100%);
  border: 1px solid rgba(72,215,255,0.25);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  animation: digitGlow 2s ease-in-out infinite alternate;
  transition: all 0.3s ease;
}

@keyframes digitGlow {
  0% { box-shadow: 0 0 4px rgba(72,215,255,0.1); text-shadow: 0 0 4px rgba(72,215,255,0.3); }
  100% { box-shadow: 0 0 10px rgba(72,215,255,0.25); text-shadow: 0 0 12px rgba(72,215,255,0.5); }
}

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