<template>
  <div class="api-form-container">
    <el-form
      ref="apiFormRef"
      :model="apiForm"
      :rules="formRules"
      label-width="140px"
      size="medium"
    >
      <!-- 1. 基础信息区（新增入参/出参实体生成配置） -->
      <div class="form-section">
        <div class="section-title">基础信息配置</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="请求路径" prop="requestPath">
              <el-input
                v-model="apiForm.requestPath"
                placeholder="例如：/api/user/login"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口类型（厂家）" prop="apiVendor">
              <el-select
                v-model="apiForm.apiVendor"
                placeholder="请选择接口所属厂家"
                clearable
              >
                <el-option label="厂家A" value="vendorA"></el-option>
                <el-option label="厂家B" value="vendorB"></el-option>
                <el-option label="厂家C" value="vendorC"></el-option>
                <el-option label="自定义" value="custom"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否生成入参实体" prop="isGenRequest">
              <el-select
                v-model="apiForm.isGenRequest"
                placeholder="请选择"
                clearable
              >
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否生成出参实体" prop="isGenResponse">
              <el-select
                v-model="apiForm.isGenResponse"
                placeholder="请选择"
                clearable
              >
                <el-option label="是" value="true"></el-option>
                <el-option label="否" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="接口说明" prop="apiDesc">
              <!-- 可拖拽调节的文本域 row:  缩小默认行数 resize:支持左右/上下拖拽调节 -->
              <el-input
                v-model="apiForm.apiDesc"
                type="textarea"
                :rows="2"
                placeholder="请输入接口的详细说明"
                clearable
                resize="both"
                class="resize-textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="当前接口备注">
              <el-input
                v-model="apiForm.apiRemark"
                type="textarea"
                :rows="2"
                placeholder="请输入接口的额外备注信息"
                clearable
                resize="both"
                class="resize-textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 2. 入参配置区（移除生成入参实体列） -->
      <div class="form-section">
        <div class="section-header">
          <div class="section-title">入参配置</div>
          <el-button
            type="primary"
            size="small"
            class="operate-btn"
            @click="addRequestParam"
          >
            添加入参
          </el-button>
        </div>

        <el-table
          :data="apiForm.requestParams"
          border
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          class="auto-fit-table"
        >
          <el-table-column label="参数名" prop="paramName">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.paramName"
                placeholder="请输入参数名"
                size="small"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="是否必选" prop="required" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.required"
                active-text="是"
                inactive-text="否"
                size="small"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="参数类型" prop="paramType">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.paramType"
                placeholder="请选择"
                size="small"
              >
                <el-option label="String" value="String"></el-option>
                <el-option label="Integer" value="Integer"></el-option>
                <el-option label="Long" value="Long"></el-option>
                <el-option label="Boolean" value="Boolean"></el-option>
                <el-option label="Double" value="Double"></el-option>
                <el-option label="Date" value="Date"></el-option>
                <el-option label="List<String>" value="List<String>"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="参数说明" prop="paramDesc">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.paramDesc"
                placeholder="请输入参数说明"
                size="small"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="deleteRequestParam(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 3. 出参配置区（移除生成出参实体列） -->
      <div class="form-section">
        <div class="section-header">
          <div class="section-title">出参配置</div>
          <el-button
            type="primary"
            size="small"
            class="operate-btn"
            @click="addResponseParam"
          >
            添加出参
          </el-button>
        </div>

        <el-table
          :data="apiForm.responseParams"
          border
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          class="auto-fit-table"
        >
          <el-table-column label="参数名" prop="paramName">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.paramName"
                placeholder="请输入参数名"
                size="small"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="参数类型" prop="paramType">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.paramType"
                placeholder="请选择"
                size="small"
              >
                <el-option label="String" value="String"></el-option>
                <el-option label="Integer" value="Integer"></el-option>
                <el-option label="Long" value="Long"></el-option>
                <el-option label="Boolean" value="Boolean"></el-option>
                <el-option label="Double" value="Double"></el-option>
                <el-option label="Date" value="Date"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="参数注释" prop="paramComment">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.paramComment"
                placeholder="请输入参数注释"
                size="small"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="deleteResponseParam(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 提交按钮（居中展示） -->
      <el-form-item class="submit-btn-group">
        <el-button type="primary" @click="submitForm">提交配置</el-button>
        <el-button @click="resetForm">重置表单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ApiConfigForm',
  data() {
    return {
      apiForm: {
        requestPath: '',
        apiVendor: '',
        // 新增入参/出参实体生成配置字段
        isGenRequest: '',
        isGenResponse: '',
        apiDesc: '',
        apiRemark: '',
        requestParams: [],
        responseParams: []
      },
      formRules: {
        requestPath: [
          { required: true, message: '请输入请求路径', trigger: 'blur' },
        ],
        apiVendor: [
          { required: true, message: '请选择接口所属厂家', trigger: 'change' }
        ],
        apiDesc: [
          { required: true, message: '请输入接口说明', trigger: 'blur' }
        ],
        // 新增下拉框校验规则
        isGenRequest: [
          { required: true, message: '请选择是否生成入参实体', trigger: 'change' }
        ],
        isGenResponse: [
          { required: true, message: '请选择是否生成出参实体', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    addRequestParam() {
      this.apiForm.requestParams.push({
        paramName: '',
        required: false,
        paramType: 'String',
        paramDesc: '',
        // 移除genRequestEntity字段
      })
    },
    deleteRequestParam(index) {
      this.apiForm.requestParams.splice(index, 1)
    },
    addResponseParam() {
      this.apiForm.responseParams.push({
        paramName: '',
        paramType: 'String',
        paramComment: '',
        // 移除genResponseEntity字段
      })
    },
    deleteResponseParam(index) {
      this.apiForm.responseParams.splice(index, 1)
    },
    async submitForm() {
      try {
        const valid = await this.$refs.apiFormRef.validate()
        if (!valid) return
        console.log('表单提交数据：', JSON.stringify(this.apiForm, null, 2))
        this.$message({
          type: 'success',
          message: '接口配置提交成功！'
        })
      } catch (error) {
        console.error('提交失败：', error)
        this.$message({
          type: 'error',
          message: '接口配置提交失败，请重试！'
        })
      }
    },
    resetForm() {
      this.$refs.apiFormRef.resetFields()
      this.apiForm.requestParams = []
      this.apiForm.responseParams = []
      this.$message({
        type: 'info',
        message: '表单已重置'
      })
    }
  }
}
</script>

<style scoped>
/* 限制最大宽度，缩小整体窗口 */
.api-form-container {
  max-width: 700px;  /* 缩小最大窗口宽度 */
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  /* 对话框内容容器 - 核心滚动配置 */
  max-height: 70vh; /* 设置最大高度为视口高度的70%，适配不同屏幕 */
  height: 100%;
  overflow-y: auto; /* 垂直方向超出滚动 */
  overflow-x: hidden; /* 水平方向隐藏，避免横向滚动 */
  padding: 20px;

}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
}
.form-section:first-child {
  padding-bottom: 0;
}
.form-section:last-child {
  border-bottom: none;
}

/* 标题+按钮同行布局 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 15px;
}

.operate-btn {
  margin: 0;  /* 清除默认margin */
}

/* 可拖拽调节的文本域样式 */
.resize-textarea {
  resize: both;
  max-height: 150px;  /* 限制文本域最大高度 */
  min-height: 60px;   /* 限制文本域最小高度 */
}

/* 表格列宽自适应 */
.auto-fit-table {
  width: 100%;
}

.auto-fit-table /deep/ .el-table__header-wrapper,
.auto-fit-table /deep/ .el-table__body-wrapper {
  width: 100%;
}

.auto-fit-table /deep/ .el-table-column {
  width: auto !important;
}


.submit-btn-group .el-button {
  margin: 0 20px;
}
</style>
