<template>
  <div class="device-monitor-container">
    <!-- 搜索与筛选 -->
    <el-card class="search-card">
      <el-form :model="queryParams" label-width="80px" @submit.prevent="loadDeviceList">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备类型">
              <el-select v-model="queryParams.deviceType" placeholder="请选择类型">
                <el-option label="全部" value="" />
                <el-option label="传感器" value="sensor" />
                <el-option label="控制器" value="controller" />
                <el-option label="摄像头" value="camera" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="queryParams.status" placeholder="请选择状态">
                <el-option label="全部" value="" />
                <el-option label="在线" value="online" />
                <el-option label="离线" value="offline" />
                <el-option label="故障" value="fault" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" native-type="submit">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 设备列表 -->
    <el-card class="table-card">
      <el-table :data="deviceList" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="deviceId" label="设备ID" align="center" />
        <el-table-column prop="name" label="设备名称" align="center" />
        <el-table-column prop="type" label="设备类型" align="center">
          <template #default="{ row }">
            {{ formatDeviceType(row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ formatStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastOnlineTime" label="最后在线时间" align="center" />
        <el-table-column prop="location" label="位置" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="viewDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 设备详情对话框 -->
    <el-dialog v-model="dialogVisible" title="设备详情" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ selectedDevice.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ selectedDevice.name }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ formatDeviceType(selectedDevice.type) }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ formatStatus(selectedDevice.status) }}</el-descriptions-item>
        <el-descriptions-item label="最后在线时间">{{ selectedDevice.lastOnlineTime }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ selectedDevice.location }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ selectedDevice.description || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 查询参数
const queryParams = ref({
  deviceName: '',
  deviceType: '',
  status: ''
})

// 设备列表数据
const deviceList = ref([])

// 控制弹窗显示和内容
const dialogVisible = ref(false)
const selectedDevice = ref({})

// 模拟请求接口加载设备数据
const loadDeviceList = () => {
  // 模拟异步请求
  setTimeout(() => {
    const mockData = [
      { deviceId: 'D1001', name: '温度传感器A', type: 'sensor', status: 'online', lastOnlineTime: '2025-04-05 14:30', location: '机房A' },
      { deviceId: 'D1002', name: '空调控制器B', type: 'controller', status: 'offline', lastOnlineTime: '-', location: '办公室B' },
      { deviceId: 'D1003', name: '摄像头C', type: 'camera', status: 'fault', lastOnlineTime: '2025-04-04 09:10', location: '大厅C' }
    ]
    deviceList.value = mockData.filter(item => {
      return (
          (!queryParams.value.deviceName || item.name.includes(queryParams.value.deviceName)) &&
          (!queryParams.value.deviceType || item.type === queryParams.value.deviceType) &&
          (!queryParams.value.status || item.status === queryParams.value.status)
      )
    })
  }, 300)
}

// 重置查询条件
const resetQuery = () => {
  queryParams.value = {
    deviceName: '',
    deviceType: '',
    status: ''
  }
  loadDeviceList()
}

// 查看设备详情
const viewDetail = (device) => {
  selectedDevice.value = device
  dialogVisible.value = true
}

// 格式化设备类型
const formatDeviceType = (type) => {
  switch (type) {
    case 'sensor': return '传感器'
    case 'controller': return '控制器'
    case 'camera': return '摄像头'
    default: return '未知'
  }
}

// 格式化设备状态
const formatStatus = (status) => {
  switch (status) {
    case 'online': return '在线'
    case 'offline': return '离线'
    case 'fault': return '故障'
    default: return '未知'
  }
}

// 表格行样式（用于根据状态设置背景色）
const tableRowClassName = ({ row }) => {
  if (row.status === 'fault') {
    return 'warning-row'
  } else if (row.status === 'offline') {
    return 'danger-row'
  }
  return ''
}

// 获取标签类型（用于 el-tag）
const getStatusTagType = (status) => {
  switch (status) {
    case 'online': return 'success'
    case 'offline': return 'info'
    case 'fault': return 'danger'
    default: return ''
  }
}

// 页面加载时初始化数据
onMounted(() => {
  loadDeviceList()
})
</script>

<style scoped lang="scss">
.device-monitor-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  .el-table ::v-deep(.warning-row) {
    background-color: #fef0f0 !important;
  }

  .el-table ::v-deep(.danger-row) {
    background-color: #fdf6ec !important;
  }
}
</style>
