<!--
  Program: Terms Conditions List
  Author: SDL
  Brief: list of terms and conditions
-->
<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>

    <div class="ui--search-container clearfix">
      <div class="col-10 float-start">
        <!-- row1 -->
        <div class="row">
          <div class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-4 col-form-label text-end">{{ $t('sdl.common.label.type') }}</label>
              <div class="col-8">
                <!-- dropdown -->
                <select class="form-select" v-model="partId">
                  <option value="">{{ $t('sdl.common.label.all') }}</option>
                  <option v-for="term in terms" :key="term.codeId" :value="term.codeId">{{ getLabel(term) }}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-6">
            <!-- form -->
            <div class="row">
              <label class="col-4 col-form-label text-end">{{ $t('sdl.privacyPolicy.language') }}</label>
              <div class="col-8">
                <!-- dropdown -->
                <select class="form-select" v-model="langType">
                  <option value="">{{ $t('sdl.common.label.all') }}</option>
                  <option v-for="lang in termsLang" :key="lang.code" :value="lang.code">{{ getLabel(lang) }}</option>
                </select>
              </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(1)">
          {{ $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 class="float-end">
        <button type="button" class="btn btn-primary btn-sm" @click="newTerms()">
          {{ $t('sdl.common.label.register') }}
        </button>
      </div>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:40%" />
        <col style="width:10%" />
        <col style="width:10%" />
        <col style="width:10%" />
        <col style="width:10%" />
        <col style="width:10%" />
        <col style="width:10%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">{{ $t('sdl.common.label.type') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.language') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.startDate') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.createUser') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.createDate') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.updateUser') }}</th>
          <th scope="col">{{ $t('sdl.privacyPolicy.updateDate') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in termList" :key="item.termsId" class="cursor-pointer" @click="moveDetail(item.termsId)">
          <td>{{ getLabel(item.termsCode) }}</td>
          <td class="text-center">{{ getLabel(item.langTypeCode) }}</td>
          <td class="text-center">{{ $filters.dateFormat(convertDate(item.startDate)) }}</td>
          <td>{{ item.firstRegrName }}</td>
          <td class="text-center">{{ $filters.dateFormat(item.firstRegDatetime) }}</td>
          <td>{{ item.lastModrName }}</td>
          <td class="text-center">{{ $filters.dateFormat(item.lastModDatetime) }}</td>
        </tr>
      </tbody>
    </table>
    <sdl-pagination
      :current-page="currentPage"
      :total-rows="records"
      :per-page="pageSize"
      @change="getList"
      align="center"
    />
  </div>
</template>

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

export default {
  mixins: [SDLLocale, StoreParams],
  data() {
    return {
      terms: [],
      termsLang: [],
      partId: '',
      langType: '',
      termList: [],
      records: 0, // 전체 데이터 수
      currentPage: 1, // current page number
      pageSize: 10, // number of lists per page
      pageUnit: 5,
    };
  },
  created() {
    this.terms = SDLUtil.getCommCodeList({ commCodeTypeId: 'TERMS' });
    this.termsLang = SDLUtil.getCommCodeList({ commCodeTypeId: 'TERMS_LANG' });
    const storeParams = this.getStoreParameter();
    // Restore if there are stored parameters
    if (storeParams) {
      this.langType = storeParams.langType;
      this.partId = storeParams.partId;
      this.pageIndex = storeParams.pageIndex;
      this.pageSize = storeParams.pageSize;

      this.getList(this.pageIndex);
    } else {
      // Logic when entered without stored parameters
      this.getList();
    }
  },
  methods: {
    getList(pageIndex = 1) {
      const params = {
        pageIndex,
        pageSize: this.pageSize,
        partId: this.partId,
        langType: this.langType,
      };
      // Loading bar execution
      this.setStoreParameter(params);
      SDLUtil.showLoadingBar(true);
      // axios.get('/static/dummy/termsList.json', { params }).then(({ data }) => {
      axios.get(`${SDLUtil.API_URL}/privacypolicy/terms-with-paging`, { params }).then(({ data }) => {
        this.currentPage = data.currentPage;
        this.termList = data.rows;
        this.records = data.records;
        // Loading bar hidden
        SDLUtil.showLoadingBar(false);
      });
    },
    moveDetail(termId) {
      this.$router.push({ path: `${this.$CONTEXT}/admin/etc/terms-conditions/detail/${termId}` });
    },
    newTerms() {
      this.$router.push({ path: `${this.$CONTEXT}/admin/etc/terms-conditions/new` });
    },
    convertDate(dateStr) {
      return moment(dateStr, 'YYYY-MM-DD').format();
    },
  },
};
</script>
