<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>

  <el-container class="detail-container">

    <el-form label-width="200px" label-position="right" class="create-form-outline-full-screen"  :class="readonly?'readonly':''"    :model="interfaceInfo"    ref="interfaceInfo" >

        <el-form-item label="接口名称" prop="interfaceName"  :rules="[{ required: true, message: '接口名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
          <el-input   class="normal-width"  :disabled="readonly"  v-model="interfaceInfo.interfaceName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="请求方式" prop="methodId"  :rules="[{ required: true, message: '请求方式不能为空', trigger: 'change'  }]">
          <el-select   class="normal-width"  :disabled="readonly"  v-model="interfaceInfo.methodId" placeholder="请选择" filterable>
            <el-option
              v-for="item in methodOptions"
              :key="item.methodId"
              :label="item.methodName"
              :value="item.methodId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口分类"  prop="projectId"  :rules="[{ required: true, message: '接口分类不能为空', trigger: 'change'  }]">
          <el-select   class="normal-width"  :disabled="readonly"  v-model="interfaceInfo.projectId" placeholder="请选择" filterable>
            <el-option
              v-for="item in typeOptions"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口URL" prop="interfaceUrl"  :rules="[{ required: true, message: '接口URL不能为空', trigger: 'blur'  }]">
          <el-input   class="normal-width" :disabled="readonly"  v-model="interfaceInfo.interfaceUrl" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="接口入参" prop="paramInput">
          <el-table :data="interfaceInfo.paramInput" border class="return-width">
            <el-table-column label="参数名（K）" width="375">
              <template slot-scope="scope">
                <el-input  class="param-width" :disabled="readonly" v-model="scope.row.paramKey" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="默认值（V）"width="373">
              <template slot-scope="scope">
                <el-input  class="param-width" :disabled="readonly" v-model="scope.row.paramValue" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作"width="50">
              <template slot-scope="scope">
                <i class="el-icon-delete el-icon-delNode"  @click="paramDelete(scope.$index, scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" circle @click="addParameter()">
            <i class="el-icon-plus el-icon-add"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTestConnection" >测试连接</el-button>
        </el-form-item>
        <el-form-item label="返回参数">
          <el-input type="textarea"  class="return-width"  :disabled="readonly"  v-model="interfaceInfo.interfaceReturn" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="接口出参" prop="paramOut">
          <el-table :data="interfaceInfo.paramOut" border  class="return-width">
            <el-table-column label="节点名称" width="250">
              <template slot-scope="scope">
                <el-input  class="param-width" :disabled="readonly" v-model="scope.row.nodeName" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="节点地址"width="250">
              <template slot-scope="scope">
                <el-input  class="param-width" :disabled="readonly" v-model="scope.row.nodeSite" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="节点描述"width="248">
              <template slot-scope="scope">
                <el-input  class="param-width" type="textarea" autosize :disabled="readonly" v-model="scope.row.nodeDesc" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作"width="50">
              <template slot-scope="scope">
                <i class="el-icon-delete el-icon-delNode" @click="resultDelete(scope.$index, scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" circle @click="addResult()">
            <i class="el-icon-plus el-icon-add"></i>
          </el-button>
        </el-form-item>
        <el-form-item>
            <!-- <el-button type="primary" @click="getTestConnection" >测试连接</el-button> -->
            <el-button type="primary" @click="add"  v-show="dialogState==0"  >确定</el-button>
            <el-button type="primary" @click="update"  v-show="dialogState==2"  >确定</el-button>
            <el-button   @click="goBack">取消并返回</el-button>
        </el-form-item>

    </el-form>
  </el-container>
</el-main>








