<!--
  组件名称：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>

    <!-- 设备列表 -->
    <DeviceList device-type="door" :env-config-id="currentEnvId" @device-changed="onDeviceChanged" @env-change="onDeviceEnvChange" />
  </div>
</template>

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

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

async function loadStats() {
  try {
    const stats = await getDeviceStats({ deviceType: 'door', envConfigId: currentEnvId.value || undefined })
    total.value = stats.total
    runningCount.value = stats.running
  } catch (e: any) {
    // 静默失败，不影响设备列表加载
  }
}

function onEnvChange() {
  loadStats()
}

function onDeviceChanged() {
  loadStats()
}

/** DeviceList 内部环境筛选变化时，同步页面顶部环境选择并刷新统计 */
function onDeviceEnvChange(envId: string) {
  currentEnvId.value = envId
  loadStats()
}

onMounted(async () => {
  try {
    const res = await listEnvConfigs({ limit: 100 })
    envConfigs.value = res.items
    // 不自动选中环境，默认不传 envConfigId 查全部设备
  } catch (e: any) {
    ElMessage.error('加载环境配置失败')
  }
  await loadStats()
})
</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;
}
</style>
