<!--
  组件名称：DoorSim.vue
  组件描述：门口屏模拟页面

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

<template>
  <div class="device-sim-page">
    <div class="page-header">
      <h2>门口屏模拟</h2>
    </div>

    <el-card shadow="never" class="device-card">
      <template #header>
        <span>模拟设备</span>
      </template>
      <DeviceList device-type="door" @device-changed="onDeviceChanged" />
    </el-card>

    <el-card shadow="never" class="log-card">
      <template #header>
        <span>上报记录</span>
      </template>
      <ReportLog :device-id="selectedDeviceId" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DeviceList from '@/components/device/DeviceList.vue'
import ReportLog from '@/components/device/ReportLog.vue'

const selectedDeviceId = ref('')

function onDeviceChanged() {
  // 设备列表变化时刷新
}
</script>

<style scoped>
.device-sim-page {
  padding: 0;
}

.page-header {
  margin-bottom: 16px;
}

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

.device-card {
  margin-bottom: 16px;
}

.log-card {
  margin-bottom: 16px;
}
</style>