<template>
  <div class="app-list content-layer min-h">
    <div class="list-head">
      <p>{{$t('my_applications')}}</p>
      <i-button style="float:right" type="primary" @click="handleAddApp">{{$t('create_app')}}</i-button>
    </div>
    <Table :loading="loading" border :columns="columnsList" :data="dataList" v-if="dataList.length&&!loading">
      <template slot-scope="{ row }" slot="app_icon">
        <img :src="row.app_icon" class="row-img" v-if="row.app_icon&&row.app_icon!=='null'">
        <div v-else style="color:#888">{{$t('unset')}}</div>
      </template>
      <template slot-scope="{ row }" slot="app_status">
        {{row.app_status===1?$t('working'):$t('canceled')}}
      </template>
      <template slot-scope="{ row }" slot="verify_status">
        {{row.verify_status===1?$t('passed'):row.verify_status===0?$t('to_be_reviewed'):$t('not_passed')}}
      </template>
        <template slot-scope="{ row }" slot="operation" class="operation">
            <Button type="primary" ghost size="small" class="operation__btn" style="" @click="showAppSecret(row.app_secret)">{{$t('check_app_key')}}</Button>
            <Button type="primary" size="small" v-if="row.verify_status!==1&&row.app_status===1" class="operation__btn" style="" @click="editRow(row)">{{$t('edit')}}</Button>
            <Button type="error" size="small" class="operation__btn" style="" @click="cancelApp(row.app_key)" v-if="row.app_status===1">{{$t('cancel_app')}}</Button>
            <Button size="small" disabled v-else>{{$t('canceled_app')}}</Button>
        </template>
    </Table>
    <div v-if="!dataList.length&&!loading" class="no-data">
      <Button type="primary" ghost size="large" @click="handleAddApp">{{$t('create_your_first_new_app')}}</Button>
    </div>
    <!-- <div class="pagination">
      <Page :total="total" show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div> -->
    <addApp @updated="queryList()" :edit_obj="edit_obj" :apply_account_left="apply_account_left" ref="addAppModal"></addApp>
  </div>
</template>

<script>
import { GetAppList, CancelApp, GetAppInfo } from '@/api/application'
import { getToken, i18n } from '@/libs/util'
import addApp from './add.vue'
export default {
  name: 'directive_page',
  components: {
    addApp
  },
  data () {
    return {
      edit_obj: {},
      apply_account_left: 0,
      loading: false,
      token: getToken(),
      openApp: this.$t('Whether_to_open_the_current_application'),
      closeApp: this.$t('Whether_to_disable_the_current_application'),
      disaStatus: true,
      keyword: '',
      total: 0,
      page: 1, // 分页
      perpage: 10,
      columnsList: [
        {
          title: this.$t('app_icon'),
          slot: 'app_icon',
          align: 'center'
        },
        {
          title: this.$t('app_name'),
          key: 'app_name',
          align: 'center'
        },
        {
          title: this.$t('app_owner'),
          key: 'app_owner',
          align: 'center'
        },
        {
          title: this.$t('app_key'),
          key: 'app_key',
          align: 'center',
          width: 280
        },
        {
          title: this.$t('app_status'),
          slot: 'app_status',
          align: 'center'
        },
        {
          title: this.$t('verify_status'),
          slot: 'verify_status',
          align: 'center'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          width: 260,
          align: 'center'
        }
      ],
      dataList: [],
      statusArr: [this.$t('enable'), this.$t('disable')]
    }
  },
  // 获取应用管理数据
  created () {
    this.loading = true
    this.queryList()
  },
  methods: {
    // i18n,
    // 创建应用
    handleAddApp () {
      this.$refs.addAppModal.show()
    },
    editRow (row) {
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('app_key', row.app_key)
      GetAppInfo(formdata).then(res => {
        this.edit_obj = res.data.info
        this.$refs.addAppModal.show()
      })
    },
    // 查询列表
    queryList () {
      this.loading = true
      const data = new FormData()
      if (this.keyword) {
        data.append('app_name', this.keyword)
      }
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      data.append('access_token', this.token)
      GetAppList(data).then(res => {
        if (res.ret === 200) {
          this.dataList = res.data.list
          this.loading = false
          this.apply_account_left = res.data.left_num
        }
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    showAppSecret (secret) {
      this.$Modal.info({
        title: this.$i18n.tc('app_secret'),
        content: `<p style="overflow-wrap: break-word;
    margin: 20px 20px 0 0;">${secret}</p>`
      })
    },
    cancelApp (app_key) {
      let that = this
      this.$Modal.confirm({
        title: this.$i18n.tc('operation_confirm'),
        content: this.$i18n.tc('Whether_to_disable_the_current_application'),
        onOk () {
          let formdata = new FormData()
          formdata.append('access_token', that.token)
          formdata.append('cancel_app_key', app_key)
          CancelApp(formdata).then(res => {
            if (res.ret === 200) {
              that.$Message.success(that.$t('successfully_canceled') + '!')
              that.queryList()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.queryKeyWord{
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  &__input{
    margin-right:40px;
  }
}

.pagination {
  height: 180px;
  padding: 50px 0 50px 50px;
}

.operation{
  &__btn{
    margin: 0 5px;
  }
}
.list-head {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  margin-bottom: 20px;

  p {
    font-size: 18px;
  }
}
.no-data {
  width: 100%;
  height: 150px;
  line-height: 180px;
  text-align: center;
}
.row-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  padding: 8px;
}
</style>
