<template>
  <div>
    <div class="head">
      <p style="margin-left:30px;">{{$t('application')}}：</p>
      <Input clearable v-model="app_key" :placeholder="$t('enter_app_key')" style="width:300px; margin-right: 10px"/>
      <div>
        <Button type="primary" @click="query">{{$t('search')}}</Button>
      </div>
    </div>
    <Table class="head__tab" :loading="loading" border :columns="tableHead" :data="tableData" v-if="tableData.length || loading">
      <template slot-scope="{row}" slot="service" >
        <a :href="urlStr(row)" target="blank">{{row.service}}</a>
        <!-- <span>{{row.service}}</span> -->
      </template>
      <template slot-scope="{row}" slot="is_allow">
        <span v-if="row.is_allow">{{ $t('obtain') }}</span>
        <span v-else>{{ $t('not_obtain') }}</span>
      </template>
    </Table>
    <Tag class="tips-content" v-else><div class="tips-content">tips：{{ $t('enter_app_key_search') }}</div></Tag>
  </div>
</template>

<script>
import { GetDevAppApis } from '@/api/port'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      tipsShow: true,
      app_key: '',
      token: getToken(),
      tableHead: [
        {
          title: this.$t('api_feature'),
          key: 'title'
        },
        {
          title: this.$t('api_name'),
          slot: 'service'
        },
        {
          title: this.$t('permission_status'),
          slot: 'is_allow'
        }
      ],
      tableData: [],
      loading: false
    }
  },
  created () {
    // this.query()
  },
  methods: {
    // handleClose () {
    //   this.tipsShow = false
    // },
    urlStr (row) {
      let url = `/docs.php?service=${row.service}&detail=1&type=fold`
      return url
    },
    query () {
      this.loading = true
      // this.tipsShow = true
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('app_key', this.app_key)
      GetDevAppApis(formdata).then(res => {
        // this.tableData = res.data.apis
        if (res.ret === 200) {
          this.$set(this.$data, 'tableData', res.data.apis)
        } else {
          this.tableData = []
          this.$Message.info('你搜索的应用不存在')
        }
        this.loading = false
      })
    }
  }
}
</script>
<style lang='less'>
.head {
  height:72px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
  border-radius:10px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  &__tab{
    background: #fff;
    border-radius: 10px;
    max-width:2000px;
    min-width:1000px
  }
}
.tips-title {
  font-size: 16px;
  font-weight: 600;
}
.tips-content {
  position: relative;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  color: #9090f6;
  overflow: inherit;
  height: inherit;
  .ivu-icon-ios-close {
    position: absolute;
    right: 5px;
    top: 5px;
  }
  .tips-content {
    padding: 30px 60px;
  }
}
</style>
