<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-12">
            <!-- form -->
            <div class="row">
              <label class="col-2 col-form-label text-end">{{ $t('sdl.approval.label.title') }}</label>
              <div class="col-10 form-inline">
                <input class="form-control" type="text" v-model="searchKeyword" @keydown.enter="onSearch()" />
              </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 class="float-end">
        <button type="button" class="btn btn-primary btn-sm" @click="onHtmlWrite" v-authorization="'update'">
          {{ $t('sdl.common.label.register') }}
        </button>
      </div>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:10%" />
        <col style="width:30%" />
        <col />
        <col style="width:10%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Key</th>
          <th scope="col">{{ $t('sdl.approval.label.title') }}</th>
          <th scope="col">{{ $t('sdl.board.label.classificationDesc') }}</th>
          <th scope="col">{{ $t('sdl.board.label.preView') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="grid in gridList" :key="grid.approvalStepSequence">
          <td class="text-center">
            <a @click="rowClick(grid.id)">{{ grid.templateKey }}</a>
          </td>
          <td>{{ grid.title }}</td>
          <td>{{ $filters.cutString(grid.description, 100) }}</td>
          <td class="text-center">
            <button class="btn btn-outline-secondary ui--btn-xs" type="button" @click="onPreview(grid.id)">
              {{ $t('sdl.board.label.preView') }}
            </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 _ from 'lodash';
import { SDLUtil, StringUtil } from '@/utils';
import StoreParams from '@/mixin/StoreParams';
import ApprPreviewPopup from './popup/ApprTemplatePreview.vue';

export default {
  data() {
    return {
      gridList: [],
      records: 0, // total number of data
      currentPage: 1, // current page number
      pageSize: 10, // Number of lists per page
      searchKeyword: '',
      templateGroupCode: _.replace(this.$route.path, `${this.$CONTEXT}/`, '').split('/')[2],
    };
  },
  mixins: [StoreParams],
  methods: {
    init() {
      const storeParams = this.getStoreParameter();
      if (storeParams) {
        this.searchKeyword = storeParams.searchKeyword;
        this.templateGroupCode = storeParams.templateGroupCode;
        this.onSearch(storeParams.pageIndex);
      } else {
        this.onSearch();
      }
    },
    onSearch(pageIndex = 1) {
      this.currentPage = pageIndex;
      const params = {
        title: this.searchKeyword,
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      this.setStoreParameter(params);
      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      if (!this.templateGroupCode) {
        // eslint-disable-next-line prefer-destructuring
        this.templateGroupCode = _.replace(this.$route.path, `${this.$CONTEXT}/`, '').split('/')[2];
      }
      axios
        .get(
          `${SDLUtil.API_URL}/templates-with-paging/group/${this.templateGroupCode}?${StringUtil.queryStringfy(
            params,
          )}`,
        )
        .then(response => {
          this.gridList = response.data.rows;
          this.records = response.data.records;

          // Loading bar hidden
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
          SDLUtil.errorAlert(error);
        });
    },
    onHtmlWrite() {
      this.$router.push({ path: `${this.$CONTEXT}/admin/apprTemplates/${this.templateGroupCode}/edit` });
    },
    rowClick(id) {
      this.$router.push({ path: `${this.$CONTEXT}/admin/apprTemplates/${this.templateGroupCode}/edit/${id}` });
    },
    onPreview(id) {
      SDLUtil.show(
        ApprPreviewPopup,
        {
          id,
        },
        {
          width: '900px',
          height: 'auto',
          scrollable: true,
        },
      );
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped></style>
