<!--
Program: Batch Job Log List
Author: SDL
Description: Batch Job Log List
-->
<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="row">
          <div class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-4 col-form-label text-end">{{ $t('sdl.batchLogger.label.batchJobName') }}</label>
              <div class="col-8">
                <!-- dropdown -->
                <select class="form-select" v-model="sysResourceId">
                  <option value="">{{ $t('sdl.common.label.all') }}</option>
                  <option v-for="code in sysResourceIdList" :key="code.sysResourceId" :value="code.sysResourceId">{{
                    code.description
                  }}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-2 col-form-label text-end">{{ $t('sdl.common.label.period') }}</label>
              <div class="col-10 form-inline">
                <sdl-datepicker v-model="searchPeriod" :period="searchPeriod"></sdl-datepicker>
              </div>
            </div>
          </div>
        </div>
        <!-- //row1 -->
      </div>
      <!-- search button -->
      <div class="col-2 float-end text-end">
        <button class="btn btn-primary btn-search" type="button" @click="onSearch()">
          {{ $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">
      <colgroup>
        <col style="width:10%" />
        <col />
        <col style="width:13%" />
        <col style="width:13%" />
        <col style="width:10%" />
        <col style="width:10%" />
        <col style="width:10%"  />
        <col style="width:8%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">{{ $t('sdl.common.label.type') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.batchJobName') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.startDate') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.endDate') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.timeRequired') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.successYn') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.batchStatus') }}</th>
          <th scope="col">{{ $t('sdl.batchLogger.label.batchExecute') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="grid in gridList" :key="grid.logOccurId">
          <td class="text-center">{{ getLabel(grid.sysResource.sysResourceType) }}</td>
          <td class="text-left">{{ grid.sysResource.description }}</td>
          <td class="text-center">{{ $filters.dateFormat(grid.useFrom, $t('data-format.datetime.ymdhms')) }}</td>
          <td class="text-center">{{ $filters.dateFormat(grid.useThruDatetime, $t('data-format.datetime.ymdhms')) }}</td>
          <td class="text-end">{{ $filters.numberFormat(grid.responseTime) }}</td>
          <td class="text-center">{{ grid.batchResultCodeId }}</td>
          <td class="text-center">{{ grid.batchStatusCodeId }}</td>
          <td class="text-center">
            <button class="btn btn-outline-primary ui--btn-xs" type="button" @click="executeBatch(grid)">
              {{ $t('sdl.batchLogger.label.batchExecute') }}
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- // TABLE  Area-->
    <!-- Pagination Area-->
    <sdl-pagination
      :current-page="currentPage"
      :total-rows="records"
      :per-page="pageSize"
      @change="onSearch"
      align="center"
    />
    <!--  // Pagination Area-->
  </div>
</template>

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

export default {
  mixins: [SDLLocale],
  data() {
    return {
      sysResourceIdList: [],
      sysResourceId: '',
      gridList: [],
      records: 0, // total number of data
      currentPage: 1, // current page number
      pageSize: 10, // Number of lists per page
      searchPeriod: {},
    };
  },
  methods: {
    /**
     * param:
     * return:
     * exception:
     * Description : page initialization
     */
    init() {
      this.searchPeriod.startDate = DateUtil.subDate(1, 'M');
      this.searchPeriod.endDate = DateUtil.now();
      this.getResourceList();
      this.onSearch();
    },
    /**
     * param:
     * return: Object
     * exception:
     * Description : setting search param
     */
    getSearchParam() {
      return {
        sysResourceId: this.sysResourceId,
        useFromDate: DateUtil.stdFormat(this.searchPeriod.startDate),
        useThruDate: DateUtil.stdFormat(this.searchPeriod.endDate),
      };
    },
    /**
     * param:
     * return: Array
     * exception:
     * Description : get resource list
     */
    getResourceList() {
      axios
        .get(`${SDLUtil.API_URL}/batch-jobs`)
        .then(response => {
          this.sysResourceIdList = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    /**
     * param: pageIndex -> int
     * return:
     * exception:
     * Description : search
     */
    onSearch(pageIndex = 1) {
      this.currentPage = pageIndex;
      const params = {
        ...this.getSearchParam(),
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      // show Loading bar
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/logs/batch-history-with-paging?${StringUtil.queryStringfy(params)}`)
        .then(response => {
          const list = response.data.rows;
          Object.keys(list).forEach(i => {
            list[i].useFrom = moment(list[i].useFromDate + list[i].useFromHhmmss, 'YYYYMMDDHHmmss');
          });
          this.gridList = list;

          this.records = response.data.records;

          // hide Loading bar
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
          SDLUtil.errorAlert(error);
        });
    },
    /**
     * param: batchInfo -> Object
     * return: Object
     * exception:
     * Description : execute batch
     */
    executeBatch(batchInfo) {
      const loadDate = this.$filters.dateFormat(batchInfo.useFromDate);
      axios
        .post(`${SDLUtil.API_URL}/${batchInfo.sysResource.sysResourceUrl}?loadDate=${loadDate}`)
        .then(() => {
          this.onSearch();
        })
        .catch(error => {
          SDLUtil.errorAlert(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped></style>
