<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!-- SEARCH Area -->
    <div class="ui--search-container clearfix">
      <div class="col-10 float-start">
        <div class="col-6">
          <!-- form -->
          <div class="row">
            <label class="col-4 col-form-label text-end">{{ $t('sdl.common.label.useDate') }}</label>
            <div class="col-8 form-inline">
              <sdl-datepicker v-model="searchDate" :minimum-view="datePickerUnit"></sdl-datepicker>
            </div>
          </div>
        </div>
        <!-- //row1 -->
      </div>
      <!-- search button -->
      <div class="col-2 float-end text-end">
        <button class="btn btn-primary btn-search" type="submit" @click="getList()">
          {{ $t('sdl.common.label.search') }}
        </button>
      </div>
    </div>
    <!-- LIST Header & buttons -->
    <div class="ui--list-heading clearfix">
      <span class="ui--text-total"><strong>Total</strong> {{ $filters.numberFormat(records) }}</span>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <thead>
        <tr>
          <th scope="col">{{ $t('sdl.batchLogger.label.updatedMonth') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.projectCode') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.projectName') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.menuLevel1') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.menuLevel2') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.menuLevel3') }}</th>
          <th scope="col">{{ $t('sdl.menu.label.menuName') }}</th>
          <th scope="col">{{ $t('sdl.menu.menuType') }}</th>
          <th scope="col">{{ $t('sdl.menu.menuUserCount') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.monthlyUseExpected') }}</th>
          <th scope="col">Monthly Hits Total</th>
          <th scope="col">Hits</th>
          <th scope="col">{{ $t('sdl.menu.menuUtilization') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.reviewTargetDistinction') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="log in logList" :key="log.no">
          <td class="text-center">{{ log.updateMonth }}{{ $t('sdl.common.label.month') }}</td>
          <td class="text-center">{{ log.operateCode }}</td>
          <td class="text-center">{{ log.systemName }}</td>
          <td class="text-center">{{ log.menuLevel1 }}</td>
          <td class="text-center">{{ log.menuLevel2 }}</td>
          <td class="text-center">{{ log.menuLevel3 }}</td>
          <td class="text-center">{{ log.menuName }}</td>
          <td class="text-center">{{ log.menuType }}</td>
          <td class="text-end">{{ $filters.numberFormat(log.userCount) }}</td>
          <td class="text-end">{{ $filters.numberFormat(log.monthExpCount) }}</td>
          <td class="text-end">{{ $filters.numberFormat(log.monthHitsTotal) }}</td>
          <td class="text-center">{{ $filters.numberFormat(log.hits) }}</td>
          <td class="text-end">{{ log.useRate }}%</td>
          <td class="text-center">{{ log.reviewType }}</td>
        </tr>
      </tbody>
    </table>
    <!-- // TABLE  Area-->
    <!-- Pagination Area-->
    <sdl-pagination
      :current-page="currentPage"
      :total-rows="records"
      :per-page="pageSize"
      @change="movePage"
      align="center"
    />
    <!--  // Pagination Area-->
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';
import SDLUtil from '@/utils/SDLUtil';

export default {
  data() {
    return {
      datePickerUnit: 'month',
      searchDate: moment().format(),
      logList: [],
      records: 0, // total number of data
      currentPage: 1, // current page number
      pageSize: 10, // number of lists per page
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getList(pageIndex = 1) {
      const params = {
        pageIndex,
        pageSize: this.pageSize,
        searchDate: this.searchDate,
      };
      SDLUtil.showLoadingBar(true);
      axios.get(`${SDLUtil.WEB_CONTEXT_PATH}/static/dummy/menuUtilSolvHistory.json`, { params }).then(({ data }) => {
        this.logList = data.rows;
        this.currentPage = pageIndex;
        this.records = data.records;
        SDLUtil.showLoadingBar(false);
      });
    },
    movePage(pageIndex) {
      this.getList(pageIndex);
    },
  },
};
</script>

<style scoped></style>
