<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar>
      <el-col :span="10" :offset="14" class="search-box-r tool-search-box-r">
        <el-input v-model="filterText" placeholder="请输入接口名称查找" @keyup.enter.native="searchClickHandlder" class="search-bar-algin-toolbar"></el-input>
            <span class="search-icon"><i class="fa fa-search" title="查询" @click="searchClickHandlder"></i></span>
      </el-col>
    </el-toolbar>

    <el-table :data="apiList" ref="apiList" v-loading="dataLoading">
      <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
      <el-table-column label="接口名称">
        <template slot-scope="scope">
          <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row)">{{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column  prop="ID" label="ID"></el-table-column>
      <el-table-column prop="plugin" label="来源插件"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: false,
      filterText: '',
      apiList: [],
      apiListTemp: []
    }
  },
  methods: {
    gotoDetailPage (row) {
      if (row.ID === -1) {
        return
      }
      this.$router.push({path: `/platform/api/${row.ID}`})
    },
    searchClickHandlder () {
      if (this.filterText !== '') {
        this.apiList = this.apiListTemp.filter(val => val.name.indexOf(this.filterText) !== -1)
      } else {
        this.apiList = this.apiListTemp
      }
    },
    async getApisList() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get('/ui/apis')
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dataLoading = false
      if (res.data.status === 1) {
        this.apiList = res.data.data
      }
      this.apiListTemp = this.apiList
    }
  },
  created() {
    this.getApisList()
  }
}
</script>

<style scoped>
  .padding-top-bottom.scroll {
    padding: 10px 0;
  }

  .pane-wrap {
    padding: 0 15px 15px;
  }

  .info-item {
    line-height: 2;
    margin-bottom: 0.5em;
    font-size: 13px;
  }

  .info-item .info-label {
    display: inline-block;
    text-align: right;
    width: 100px;
  }
</style>
