<template>
  <el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
    <div>通信协议</div>
    <el-row :gutter="24">
      <el-col :span="12">
        <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="12">
        <el-form-item label="设备名称" label-position="top">
          <el-input v-model="formData.deviceName" />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他设备表单内容（通信参数、开关等） -->
    <div>通信参数</div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="目标IP" label-position="top">
          <el-input v-model="formData.IP" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <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.dataUpload" />
    </el-form-item>
    <el-form-item label="自动重连" label-position="left">
      <el-switch v-model="formData.reconnect" />
    </el-form-item>
    <el-form-item label="接受结束符" label-position="left">
      <el-switch v-model="formData.acceptEnd" />
    </el-form-item>
    <el-form-item v-if="formData.acceptEnd">
      <el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
        <el-tab-pane label="接收数据" name="receive">
          <el-input
            v-model="formData.endInfo"
            type="textarea"
            resize="none"
            class="fixed-height-textarea"
            :rows="4"
            maxlength="350"
          />
        </el-tab-pane>
        <el-tab-pane label="发送数据" name="send">
          <el-input
            v-model="formData.endInfo"
            type="textarea"
            resize="none"
            class="fixed-height-textarea"
            :rows="4"
            maxlength="350"
          />
        </el-tab-pane>
      </el-tabs>
    </el-form-item>
    <el-row :gutter="20" v-if="formData.acceptEnd">
      <el-col :span="6">
        <el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
      </el-col>
      <el-col :span="6" :offset="12">
        <DSButton type="danger" class="mr-2 form-device-btn">清空内容</DSButton>
        <DSButton type="danger" class="form-device-btn"> 接收数据</DSButton>
      </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 dataTab = ref('receive')
// 暴露表单数据修改事件（可选，用于复杂场景）
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;
    }
  }
}
.data-tabs {
  width: 100%;
  :deep(.el-tabs__item) {
    color: #fff;
  }
  :deep(.fixed-height-textarea) {
    margin-bottom: 8px;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    .el-textarea__inner {
      height: 110px !important;
      background: #303136;
      color: #fff;
    }
  }
}
.form-device-btn {
  width: 80px;
  padding: 0 12px;
}
/* 其他设备表单相关样式 */
</style>
