<template>
  <el-form label-width="auto" size="default" :model="formData" style="max-width: 100%">
    <el-form-item label="方案加载" label-position="left">
      <el-switch v-model="formData.scheme" />
    </el-form-item>
    <el-row :gutter="24" v-if="formData.scheme">
      <el-col :span="8">
        <el-form-item label="通信设备" label-position="top">
          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="通信超时时间(ms)" label-position="top">
          <el-input v-model="formData.deviceName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="触发字符" label-position="top">
          <el-input v-model="formData.deviceName" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="流程控制" label-position="left">
      <el-switch v-model="formData.process" />
    </el-form-item>
    <el-row :gutter="24" v-if="formData.process">
      <el-col :span="8">
        <el-form-item label="通信设备" label-position="top">
          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="分隔符" label-position="top">
          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="空闲时触发" label-position="top">
          <el-input v-model="formData.targetPort" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="忙碌时触发" label-position="top">
          <el-input v-model="formData.targetPort" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="相机响应配置" label-position="left">
      <el-switch v-model="formData.camera" />
    </el-form-item>
    <el-row :gutter="24" v-if="formData.camera">
      <el-col :span="8">
        <el-form-item label="通信设备" label-position="top">
          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="分隔符" label-position="top">
          <el-select v-model="formData.protocol" placeholder="Select" class="device-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="连接时触发" label-position="top">
          <el-input v-model="formData.targetPort" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="掉线时触发" label-position="top">
          <el-input v-model="formData.targetPort" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { DSButton } from '@/components/Button'
// 接收父组件传入的表单数据（双向绑定）
const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  options: {
    type: Array,
    default: () => []
  }
})
// 暴露表单数据修改事件（可选，用于复杂场景）
const emit = defineEmits(['update:formData'])
</script>

<style scoped lang="scss">
// 复用原有的设备表单样式
.device-select {
  color: #fff;
  :deep(.el-select__wrapper) {
    background: #303136;
    .el-select__selected-item {
      color: #fff;
    }
  }
}
.form-device-btn {
  width: 80px;
  padding: 0 12px;
}
/* 其他设备表单相关样式 */
</style>
