<!--
  组件名称：ClientSim.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" :value="env.id" />
        </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="client" :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: 'client', 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>