<!-- 设备组态页面 -->
<!-- 文件路径: src/views/device/configuration/index.vue -->
<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="85px">
      <el-form-item label="设备编码" prop="deviceCode">
        <el-input
            v-model="queryParams.deviceCode"
            placeholder="请输入设备编码"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
            v-model="queryParams.deviceName"
            placeholder="请输入设备名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="子系统类型" prop="subsystemType">
        <el-select v-model="queryParams.subsystemType" placeholder="请选择子系统类型" clearable style="width: 150px" >
          <el-option label="暖通空调" value="hvac"/>
          <el-option label="新风系统" value="fresh_air"/>
          <el-option label="冷热源系统" value="cooling_heating"/>
          <el-option label="水系统" value="water_system"/>
          <el-option label="电梯系统" value="elevator"/>
          <el-option label="配电系统" value="power_distribution"/>
          <el-option label="照明系统" value="lighting"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择设备状态" clearable style="width: 150px">
          <el-option label="正常" value="1"/>
          <el-option label="故障" value="2"/>
          <el-option label="离线" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 设备列表 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备编码" align="center" prop="deviceCode" width="160"/>
      <el-table-column label="设备名称" align="center" prop="deviceName" width="150"/>
      <el-table-column label="子系统类型" align="center" prop="subsystemType" width="160">
        <template #default="scope">
          <dict-tag :options="subsystem_type_options" :value="scope.row.subsystemType"/>
        </template>
      </el-table-column>
      <el-table-column label="所属空间" align="center" prop="spaceName" width="160"/>
      <el-table-column label="设备状态" align="center" prop="status" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : scope.row.status === '2' ? 'danger' : 'info'">
            {{ scope.row.status === '1' ? '正常' : scope.row.status === '2' ? '故障' : '离线' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" align="center" prop="isOnline" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isOnline ? 'success' : 'danger'">
            {{ scope.row.isOnline ? '在线' : '离线' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="告警数量" align="center" prop="alarmCount" width="100">
        <template #default="scope">
          <el-badge :value="scope.row.alarmCount" :type="scope.row.alarmCount > 0 ? 'danger' : 'success'">
<!--            <span>{{ scope.row.alarmCount }}</span>-->
          </el-badge>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200" fixed="right" align="center">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="handleConfiguration(scope.row)">组态图</el-button>
          <el-button link type="primary" icon="Monitor" @click="handleMonitor(scope.row)">监控</el-button>
          <el-button link type="primary" icon="Operation" @click="handleControl(scope.row)">控制</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 设备组态图和监控对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="80%" append-to-body>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 组态图 -->
        <el-tab-pane label="组态图" name="configuration">
          <div class="configuration-container">
            <div class="device-info">
              <el-descriptions :column="4" border>
                <el-descriptions-item label="设备编码">{{currentDevice.deviceCode}}</el-descriptions-item>
                <el-descriptions-item label="设备名称">{{currentDevice.deviceName}}</el-descriptions-item>
                <el-descriptions-item label="子系统类型">
                  <dict-tag :options="subsystem_type_options" :value="currentDevice.subsystemType"/>
                </el-descriptions-item>
                <el-descriptions-item label="设备状态">
                  <el-tag :type="currentDevice.status === '1' ? 'success' : currentDevice.status === '2' ? 'danger' : 'info'">
                    {{ currentDevice.status === '1' ? '正常' : currentDevice.status === '2' ? '故障' : '离线' }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <!-- 组态图展示区域 -->
            <div class="configuration-diagram" style="height: 400px; border: 1px solid #ddd; margin: 20px 0; position: relative; background: #f5f5f5;">
              <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                <el-icon size="64" color="#ccc"><Monitor /></el-icon>
                <p style="color: #999; margin-top: 10px;">组态图加载区域</p>
                <p style="color: #999; font-size: 12px;">实际项目中这里会加载SVG组态图或其他图形组件</p>
              </div>
            </div>

            <!-- 点位列表 -->
            <div class="point-list">
              <el-table :data="pointList" height="300">
                <el-table-column prop="pointCode" label="点位编码" width="120"/>
                <el-table-column prop="pointName" label="点位名称" width="150"/>
                <el-table-column prop="pointType" label="点位类型" width="100">
                  <template #default="scope">
                    <el-tag :type="scope.row.pointType === 'AI' ? 'success' : scope.row.pointType === 'AO' ? 'warning' : scope.row.pointType === 'DI' ? 'info' : 'danger'">
                      {{ scope.row.pointType }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="currentValue" label="当前值" width="100"/>
                <el-table-column prop="unit" label="单位" width="80"/>
                <el-table-column prop="alarmStatus" label="告警状态" width="100">
                  <template #default="scope">
                    <el-tag :type="scope.row.alarmStatus ? 'danger' : 'success'">
                      {{ scope.row.alarmStatus ? '告警' : '正常' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button link type="primary" @click="handlePointDetail(scope.row)">详情</el-button>
                    <el-button link type="primary" @click="handlePointControl(scope.row)" v-if="scope.row.pointType === 'AO' || scope.row.pointType === 'DO'">控制</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>

        <!-- 点位详情 -->
        <el-tab-pane label="点位详情" name="pointDetail">
          <div v-if="currentPoint">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="点位编码">{{currentPoint.pointCode}}</el-descriptions-item>
              <el-descriptions-item label="点位名称">{{currentPoint.pointName}}</el-descriptions-item>
              <el-descriptions-item label="点位类型">{{currentPoint.pointType}}</el-descriptions-item>
              <el-descriptions-item label="当前值">{{currentPoint.currentValue}} {{currentPoint.unit}}</el-descriptions-item>
              <el-descriptions-item label="最小值">{{currentPoint.minValue}}</el-descriptions-item>
              <el-descriptions-item label="最大值">{{currentPoint.maxValue}}</el-descriptions-item>
              <el-descriptions-item label="告警状态">
                <el-tag :type="currentPoint.alarmStatus ? 'danger' : 'success'">
                  {{ currentPoint.alarmStatus ? '告警' : '正常' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">{{currentPoint.updateTime}}</el-descriptions-item>
            </el-descriptions>

            <!-- 趋势图 -->
            <div class="trend-chart" style="margin-top: 20px;">
              <h4>趋势图</h4>
              <div style="height: 300px; border: 1px solid #ddd; background: #f5f5f5; display: flex; align-items: center; justify-content: center;">
                <div style="text-align: center;">
                  <el-icon size="48" color="#ccc"><TrendCharts /></el-icon>
                  <p style="color: #999; margin-top: 10px;">趋势图展示区域</p>
                  <p style="color: #999; font-size: 12px;">实际项目中这里会加载ECharts图表</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 控制指令下发对话框 -->
    <el-dialog title="控制指令下发" v-model="controlVisible" width="500px" append-to-body>
      <el-form ref="controlRef" :model="controlForm" label-width="100px">
        <el-form-item label="点位编码">
          <el-input v-model="controlForm.pointCode" disabled />
        </el-form-item>
        <el-form-item label="点位名称">
          <el-input v-model="controlForm.pointName" disabled />
        </el-form-item>
        <el-form-item label="当前值">
          <el-input v-model="controlForm.currentValue" disabled />
        </el-form-item>
        <el-form-item label="控制值" prop="controlValue" v-if="controlForm.pointType === 'AO'">
          <el-input-number v-model="controlForm.controlValue" :min="controlForm.minValue" :max="controlForm.maxValue" />
        </el-form-item>
        <el-form-item label="控制值" prop="controlValue" v-if="controlForm.pointType === 'DO'">
          <el-radio-group v-model="controlForm.controlValue">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="执行时间">
          <el-date-picker
              v-model="controlForm.executeTime"
              type="datetime"
              placeholder="选择执行时间"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="controlForm.remark" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="controlVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitControl">确认下发</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="DeviceConfiguration">
import { getDeviceConfigurationList, getDevicePoints, sendControlCommand } from "@/api/device/configuration";

const { proxy } = getCurrentInstance();

const deviceList = ref([]);
const pointList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dialogVisible = ref(false);
const controlVisible = ref(false);
const dialogTitle = ref("");
const activeTab = ref('configuration');
const currentDevice = ref({});
const currentPoint = ref({});

// 子系统类型选项
const subsystem_type_options = ref([
  { label: '暖通空调', value: 'hvac' },
  { label: '新风系统', value: 'fresh_air' },
  { label: '冷热源系统', value: 'cooling_heating' },
  { label: '水系统', value: 'water_system' },
  { label: '电梯系统', value: 'elevator' },
  { label: '配电系统', value: 'power_distribution' },
  { label: '照明系统', value: 'lighting' }
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceCode: null,
    deviceName: null,
    subsystemType: null,
    status: null
  },
  controlForm: {
    pointCode: null,
    pointName: null,
    currentValue: null,
    controlValue: null,
    pointType: null,
    minValue: null,
    maxValue: null,
    executeTime: null,
    remark: null
  }
});

const { queryParams, controlForm } = toRefs(data);

/** 查询设备列表 */
function getList() {
  loading.value = true;
  getDeviceConfigurationList(queryParams.value).then(response => {
    deviceList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  // 处理多选
}

/** 查看组态图 */
function handleConfiguration(row) {
  currentDevice.value = row;
  dialogTitle.value = `${row.deviceName} - 设备组态`;
  activeTab.value = 'configuration';
  dialogVisible.value = true;

  // 获取设备点位列表
  getDevicePoints(row.deviceCode).then(response => {
    pointList.value = response.data;
  });
}

/** 设备监控 */
function handleMonitor(row) {
  handleConfiguration(row);
}

/** 设备控制 */
function handleControl(row) {
  handleConfiguration(row);
}

/** 标签页切换 */
function handleTabChange(tab) {
  activeTab.value = tab;
}

/** 点位详情 */
function handlePointDetail(row) {
  currentPoint.value = row;
  activeTab.value = 'pointDetail';
}

/** 点位控制 */
function handlePointControl(row) {
  controlForm.value = {
    pointCode: row.pointCode,
    pointName: row.pointName,
    currentValue: row.currentValue,
    controlValue: row.currentValue,
    pointType: row.pointType,
    minValue: row.minValue,
    maxValue: row.maxValue,
    executeTime: null,
    remark: null
  };
  controlVisible.value = true;
}

/** 提交控制指令 */
function submitControl() {
  sendControlCommand(controlForm.value).then(response => {
    proxy.$modal.msgSuccess("控制指令下发成功");
    controlVisible.value = false;
    // 刷新点位数据
    getDevicePoints(currentDevice.value.deviceCode).then(response => {
      pointList.value = response.data;
    });
  });
}

getList();
</script>

<style scoped>
.configuration-container {
  padding: 10px;
}

.device-info {
  margin-bottom: 20px;
}

.configuration-diagram {
  border-radius: 4px;
}

.point-list {
  margin-top: 20px;
}

.trend-chart {
  margin-top: 20px;
}
</style>