<template>
  <div class="duty-warning-panel">
    <div class="chart-block">
      <div class="chart-title">本周接警统计</div>
      <div class="chart" ref="weeklyChart" />
    </div>
    <div class="list-block">
      <div class="chart-title">预警信息</div>
      <div class="warning-list">
        <div v-for="(w, i) in warnings" :key="i" class="warning-item" :class="`level-${w.level}`">
          <i :class="getIcon(w.level)" />
          <div class="content">
            <div class="title">{{ w.title }}</div>
            <div class="meta">{{ w.time }}</div>
          </div>
        </div>
        <div v-if="!warnings || warnings.length === 0" class="empty">
          <i class="el-icon-success" />
          <span>暂无预警</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')

export default {
  name: 'DutyWarningPanel',
  props: {
    weeklyData: {
      type: Array,
      default: () => [] // [n1..n7]
    },
    warnings: {
      type: Array,
      default: () => [] // [{title, time, level}]
    }
  },
  data() {
    return { weeklyChart: null }
  },
  mounted() {
    this.$nextTick(() => {
      this.weeklyChart = echarts.init(this.$refs.weeklyChart, 'macarons')
      this.setWeeklyOption()
      window.addEventListener('resize', this.resize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
    this.weeklyChart && this.weeklyChart.dispose()
  },
  watch: {
    weeklyData: {
      deep: true,
      handler() { this.setWeeklyOption() }
    }
  },
  methods: {
    resize() { this.weeklyChart && this.weeklyChart.resize() },
    setWeeklyOption() {
      const data = this.weeklyData
      this.weeklyChart && this.weeklyChart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '8%', containLabel: true },
        xAxis: { type: 'category', data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },
        yAxis: { type: 'value' },
        series: [{
          name: '接警数',
          type: 'bar',
          data,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#d97706' },
              { offset: 1, color: '#2563eb' }
            ])
          }
        }]
      })
    },
    getIcon(level) {
      return {
        high: 'el-icon-warning',
        medium: 'el-icon-bell',
        low: 'el-icon-info'
      }[level] || 'el-icon-info'
    }
  }
}
</script>

<style lang="scss" scoped>
.duty-warning-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;

  .chart-title {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid #409eff;
  }

  .chart { width: 100%; height: 220px; }

  .warning-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;

    .warning-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 4px;
      background: #f5f7fa;
      margin-bottom: 10px;

      &.level-high { border-left: 4px solid #F56C6C; }
      &.level-medium { border-left: 4px solid #E6A23C; }
      &.level-low { border-left: 4px solid #909399; }

      i { color: #409eff; margin-right: 8px; }
      .content { flex: 1; }
      .title { font-size: 14px; color: #303133; }
      .meta { font-size: 12px; color: #909399; margin-top: 4px; }
    }

    .empty { text-align: center; color: #909399; padding: 30px 0; }
  }
}
</style>