<template>
  <el-dialog v-model="dialogVisible" title="1" width="50%">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      class="instance-form"
    >
      <el-row :gutter="24">
        <!-- 第1行 -->
        <el-col :span="12">
          <el-form-item label="实例唯一标识" prop="instanceId">
            <el-input v-model="formData.instanceId" disabled placeholder="自动生成" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属用户" prop="userId">
            <el-select v-model="formData.userId" placeholder="请选择所属用户" style="width: 100%">
              <el-option label="用户A" value="1" />
              <el-option label="用户B" value="2" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 第2行 -->
        <el-col :span="12">
          <el-form-item label="所属订单" prop="orderId">
            <el-select v-model="formData.orderId" placeholder="请选择所属订单" style="width: 100%">
              <el-option label="订单A" value="1" />
              <el-option label="订单B" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实例名称" prop="instanceName">
            <el-input v-model="formData.instanceName" placeholder="请输入实例名称" />
          </el-form-item>
        </el-col>

        <!-- 第3行 -->
        <el-col :span="12">
          <el-form-item label="实例类型" prop="instanceType">
            <el-input v-model="formData.instanceType" placeholder="请输入实例类型" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="无数据超时时间" prop="noDataTimeout">
            <el-input v-model="formData.noDataTimeout" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <!-- 第4行：状态与开关组 -->
        <el-col :span="12">
          <el-form-item label="实例状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :value="1">正常</el-radio>
              <el-radio :value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 这里使用 flex 布局让三个开关并排 -->
          <div class="switch-group">
            <el-form-item label="无心跳通讯" prop="noHeartbeat">
              <el-switch v-model="formData.noHeartbeat" />
            </el-form-item>
            <el-form-item label="是否启用LTS" prop="enableLts">
              <el-switch v-model="formData.enableLts" />
            </el-form-item>
            <el-form-item label="断线自动重连" prop="autoReconnect">
              <el-switch v-model="formData.autoReconnect" />
            </el-form-item>
          </div>
        </el-col>

        <!-- 第5行 -->
        <el-col :span="12">
          <el-form-item label="限制单连接流量每秒NKBps" prop="flowLimit">
            <el-input v-model="formData.flowLimit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限制单连接每秒发送包数" prop="packetLimit">
            <el-input v-model="formData.packetLimit" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <!-- 第6行 -->
        <el-col :span="12">
          <el-form-item label="客户端最大并发数" prop="maxConcurrency">
            <el-input v-model="formData.maxConcurrency" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" class="is-gradient" @click="handleSubmit">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import type { FormInstance, FormRules } from 'element-plus'
  const dialogVisible = defineModel<boolean>('visible', {
    default: false,
  })
  const formRef = ref<FormInstance>()

  const formData = reactive({
    instanceId: '',
    userId: '',
    orderId: '',
    instanceName: '',
    instanceType: '',
    noDataTimeout: '',
    status: 1, // 1:正常 0:禁用
    noHeartbeat: true,
    enableLts: false,
    autoReconnect: true,
    flowLimit: '',
    packetLimit: '',
    maxConcurrency: '',
    remark: '',
  })

  const rules = reactive<FormRules>({
    userId: [{ required: true, message: '请选择所属用户', trigger: 'change' }],
    orderId: [{ required: true, message: '请选择所属订单', trigger: 'change' }],
    instanceName: [{ required: true, message: '请输入实例名称', trigger: 'blur' }],
  })

  const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid, fields) => {
      if (valid) {
        console.log('提交的数据：', formData)
        dialogVisible.value = false
      } else {
        console.log('校验失败：', fields)
      }
    })
  }
</script>
<style lang="scss" scoped>
  .switch-group {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    /* 让组内的 form-item 占满剩余空间 */
    :deep(.el-form-item) {
      flex: 1;
      margin-bottom: 0; // 消除多余的底部边距
    }
  }
</style>
