<template>
  <div class="permission-skim content-layer min-h">
    <div class="head" v-if="app_options.length">
      <div class="title">{{$t('select_app')}}：</div>
      <Select v-model="app_key" style="width:200px">
        <Option v-for="app in app_options" :value="app.app_key" :key="app.app_key">{{ app.app_name }}</Option>
    </Select>
      <div class="show-key">{{$t('current_app_key')}}：<span style="font-weight:600">{{app_key}}</span></div>
    </div>
    <div class="search-tips-title" v-else>{{$t('no_app')}}</div>
    <!-- <div class="tips-content" v-if="!tableData.length&&!loading">
      <router-link :to="{name:'applicationList'}">立即创建第一个应用</router-link >
    </div> -->
    <div v-if="!tableData.length&&!loading" class="no-data">
      <router-link :to="{path:'/application/list'}">
      <Button type="primary" ghost size="large">{{$t('create_your_first_new_app')}}</Button>
      </router-link >
    </div>
    <Table :loading="loading" :columns="tableHead" :data="tableData" v-else>
      <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('permitted')}}</span>
        <span v-else>{{$t('not_permitted')}}</span>
      </template>
      <template slot-scope="{row}" slot="product_id">
        <!-- <span v-if="row.is_allow">{{$t('permitted')}}</span>
        <span v-else>{{$t('not_permitted')}}</span> -->
        <!-- <router-link :to="{name:'place',query:{title:row.title,product_id: row.product_id}}"> -->

          <Button :disabled=" row.product_id == 0 " type="primary" @click="goBuy(row)">{{$t('buy_now')}}</Button>
        <!-- </router-link> -->
        <!-- <router-link :to="{name:'place',query:{title:row.title,product_id: row.product_id}}">
          <Button :disabled=" row.product_id == 0 " type="primary" @click="goBuy(row)">立即购买</Button>
        </router-link> -->
      </template>
    </Table>

    <div style="margin: 30px 0px 10px 0px">
      <h2>{{$t('more_product')}}</h2>
    </div>

    <Table :loading="loadingProductMore" :columns="tableHeadProductMore" :data="tableDataProductMore">
      <template slot-scope="{ row }" slot="price" class="operation">
        <p style="color: red;">{{$t('my_order_list_1')}}{{ row.price }}</p>
      </template>
      <template slot-scope="{row}" slot="product_id">
          <Button type="primary" @click="goBuy(row)">{{$t('buy_now')}}</Button>
      </template>
    </Table>
  </div>
</template>

<script>
import { GetAppDropdownList, GetAllAppApis } from '@/api/application'
import { GetProductMoreList } from '@/api/order'
import { mapState } from 'vuex'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      app_key: '',
      app_options: [],
      getList_Opts: {
        access_token: getToken(),
        app_name: ''
      },
      tableHead: [
        {
          title: this.$t('api_feature'),
          key: 'title'
        },
        {
          title: this.$t('api_name'),
          slot: 'service'
        },
        {
          title: this.$t('api_permission_status'),
          slot: 'is_allow'
        },
        {
          title: this.$t('api_set_meal'),
          slot: 'product_id',
          width: '150'
        }
      ],
      tableData: [],
      loading: false,
      // 组合套餐
      tableHeadProductMore: [
        {
          title: this.$t('product_name'),
          key: 'product_name'
        },
        {
          title: this.$t('price'),
          slot: 'price'
        },
        {
          title: this.$t('api_set_meal'),
          slot: 'product_id',
          width: '150'
        }
      ],
      tableDataProductMore: [],
      loadingProductMore: false
    }
  },
  watch: {
    app_key (newvalue, oldvalue) {
      if (newvalue) { this.loading = true }
      this.loading = true
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('app_key', newvalue)
      GetAllAppApis(formdata).then(res => {
        // this.tableData = res.data.apis
        this.$set(this.$data, 'tableData', res.data.apis)
        this.loading = false
      })
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token
    })
  },
  methods: {
    urlStr (row) {
      let url = `/docs.php?service=${row.service}&detail=1&type=fold`
      return url
    },
    getAppList (callback) {
      // 获取app列表
      this.loading = true
      let options = this.getList_Opts
      let formdata = new FormData()
      for (const key in options) {
        if (options[key] !== '') {
          formdata.append(key, options[key])
        }
      }
      GetAppDropdownList(formdata).then(res => {
        this.app_options = res.data
        if (this.app_options.length) {
          this.app_key = this.app_options[0].app_key
        }
        this.loading = false
      })
    },
    goBuy (row) {
      this.$router.push({ name: 'placeAnOrder', query: { product_id: row.product_id } })
    }
  },
  created () {
    this.getAppList()

    this.loadingProductMore = true
    let formdata = new FormData()
    formdata.append('access_token', this.token)
    GetProductMoreList(formdata).then(res => {
      this.$set(this.$data, 'tableDataProductMore', res.data.items)
      this.loadingProductMore = false
    })
  }
}
</script>
<style lang='less'>
.permission-skim{
  .head {
  display: flex;
  .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 31px;
    margin-bottom: 20px;
  }
}
.tips-content {
  width: 100%;
  border-radius: 5px;
  background: #e4ecff;
  padding: 30px 100px;
  color: #9090f6;

  a {
    color: #9090f6;
  }
}
.show-key {
  font-size: 14px;
    /* font-weight: 600; */
    line-height: 30px;
    padding-left: 20px;
}
.search-tips-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.no-data {
  width: 100%;
  height: 150px;
  line-height: 180px;
  text-align: center;
}
}
</style>
