<template>
  <div class="alert-trend-container">
    <dv-border-box-10 class="border-box">
      <div class="chart-title">告警趋势</div>
      <div ref="chart" class="chart"></div>
    </dv-border-box-10>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart = ref(null)

onMounted(() => {
  const myChart = echarts.init(chart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: 'rgba(64, 158, 255, 0.8)',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['P0告警', 'P1告警', 'P2告警', 'P3告警'],
      textStyle: { color: '#fff', fontSize: 12 },
      itemWidth: 12,
      itemHeight: 8,
      itemGap: 15,
      right: 20,
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLine: { lineStyle: { color: 'rgba(124, 208, 255, 0.5)' } },
      axisLabel: { 
        color: 'rgba(124, 208, 255, 0.8)',
        fontSize: 12 
      },
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 550,
      interval: 50,
      axisLine: { 
        lineStyle: { color: 'rgba(124, 208, 255, 0.5)' } 
      },
      splitLine: { 
        lineStyle: { 
          color: 'rgba(124, 208, 255, 0.1)',
          type: 'dashed' 
        } 
      },
      axisLabel: { 
        color: 'rgba(124, 208, 255, 0.8)',
        fontSize: 12 
      }
    },
    series: [
      {
        name: 'P0告警',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 2, color: '#FF4D4F' },
        itemStyle: { 
          color: '#FF4D4F',
          borderWidth: 1,
          borderColor: '#fff'
        },
        data: [300, 100, 400, 250, 200]
      },
      {
        name: 'P1告警',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 2, color: '#FFA500' },
        itemStyle: { 
          color: '#FFA500',
          borderWidth: 1,
          borderColor: '#fff'
        },
        data: [300, 100, 400, 250, 200]
      },
      {
        name: 'P2告警',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 2, color: '#A020F0' },
        itemStyle: { 
          color: '#A020F0',
          borderWidth: 1,
          borderColor: '#fff'
        },
        data: [350, 150, 550, 50, 110]
      },
      {
        name: 'P3告警',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { width: 2, color: '#00FF00' },
        itemStyle: { 
          color: '#00FF00',
          borderWidth: 1,
          borderColor: '#fff'
        },
        data: [200, 300, 400, 100, 50]
      }
    ]
  }

  myChart.setOption(option)
  
  window.addEventListener('resize', function() {
    myChart.resize()
  })
})
</script>

<style scoped>
.alert-trend-container {
  width: 100%;
  height: 50vh; /* 增加高度 */
  padding: 15px 10px;
  box-sizing: border-box;
  margin-top: 50px; /* 增加上方间距 */
}

.border-box {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  /* padding: 20px; */
  box-sizing: border-box;
}

.chart-title {
  font-size: 16px;
  color: #7cd0ff;
  text-align: center;
  padding-top: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.chart {
  width: 100%;
  height: calc(100% - 30px);
}
</style>