<template>
  <div class="" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          API {{ $t('sdl.menu.menuHitCount') }}
        </h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered ui--table-form ui--table-form-view">
          <colgroup>
            <col style="width:25%" />
            <col style="" />
          </colgroup>
          <tbody>
            <tr>
              <th scope="row">{{ $t('sdl.menu.label.menu') }}</th>
              <td>{{ info.menu }}</td>
            </tr>
            <tr>
              <th scope="row">{{ $t('sdl.batchLogger.label.useDate') }}</th>
              <td v-if="info.type === 'month'">
                {{ $filters.dateFormat(info.date, $t('data-format.date.ym')) }}
              </td>
              <td v-if="info.type === 'day'">
                {{ $filters.dateFormat(info.date, $t('data-format.date.ymd')) }}
              </td>
            </tr>
            <tr>
              <th scope="row">{{ $t('sdl.common.label.name') }}</th>
              <td>{{ info.name }}</td>
            </tr>
          </tbody>
        </table>

        <div style="max-height: 250px; overflow-y: scroll">
        <table class="table table-bordered ui--table mb-0">
          <colgroup>
            <col style="" />
            <col style="width:20%" />
          </colgroup>
          <thead>
          <tr>
            <th scope="col">{{ $t('sdl.menu.label.menu') }}</th>
            <th scope="col">API {{ $t('sdl.menu.menuHitCount') }}</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(log, index) in logList" :key="'i' + index + '-k' + log.hitCount">
            <td>{{ log.apiFullPath }}</td>
            <td class="text-center">{{ $filters.numberFormat(log.hitCount) }}</td>
          </tr>
          </tbody>
        </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.close') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil, StringUtil } from '@/utils';

export default {
  name: 'ApiUseHistory',
  props: {
    info: Object,
    search: Object,
  },
  data() {
    return {
      logList: [],

    };
  },
  created() {
    const params = {
      ...this.search,
    };

    SDLUtil.showLoadingBar(true);

    axios
      .get(`${SDLUtil.API_URL}/history/api-use-history?${StringUtil.queryStringfy(params)}`)
      .then(({ data }) => {
        this.logList = data;
        SDLUtil.showLoadingBar(false);
      })
      .catch(err => {
        console.error(err);
        SDLUtil.showLoadingBar(false);
      });
  },
  methods: {
    movePage(pageIndex) {
      this.getList(pageIndex);
    },
  },
};
</script>

<style scoped>
.ui--table th {
  position: sticky;
  z-index: 2;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
</style>
