<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-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 class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-4 col-form-label text-end">{{ $t('sdl.common.label.title') }}</label>
              <div class="col-8">
                <input class="form-control" type="text" v-model="searchTitle" @keydown.enter="getList()"/>
              </div>
            </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">
      <colgroup>
        <col style=""/>
        <col style="width:24%"/>
        <col style="width:12%"/>
        <col style="width:12%"/>
      </colgroup>
      <thead>
      <tr>
        <th scope="col">{{ $t('sdl.common.label.title') }}</th>
        <th scope="col">{{ $t('sdl.email.recipient') }}</th>
        <th scope="col">{{ $t('sdl.email.sender') }}</th>
        <th scope="col">{{ $t('sdl.email.sendDate') }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="mail in mailList" :key="mail.mailId">
        <td>
          <a @click="rowClick(mail.mailId)">{{ mail.mailDto.subject }}</a>
        </td>
        <td class="text-center">{{ mail.recipientStr }}</td>
        <td class="text-center">{{ mail.senderName }}</td>
        <td class="text-center">{{ $filters.dateFormat(mail.sendDateTime, $t('data-format.date.ymd')) }}</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 { SDLUtil, DateUtil } from '@/utils';

export default {
  data() {
    return {
      datePickerUnit: 'month',
      searchTitle: '',
      searchPeriod: {},
      displayDateUnit: '',
      mailList: [],
      records: 0, // total number of data
      currentPage: 1, // current page number
      pageSize: 10, // number of lists per page
    };
  },
  methods: {
    /**
     * param:
     * return:
     * exception:
     * description : Initialize Page
     */
    init() {
      this.searchPeriod.startDate = DateUtil.subDate(14, 'd');
      this.searchPeriod.endDate = DateUtil.now();
      this.getList();
    },
    /**
     * param: pageIndex -> Int (default: 1)
     * return:
     * exception:
     * description : Search Sent Mail List
     */
    getList(pageIndex = 1) {
      // Change to date format standard at API request ('YYYY-MM-DD')
      const searchPeriod = DateUtil.stdFormat(this.searchPeriod);

      const params = {
        pageIndex,
        pageSize: this.pageSize,
        title: this.searchTitle,
        ...searchPeriod,
      };
      SDLUtil.showLoadingBar(true);
      axios.get(`${SDLUtil.API_URL}/email/sent-mails`, { params })
        .then(({ data }) => {
          this.mailList = data.rows;
          this.currentPage = pageIndex;
          this.records = data.records;
          this.displayDateUnit = this.datePickerUnit;
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
        });
    },
    /**
     * param: pageIndex -> Int
     * return:
     * exception:
     * description : Pagination move
     */
    movePage(pageIndex) {
      this.getList(pageIndex);
    },
    rowClick(mailId) {
      this.$router.push({ path: `${this.$CONTEXT}/admin/log/sentMailHistoryInfo/${mailId}` });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
};
</script>

<style scoped></style>
