<template>
  <div class="device-management-system">
    <!-- 查询条件区域 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" ref="searchForm" :inline="true" class="search-form">
        <!-- 设备基础信息条件 -->
        <el-form-item label="设备ID">
          <el-input v-model="queryParams.deviceId" placeholder="请输入设备ID" clearable />
        </el-form-item>

        <el-form-item label="设备名称">
          <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
        </el-form-item>

        <el-form-item label="设备类型">
          <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="控制器" value="CONTROLLER" />
            <el-option label="传感器" value="SENSOR" />
            <el-option label="执行器" value="ACTUATOR" />
            <el-option label="广播设备" value="BROADCASTER" />
            <el-option label="监控设备" value="MONITOR" />
            <el-option label="报警设备" value="ALARM" />
            <el-option label="输入设备" value="INPUT" />
          </el-select>
        </el-form-item>

        <!-- 空间定位条件 -->
        <el-form-item label="楼层">
          <el-select v-model="queryParams.floor" placeholder="请选择楼层" style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="1楼" value="1F" />
            <el-option label="2楼" value="2F" />
            <el-option label="3楼" value="3F" />
          </el-select>
        </el-form-item>

        <el-form-item label="区域">
          <el-input v-model="queryParams.area" placeholder="请输入区域" clearable />
        </el-form-item>

        <!-- 实时状态条件 -->
        <el-form-item label="运行状态">
          <el-select v-model="queryParams.status" placeholder="请选择运行状态" style="width: 180px;">
            <el-option label="正常" value="正常" />
            <el-option label="警告" value="警告" />
            <el-option label="故障" value="故障" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格区域 -->
    <el-card class="data-table">
      <el-table
          :data="deviceList"
          border
          size="small"
          v-loading="isLoading"
          row-key="deviceId"
          @row-click="handleRowClick"
      >
        <el-table-column label="设备ID" prop="deviceId" align="center" width="140" />
        <el-table-column label="设备名称" prop="deviceName" align="center" width="140" />
        <el-table-column label="设备类型" prop="deviceType" align="center" width="120">
          <template #default="scope">
            {{ mapDeviceType(scope.row.deviceType) }}
          </template>
        </el-table-column>
        <el-table-column label="型号" prop="model" align="center" width="120" />
        <el-table-column label="安装位置" align="center" min-width="200">
          <template #default="scope">
            <div>{{ scope.row.floor }}-{{ scope.row.area }}</div>
            <div class="small-text">({{ scope.row.location }})</div>
          </template>
        </el-table-column>
        <el-table-column label="运行状态" align="center" width="120">
          <template #default="scope">
            <el-tag :color="scope.row.statusColor">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前告警" align="center" width="160">
          <template #default="scope">
            <div v-if="scope.row.alarmCode">{{ scope.row.alarmCode }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
<!--        <el-table-column label="控制协议" prop="controlProtocol" align="center" width="120" />-->
      </el-table>

      <!-- 分页组件 -->
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog :visible.sync="detailDialogOpen" title="设备详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID" span="1">{{ detailDevice.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称" span="1">{{ detailDevice.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="设备类型" span="1">{{ mapDeviceType(detailDevice.deviceType) }}</el-descriptions-item>
        <el-descriptions-item label="型号" span="1">{{ detailDevice.model }}</el-descriptions-item>
        <el-descriptions-item label="安装位置" span="2">
          {{ detailDevice.floor }}-{{ detailDevice.area }} ({{ detailDevice.location }})
        </el-descriptions-item>
        <el-descriptions-item label="运行状态" span="2">
          <el-tag :color="detailDevice.statusColor">{{ detailDevice.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="模型文件" span="2">
          <el-link :href="detailDevice.modelPath" type="primary" target="_blank">查看模型</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="动画参数" span="2">
          <pre class="small-text">{{ detailDevice.animationParams }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="当前告警" span="2" v-if="detailDevice.alarmCode">
          <el-alert
              title="{{ detailDevice.alarmDescription }}"
              type="danger"
              :closable="false"
              show-icon
          />
          <div class="mt-2">告警代码: {{ detailDevice.alarmCode }}</div>
          <div>触发时间: {{ detailDevice.triggerTime }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="控制协议" span="1">{{ detailDevice.controlProtocol }}</el-descriptions-item>
        <el-descriptions-item label="指令集" span="1">{{ detailDevice.commandSet }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogOpen = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import {getBuildingEquipmentMonitoringList} from "@/api/buildingEquipmentMonitoring/buildingEquipmentMonitoring";

// 查询参数
const queryParams = reactive({
  deviceId: '',
  deviceName: '',
  deviceType: '',
  floor: '',
  area: '',
  status: '',
  pageNum: 1,
  pageSize: 10,
  interfaceName: "三维设备监控中心"
});

// 表格数据
const deviceList = ref([]);
const total = ref(0);
const isLoading = ref(false);
const detailDialogOpen = ref(false);
const detailDevice = ref({});

// 获取数据
const getList = async () => {
  isLoading.value = true;
  try {
    let response = await getBuildingEquipmentMonitoringList(queryParams);
    // 过滤条件处理
    let filteredData = response.data.list || [];

    // 设备ID过滤
    if (queryParams.deviceId) {
      filteredData = filteredData.filter(item => item.deviceId.includes(queryParams.deviceId));
    }

    // 设备名称过滤
    if (queryParams.deviceName) {
      filteredData = filteredData.filter(item => item.deviceName.includes(queryParams.deviceName));
    }

    // 设备类型过滤
    if (queryParams.deviceType) {
      filteredData = filteredData.filter(item => item.deviceType === queryParams.deviceType);
    }

    // 楼层过滤
    if (queryParams.floor) {
      filteredData = filteredData.filter(item => item.floor === queryParams.floor);
    }

    // 区域过滤
    if (queryParams.area) {
      filteredData = filteredData.filter(item => item.area.includes(queryParams.area));
    }

    // 状态过滤
    if (queryParams.status) {
      filteredData = filteredData.filter(item => item.status === queryParams.status);
    }

    // 分页处理
    total.value = response.data.total || 0;
    deviceList.value = filteredData;
  } catch (error) {
    ElMessage.error('获取设备数据失败');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetSearch = () => {
  queryParams.deviceId = '';
  queryParams.deviceName = '';
  queryParams.deviceType = '';
  queryParams.floor = '';
  queryParams.area = '';
  queryParams.status = '';
  queryParams.pageNum = 1;
  getList();
};

// 分页
const handlePageChange = (newPage) => {
  queryParams.pageNum = newPage;
  getList();
};

const handleSizeChange = (newSize) => {
  queryParams.pageSize = newSize;
  queryParams.pageNum = 1;
  getList();
};

// 行点击事件（打开详情弹窗）
const handleRowClick = (row) => {
  detailDevice.value = { ...row };
  detailDialogOpen.value = true;
};

// 设备类型映射
const mapDeviceType = (type) => {
  return {
    'CONTROLLER': '控制器',
    'SENSOR': '传感器',
    'ACTUATOR': '执行器',
    'BROADCASTER': '广播设备',
    'MONITOR': '监控设备',
    'ALARM': '报警设备',
    'INPUT': '输入设备',
  }[type] || type;
};

getList()
</script>

<style scoped>
.filter-card {
  margin-bottom: 20px;
  padding: 20px;
}

.data-table {
  min-height: 500px;
}

.small-text {
  font-size: 12px;
  color: #909399;
}

.mt-2 {
  margin-top: 8px;
}
</style>
