<template>
  <div>
    <div class="accessLog">
      <p>api：</p>
      <Input class="accessLog__input" clearable v-model="keyword" placeholder="service" style="width: 150px" />
      <p>{{$t('app_key')}}：</p>
      <Input class="accessLog__input" clearable v-model="app_key" placeholder="app_key" style="width: 150px" />
      <p>{{$t('date')}}：</p>
      <Col>
          <DatePicker :value="dateRange" :options="optionsFuture" format="yyyy-MM-dd" type="daterange" placement="bottom-end" style="width: 300px" @on-change="changeDateRange"></DatePicker>
        </Col>
      <i-button class="accessLog__btn" type="primary" @click="search">{{$t('refresh')}}</i-button>
    </div>
    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="ListTab">
      <template slot-scope="{row}" slot="service">
        <p> {{row.service}} </p>
      </template>
      <template slot-scope="{row}" slot="app_key">
        <p> {{row.app_key}} </p>
      </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 { GetLogList } from '@/api/techzones'
import { getToken, defaultDateRange } from '@/libs/util'
export default {
  name: 'directive_page',
  data () {
    return {
      disabledTab: false,
      token: getToken(),
      keyword: '',
      app_key: '',
      total: 0,
      dateRange: ['', ''],
      page: 1, // 分页
      perpage: 10,
      columnsList: [
        {
          title: this.$t('ID'),
          key: 'id',
          width: 80,
          align: 'center'
        },
        {
          title: this.$t('request_time'),
          key: 'request_time',
          align: 'center'
        },
        {
          title: this.$t('API'),
          key: 'service',
          slot: 'service',
          align: 'center'
        },
        {
          title: 'app_key',
          key: 'app_key',
          slot: 'app_key',
          align: 'center'
        },
        {
          title: this.$t('ret_status'),
          key: 'ret',
          width: 100,
          align: 'center'
        },
        {
          title: this.$t('msg_tip'),
          key: 'msg',
          align: 'center'
        },
        {
          title: this.$t('response_time_second'),
          key: 'excute_time',
          align: 'center'
        },
        {
          title: this.$t('client_ip'),
          key: 'ip',
          align: 'center'
        },
        {
          title: this.$t('request_method'),
          key: 'method',
          width: 100,
          align: 'center'
        }
      ],
      optionsFuture: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      dataList: []
    }
  },
  // 获取应用管理数据
  created () {
    let dr = defaultDateRange()
    this.dateRange[0] = dr.starttime
    this.dateRange[1] = dr.endtime
    this.queryList()
  },
  methods: {
    search () {
      this.page = 1
      this.queryList()
    },
    // 查询列表
    queryList () {
      this.disabledTab = true
      const data = new FormData()
      if (this.keyword) {
        data.append('log_service', this.keyword)
      }
      if (this.app_key) {
        data.append('log_app_key', this.app_key)
      }
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      data.append('access_token', this.token)
      data.append('start_time', this.dateRange[0])
      data.append('end_time', this.dateRange[1])
      GetLogList(data).then(res => {
        this.dataList = res.data.items
        this.total = res.data.total
        this.disabledTab = false
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    changeDateRange (e) {
      this.dateRange = [e[0] + ' 00:00:00', e[1] + ' 23:59:59']
    }
  }
}
</script>

<style lang="scss" scoped>
.accessLog{
  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;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 30px;
  &__input{
    margin-right:40px;
  }
  &__btn{
    margin-left: 30px;
  }
}
.ListTab{
  background: #fff;
  border-radius: 10px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.operation{
  &__btn{
    margin: 0 5px;
  }
}

</style>
