<!--
  组件名称：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">
          <el-option v-for="env in envConfigs" :key="env.id" :label="env.name" :value="env.id" />
        </el-select>
      </div>
    </div>

    <!-- 设备列表 -->
    <DeviceList device-type="client" @device-changed="onDeviceChanged" />
  </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 } from '@/api/deviceSim'
import type { EnvConfig } from '@/types/device'

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

function onDeviceChanged() {}

onMounted(async () => {
  try {
    const res = await listEnvConfigs({ limit: 100 })
    envConfigs.value = res.items
    if (res.items.length > 0) 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; }
</style>