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

  <!--下面是搜索条件-->
  <el-form label-position="right" class="simple-search-form-outline" inline >

    <el-form-item label="请求方式">
      <el-select v-model="searchForm.methodName" placeholder="请选择" clearable filterable >
        <el-option
        v-for="item in reqOptions"
        :key="item.methodId"
        :label="item.methodName"
        :value="item.methodId">
      </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="接口分类">
      <el-select v-model="searchForm.projectName" placeholder="请选择" clearable 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="状态">
      <el-select v-model="searchForm.status" placeholder="请选择" clearable filterable >
        <el-option
          v-for="item in statusOption"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="getList">查询</el-button>
  </el-form-item>

  </el-form>

  <!--主列表数据-->
  <div class="table-container">
    <div class="button-container">
      <div >
        <el-button type="primary" @click="go('interfaceAdd')">新建</el-button>
      </div>
    </div>
    <table-component @search="search" :tableOption="tableOption" :tableData="tableData" :pageParam="pageParam" @action="action" @selectChange="selectChange"></table-component>
  </div>
  <el-dialog title="测试结果查看" :visible.sync="testDataVisible">
    <div class="el-test-dlg" v-html="testReturnData">

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="testDataVisible = false">取 消</el-button>
      <el-button type="primary" @click="testDataVisible = false">确定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="接口信息查看" :visible.sync="interfaceVisible">
    <div class="el-test-dlg">
      <ul class="el-interface-info">
        <li v-for="item in labelInfo">
          <label>{{item.name}}</label><span>{{item.value}}</span> 
        </li>
      </ul>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="interfaceVisible = false">取 消</el-button>
      <el-button type="primary" @click="interfaceVisible = false">确定</el-button>
    </div>
  </el-dialog>
</el-main>
