<template>
  <div class="system-config">
    <a-row :gutter="[24, 24]">
      <!-- 左侧配置区域 -->
      <a-col :xs="24" :lg="11">
        <!-- 连接配置 - 使用Tab组件 -->
        <a-card class="mb-6">
          <a-tabs default-active-key="1">
            <a-tab-pane tab="串口配置" key="1">
              <SerialConfig />
            </a-tab-pane>
            <a-tab-pane tab="MQTT配置" key="2">
              <MQTTConfig />
            </a-tab-pane>
            <a-tab-pane tab="DTU配置" key="3">
              <DTUConfig />
            </a-tab-pane>
          </a-tabs>
        </a-card>
        
        <!-- 转发设置 -->
        <a-card title="转发设置">
          <ForwardConfig />
        </a-card>
      </a-col>

      <!-- 右侧监控区域 -->
      <a-col :xs="24" :lg="13">
        <a-card title="数据监控">
          <a-space direction="vertical" style="width: 100%">
            <SerialDataDisplay />
            <MQTTDataDisplay />
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import SerialConfig from '../components/SerialConfig.vue'
import MQTTConfig from '../components/MQTTConfig.vue'
import DTUConfig from '../components/DTUConfig.vue'
import ForwardConfig from '../components/ForwardConfig.vue'
import SerialDataDisplay from '../components/SerialDataDisplay.vue'
import MQTTDataDisplay from '../components/MQTTDataDisplay.vue'
</script>

<style scoped>
.system-config {
  width: 100%;
}

.mb-6 {
  margin-bottom: 24px;
}
</style>