<template>
  <section class="glass-panel">
    <div class="panel-head">
      <div>
        <p class="panel-eyebrow">Alarm Trend</p>
        <h3>告警趋势</h3>
      </div>
      <el-tag size="small" effect="plain">共 {{ trend.length }} 个时间桶</el-tag>
    </div>
    <Chart class="chart-host" :chart-option="chartOption" />
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import Chart from '@/components/Charts/Chart.vue';
import type { AlertTrendPointVO } from '@/api/ems/types';

defineOptions({
  name: 'AlarmTrendPanel'
});

const props = defineProps<{
  trend: AlertTrendPointVO[];
}>();

const chartOption = computed(() => {
  return {
    color: ['#ef4444'],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: 20,
      left: '8%',
      right: '4%',
      bottom: 36
    },
    xAxis: {
      type: 'category',
      data: props.trend.map((item) => item.timeBucket)
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.18
        },
        data: props.trend.map((item) => item.alarmCount)
      }
    ]
  };
});
</script>

<style scoped>
.glass-panel {
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-eyebrow {
  margin: 0 0 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-head h3 {
  margin: 0;
}

.chart-host {
  width: 100%;
  height: 320px;
}
</style>
