<template>
  <div class="monitor-container">
    <!-- 左侧栏 -->
    <div class="left-col">
      <!-- 待办工单 -->
      <div class="panel">
        <h3 class="panel-title">待办工单</h3>
        <el-table :data="workOrders" class="panel-table" :header-cell-style="tableHeaderStyle">
          <el-table-column prop="orderNo" label="工单编号" />
          <el-table-column prop="type" label="工单类型" />
          <el-table-column prop="device" label="设备名称" />
          <el-table-column prop="priority" label="优先级">
            <template #default="{ row }">
              <span :class="['priority-tag', row.priority.toLowerCase()]">{{ row.priority }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 告警类型统计 -->
      <div class="panel">
        <h3 class="panel-title">告警类型统计（15天内）</h3>
        <div ref="alarmChartRef" class="chart" />
      </div>

      <!-- 设备区域信息 -->
      <div class="panel">
        <h3 class="panel-title">设备区域信息</h3>
        <div ref="areaChartRef" class="chart" />
      </div>
    </div>

    <!-- 中间地图区域 -->
    <div class="center-col">
      <div class="panel map-panel">
        <!-- 这里可以替换为真实地图（如高德/百度地图） -->
        <div class="map-placeholder">
          <p>地图区域（可接入真实地图）</p>
          <!-- 示例路径/点位示意，后续可通过地图API绘制 -->
        </div>
      </div>

      <!-- 设备分类 -->
      <div class="panel">
        <h3 class="panel-title">设备分类</h3>
        <div ref="deviceTypeChartRef" class="chart" />
      </div>
    </div>

    <!-- 右侧栏 -->
    <div class="right-col">
      <!-- 设备列表 -->
      <div class="panel">
        <h3 class="panel-title">设备列表</h3>
        <el-table :data="deviceList" class="panel-table" :header-cell-style="tableHeaderStyle">
          <el-table-column prop="name" label="设备名称" />
          <el-table-column prop="type" label="设备类型">
            <template #header>
              <div>
                <span>设备类型</span>
                <el-select v-model="deviceTypeFilter" size="small" style="margin-left: 8px">
                  <el-option label="全部" value="全部" />
                  <el-option label="电用井盖" value="电用井盖" />
                  <el-option label="供水井盖" value="供水井盖" />
                  <el-option label="通信井盖" value="通信井盖" />
                  <el-option label="污水井盖" value="污水井盖" />
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="battery" label="设备电量">
            <template #default="{ row }">
              <el-tag type="success">{{ row.battery }}%</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 动态信息 -->
      <div class="panel">
        <h3 class="panel-title">动态信息</h3>
        <el-table :data="dynamicLogs" class="panel-table" :header-cell-style="tableHeaderStyle">
          <el-table-column prop="time" label="时间" />
          <el-table-column prop="event" label="事件" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <span :class="['status-tag', row.statusClass]">{{ row.status }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

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

// 表格表头样式
const tableHeaderStyle = {
  background: 'rgba(0, 100, 200, 0.3)',
  color: '#fff',
  borderColor: '#2b4b8c'
}

// 模拟数据
const workOrders = ref([
  { orderNo: 'WO202309...', type: '故障维修', device: '井盖一', priority: '高' },
  { orderNo: 'WO202309...', type: '故障维修', device: '井盖二', priority: '低' },
  { orderNo: 'WO202309...', type: '故障维修', device: '井盖三', priority: '低' },
  { orderNo: 'WO202309...', type: '故障维修', device: '井盖四', priority: '低' },
  { orderNo: 'WO202309...', type: '故障维修', device: '井盖五', priority: '中' }
])

const deviceTypeFilter = ref('全部')
const deviceList = ref([
  { name: '井盖一', type: '电用井盖', battery: 80 },
  { name: '井盖二', type: '供水井盖', battery: 80 },
  { name: '井盖三', type: '通信井盖', battery: 80 },
  { name: '井盖四', type: '污水井盖', battery: 80 },
  { name: '井盖五', type: '污水井盖', battery: 80 },
  { name: '井盖六', type: '污水井盖', battery: 80 },
  { name: '井盖七', type: '通信井盖', battery: 80 },
  { name: '井盖八', type: '通信井盖', battery: 80 },
  { name: '井盖九', type: '通信井盖', battery: 80 },
  { name: '井盖十', type: '通信井盖', battery: 80 },
  { name: '井盖十一', type: '通信井盖', battery: 80 }
])

const dynamicLogs = ref([
  { time: '2025-09-23 09:23', event: '污水井盖#W023发生倾斜告警', status: '处理中', statusClass: 'processing' },
  { time: '2025-08-25 09:23', event: '电力井盖#D112维修完成', status: '已完成', statusClass: 'done' },
  { time: '2025-07-18 09:23', event: '通信井盖#T056电压异常', status: '处理中', statusClass: 'processing' },
  { time: '2025-08-23 09:23', event: '雨水井盖#Y091更换完成', status: '已完成', statusClass: 'done' }
])

// 图表DOM引用
const alarmChartRef = ref(null)
const areaChartRef = ref(null)
const deviceTypeChartRef = ref(null)

onMounted(() => {
  // 告警类型统计饼图
  const alarmChart = echarts.init(alarmChartRef.value)
  alarmChart.setOption({
    tooltip: { trigger: 'item' },
    legend: { show: false },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 10, name: '位移告警', itemStyle: { color: '#ff3333' } },
        { value: 15, name: '倾斜告警', itemStyle: { color: '#ffb333' } },
        { value: 20, name: '水位告警', itemStyle: { color: '#33cc33' } },
        { value: 5, name: '电压告警', itemStyle: { color: '#3399ff' } },
        { value: 60, name: '温度告警', itemStyle: { color: '#9966ff' } }
      ]
    }]
  })

  // 设备区域信息柱状图
  const areaChart = echarts.init(areaChartRef.value)
  areaChart.setOption({
    grid: { left: '10%', right: '10%', bottom: '15%', top: '10%' },
    xAxis: {
      type: 'category',
      data: ['太安社区', '鸳鸯山社区', '鹤鸣山社区', '廻龙山社区', '凤凰山社区', '老鸦溪社区'],
      axisLabel: { color: '#fff', interval: 0, rotate: 30 }
    },
    yAxis: { type: 'value', axisLabel: { color: '#fff' }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } },
    series: [{
      type: 'bar',
      data: [80, 85, 60, 45, 20, 88],
      itemStyle: { color: '#3399ff' }
    }]
  })

  // 设备分类柱状图
  const deviceTypeChart = echarts.init(deviceTypeChartRef.value)
  deviceTypeChart.setOption({
    grid: { left: '10%', right: '10%', bottom: '15%', top: '10%' },
    xAxis: {
      type: 'category',
      data: ['电用井盖', '通信井盖', '污水井盖', '路灯井盖', '电缆井盖', '化粪池井盖'],
      axisLabel: { color: '#fff', interval: 0, rotate: 30 }
    },
    yAxis: { type: 'value', axisLabel: { color: '#fff' }, splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } } },
    series: [{
      type: 'bar',
      data: [120, 80, 60, 30, 25, 20],
      itemStyle: { color: '#3399ff' }
    }]
  })
})
</script>

<style scoped>
.monitor-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #1a1a4a;
  color: #fff;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
}

.left-col, .right-col {
  width: 24%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel {
  background: rgba(30, 40, 90, 0.8);
  border: 1px solid #2b4b8c;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}

.panel-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #66ccff;
  border-left: 3px solid #66ccff;
  padding-left: 8px;
}

.panel-table {
  width: 100%;
  background: transparent;
  --el-table-bg-color: transparent;
  --el-table-row-hover-bg-color: rgba(0, 100, 200, 0.2);
  --el-table-text-color: #fff;
}

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

.map-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a2a;
}

.map-placeholder {
  color: #66ccff;
  font-size: 18px;
}

.priority-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.priority-tag.high { background: #ff3333; }
.priority-tag.medium { background: #ffb333; }
.priority-tag.low { background: #33cc33; }

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.status-tag.processing { background: #3399ff; }
.status-tag.done { background: #33cc33; }
</style>