<!--
  组件名称：DoorSim.vue
  组件描述：门口屏模拟页面 - 设备列表 + 实时消息流

  @author czj
  @date 2026-07-29
-->

<template>
  <div class="device-sim-page">
    <div class="page-header">
      <h2>门口屏模拟</h2>
      <div class="header-actions">
        <el-select v-model="currentEnvId" placeholder="选择环境" clearable style="width: 220px" @change="onEnvChange">
          <el-option v-for="env in envConfigs" :key="env.id" :label="`${env.name} (${env.brokerHost})`" :value="env.id">
            <template #default>
              <span>{{ env.name }}</span>
              <el-tag :type="env.status === 'connected' ? 'success' : 'info'" size="small" style="margin-left: 8px">
                {{ env.status === 'connected' ? '已连接' : '未连接' }}
              </el-tag>
            </template>
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-value">{{ total }}</div>
        <div class="stat-label">总设备</div>
      </div>
      <div class="stat-card running">
        <div class="stat-value">{{ runningCount }}</div>
        <div class="stat-label">运行中</div>
      </div>
      <div class="stat-card stopped">
        <div class="stat-value">{{ total - runningCount }}</div>
        <div class="stat-label">已停止</div>
      </div>
    </div>

    <!-- 主体：左侧设备列表 + 右侧消息流 -->
    <div class="main-content">
      <div class="left-panel">
        <DeviceList device-type="door" :env-config-id="currentEnvId" @device-changed="onDeviceChanged" />
      </div>
      <div class="right-panel">
        <div class="panel-title">实时消息流</div>
        <MessageStream device-type="door" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import DeviceList from '@/components/device/DeviceList.vue'
import MessageStream from '@/components/device/MessageStream.vue'
import { listEnvConfigs } from '@/api/deviceSim'
import type { EnvConfig } from '@/types/device'

const envConfigs = ref<EnvConfig[]>([])
const currentEnvId = ref('')
const total = ref(0)
const runningCount = ref(0)

function onEnvChange() {
  // 环境切换时重新加载
}

function onDeviceChanged() {
  // 设备变化时刷新统计
}

onMounted(async () => {
  try {
    const res = await listEnvConfigs({ limit: 100 })
    envConfigs.value = res.items
    if (res.items.length > 0 && !currentEnvId.value) {
      currentEnvId.value = res.items[0].id
    }
  } catch (e: any) {
    ElMessage.error('加载环境配置失败')
  }
})
</script>

<style scoped>
.device-sim-page {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  padding: 16px 20px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
}

.stat-card .stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 4px;
}

.stat-card.running {
  background: #f0f9eb;
}

.stat-card.running .stat-value {
  color: #67c23a;
}

.stat-card.stopped {
  background: #f4f4f5;
}

.stat-card.stopped .stat-value {
  color: #909399;
}

.main-content {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.left-panel {
  flex: 3;
  min-width: 0;
}

.right-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.right-panel :deep(.message-stream) {
  flex: 1;
  min-height: 400px;
}
</style>
