<template>
  <div>
    <div class="queryKeyWord">
      <p style="margin-left:30px;">{{$t('app_name')}}：</p>
      <Input class="queryKeyWord__input" clearable v-model="keyword" :placeholder="$t('search_application_name')" style="width: 200px" />
      <p>{{$t('app_key')}}：</p>
      <Input class="queryKeyWord__input" clearable v-model="keywordKey" :placeholder="$t('search_application_app_key')" style="width: 200px" />
      <p>{{$t('verify_status')}}：</p>
      <Select v-model="auditStatus" clearable style="width:150px;margin-right:30px;">
        <Option v-for="item in auditStatusArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <i-button type="primary" @click="search">{{$t('search')}}</i-button>
    </div>
    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
        <template slot-scope="{ row }" slot="app_key" class="operation">
          <p>{{ row.app_key }}</p>
        </template>
        <template slot-scope="{ row }" slot="appIcon" class="operation">
          <img style="width:50px;" :src="row.app_icon" alt="">
        </template>
        <template slot-scope="{ row }" slot="limit" class="operation">
          <span v-if="row.app_limit === 0">{{$t('unlimited')}}</span>
          <span v-else> {{ row.app_limit }} </span>
        </template>
        <template slot-scope="{ row }" slot="verify_status" class="operation">
          <div v-if="row.verify_status === 0">
            <Button type="primary" size="small" class="operation__btn" style="" @click="VerifyAppStatOk(row)">{{$t('pass')}}</Button>
            <Button type="error" size="small" class="operation__btn" style=""  @click="VerifyAppStatOn(row)">{{$t('reject')}}</Button>
          </div>
          <span v-if="row.verify_status === 1">{{$t('passed')}}</span>
          <span v-if="row.verify_status === 2">{{$t('not_passed')}}</span>
        </template>
        <template slot-scope="{ row,index }" slot="operation" class="operation">
            <router-link :to="{name:'appUpdate',query:{name:row.app_name,id:row.id}}" >
              <Button type="primary" size="small" class="operation__btn">{{$t('edit')}}</Button>
            </router-link>
            <!-- <Button type="primary" size="small" class="operation__btn" style="" @click="showAppSecret(row.id)">查看密钥</Button> -->
            <Button type="success" size="small" class="operation__btn" style="" v-if="row.app_status === 0" @click="show(index)">{{ statusArr[0] }}</Button>
            <Button class="ivu-btn ivu-btn-error ivu-btn-small operation__btn" type="text" size="small" style="" v-else @click="show(index)">{{ statusArr[1] }}</Button>
        </template>
    </Table>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>
  </div>
</template>

<script>
import { GetAppList, AlterAppStat, VerifyAppStat } from '@/api/application'
import { getToken } from '@/libs/util'
export default {
  name: 'directive_page',
  data () {
    return {
      disabledTab: false,
      token: getToken(),
      openApp: this.$t('Whether_to_open_the_current_application'),
      closeApp: this.$t('Whether_to_disable_the_current_application'),
      disaStatus: true,
      keyword: '',
      keywordKey: '',
      total: 0,
      page: 1, // 分页
      perpage: 10,
      auditStatus: '',
      auditStatusArr: [
        {
          value: '0',
          label: this.$t('to_be_reviewed')
        },
        {
          value: '1',
          label: this.$t('passed')
        },
        {
          value: '2',
          label: this.$t('not_passed')
        }
      ],
      columnsList: [
        {
          title: this.$t('app_key'),
          key: 'app_key',
          slot: 'app_key',
          align: 'center'
        },
        {
          title: this.$t('app_icon'),
          key: 'app_icon',
          align: 'center',
          slot: 'appIcon',
          width: '120'
        },
        {
          title: this.$t('app_name'),
          key: 'app_name',
          align: 'center'
        },
        {
          title: this.$t('developers'),
          key: 'uidName',
          align: 'center'
        },
        {
          title: this.$t('today_times'),
          key: 'today_request',
          align: 'center'
        },
        {
          title: this.$t('times_limited'),
          key: 'app_limit',
          align: 'center',
          slot: 'limit'
        },
        {
          title: this.$t('app_owner'),
          key: 'app_owner',
          align: 'center'
        },
        {
          title: this.$t('verify_status'),
          key: 'verify_status',
          align: 'center',
          slot: 'verify_status'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          width: 200,
          align: 'center'
        }
      ],
      dataList: [],
      statusArr: [this.$t('enable'), this.$t('disable')]
    }
  },
  // 获取应用管理数据
  created () {
    if (this.$route.query.key) {
      this.auditStatus = this.$route.query.key
    }
    this.queryList()
  },
  methods: {
    /* changeStatus (data) {
      console.log(data)
    }, */
    search () {
      this.page = 1
      this.queryList()
    },
    /* toNewLink (row) {
      let routeData = this.$router.resolve({ name: 'appUpdate', query: { name: row.app_name, id: row.id } })
      window.open(routeData.href, '_blank')
    }, */
    // 查询列表
    queryList () {
      this.disabledTab = true
      const data = new FormData()
      if (this.keyword) {
        data.append('app_name', this.keyword)
      }
      if (this.keywordKey) {
        data.append('app_key', this.keywordKey)
      }
      if (this.auditStatus) {
        data.append('verify_status', this.auditStatus)
      }
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      data.append('access_token', this.token)
      GetAppList(data).then(res => {
        this.total = res.data.total
        this.dataList = res.data.list
        this.disabledTab = false
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    /* 通过审核 */
    VerifyAppStatOk (data) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: `${this.$t('app_owner')}：${data.app_owner} <br/> ${this.$t('apply_reason')}：${data.apply_reason} <br/> <br/> ${this.$t('is_it_verified')}`,
        onOk: () => {
          const dataObj = new FormData()
          dataObj.append('access_token', this.token)
          dataObj.append('id', data.id)
          dataObj.append('type', 1)
          VerifyAppStat(dataObj).then(res => {
            if (res.ret === 200 && res.data.is_success) {
              this.$Message.success(this.$t('pass'))
              this.queryList()
            } else {
              this.$Message.warning(res.msg)
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    },
    /* 不通过审核 */
    VerifyAppStatOn (data) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: `${this.$t('app_owner')}：${data.app_owner} <br/> ${this.$t('apply_reason')}：${data.apply_reason} <br/> <br/> ${this.$t('is_it_verified')}`,
        onOk: () => {
          const dataObj = new FormData()
          dataObj.append('access_token', this.token)
          dataObj.append('id', data.id)
          dataObj.append('type', 2)
          VerifyAppStat(dataObj).then(res => {
            if (res.ret === 200 && res.data.is_success) {
              this.$Message.success(this.$t('pass'))
              this.queryList()
            } else {
              this.$Message.warning(res.msg)
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    },
    /* showAppSecret (id) {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('id', id)
      GetAppSecret(formdata).then(res => {
        if (res.ret === 200) {
          this.$Modal.confirm({
            title: '应用密钥',
            content: '密钥：' + res.data.app_secret
          })
        }
      })
    }, */
    // 开启/禁用操作
    show (index) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: this.dataList[index].app_status === 0 ? this.openApp : this.closeApp,
        onOk: () => {
          const formdata = new FormData()
          formdata.append('access_token', this.token)
          formdata.append('id', this.dataList[index].id)
          if (this.dataList[index].app_status) {
            formdata.append('type', 0)
          } else {
            formdata.append('type', 1)
          }
          AlterAppStat(formdata).then(res => {
            if (res.ret === 200) {
              this.$Message.success(this.$t('update_successfully'))
              this.queryList()
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.queryKeyWord{
  display: flex;
  align-items: center;
  height:72px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
  border-radius:10px;
  margin-bottom: 20px;
  &__input{
    margin-right:40px;
  }
}
.ListTab{
  background: #fff;
  border-radius: 10px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.operation{
  &__btn{
    margin: 0 5px;
  }
}
</style>
