<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="行政区域">
        <el-select v-model="region" placeholder="请选择">
          <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="deviceType" placeholder="请选择">
          <el-option
              v-for="item in deviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型">
        <el-select v-model="alarmType" placeholder="请选择">
          <el-option
              v-for="item in alarmTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>

    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </el-card>
</template>

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

// 初始化选项
const region = ref('区域A')
const deviceType = ref('类型A')
const alarmType = ref('类型1')

const regionOptions = [
  { value: '区域A', label: '区域A' },
  { value: '区域B', label: '区域B' },
  // 添加更多选项
]
const deviceTypeOptions = [
  { value: '类型A', label: '类型A' },
  { value: '类型B', label: '类型B' },
  // 添加更多选项
]
const alarmTypeOptions = [
  { value: '类型1', label: '类型1' },
  { value: '类型2', label: '类型2' },
  // 添加更多选项
]

const chart = ref(null)

function fetchData() {
  // 这里应该调用后端API获取数据
  // 模拟数据
  const data = generateData()
  initChart(data)
}

function initChart(data) {
  const myChart = echarts.init(chart.value)
  const option = {
    title: {
      text: '告警趋势',
    },
    tooltip: {},
    xAxis: {
      data: data.days,
    },
    yAxis: {},
    series: [
      {
        name: '告警数量',
        type: 'line',
        data: data.counts,
      },
    ],
  }
  myChart.setOption(option)
}

function generateData() {
  const days = ['今天', '昨天', '前天', ...Array(28).fill('').map((_, i) => `-${i - 2}天前`)]
  const counts = days.map(() => Math.floor(Math.random() * 100))
  return { days, counts }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.el-card {
  margin: 20px;
}
</style>