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

    <!-- 主体：左侧设备列表 + 右侧消息流 -->
    <div class="main-content">
      <div class="left-panel">
        <DeviceList device-type="paperless" @device-changed="onDeviceChanged" />
      </div>
      <div class="right-panel">
        <div class="panel-title">实时消息流</div>
        <MessageStream device-type="paperless" />
      </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('')

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; }
.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>