<!--
  Program: SDL Board Management
  Author: SDL
  Brief: Board Management List
-->
<template>
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!-- 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 class="btn btn-primary btn-sm" type="button" @click="moveRegistPage()" v-authorization="'execute'">
          {{ $t('sdl.common.label.register') }}
        </button>
      </div>
    </div>
    <!-- TABLE  Area-->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:10%" />
        <col />
        <col style="width:8%" />
        <col style="width:15%" />
        <col style="width:10%" />
        <col style="width:15%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">{{ $t('sdl.board.label.viewListType') }}</th>
          <th scope="col">{{ $t('sdl.board.label.bbsName') }}</th>
          <th scope="col">{{ $t('sdl.board.label.regCount') }}</th>
          <th scope="col">{{ $t('sdl.common.label.createdDate') }}</th>
          <th scope="col">{{ $t('sdl.common.label.used') }}</th>
          <th scope="col">{{ $t('sdl.board.label.linkList') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="board in boardList" :key="board.boardId">
          <td class="text-center">
            {{ board.boardType === 'BASIC' ? $t('sdl.board.basicType') : $t('sdl.board.pictureType') }}
          </td>
          <td>
            <a href="javascript:void(0);" @click="moveDetailPage(board.boardId)">{{ board.boardName }}</a>
          </td>
          <td class="text-end">{{ $filters.numberFormat(board.postCount) }}</td>
          <td class="text-center">{{ $filters.dateFormat(board.regDate, $t('data-format.date.ymd')) }}</td>
          <td class="text-center">{{ board.deleted ? $t('sdl.common.label.nonUse') : $t('sdl.common.label.use') }}</td>
          <td class="text-center">
            <button class="btn btn-outline-secondary ui--btn-xs" @click="moveLinkPage(board.boardId)">
              {{ $t('sdl.board.label.viewDetail') }}
            </button>
          </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 from '@/utils/SDLUtil';

export default {
  data() {
    return {
      boardList: [],
      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.getList();
    },
    /**
     * param: pageIndex -> Int (default: 1)
     * return:
     * exception:
     * description : search BoardList
     */
    getList(pageIndex = 1) {
      const params = {
        pageIndex,
        pageSize: this.pageSize,
      };
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/boards-with-paging`, { params })
        .then(({ data }) => {
          this.boardList = data.rows;
          this.currentPage = pageIndex;
          this.records = data.records;
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
        });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Move to the registration page.
     */
    moveRegistPage() {
      this.$router.push(`${this.$CONTEXT}/admin/boardMgmt/regist`);
    },
    /**
     * param: boardId -> String
     * return:
     * exception:
     * description :  Move to the detail page.
     */
    moveDetailPage(boardId) {
      this.$router.push(`${this.$CONTEXT}/admin/boardMgmt/detail/${boardId}`);
    },
    /**
     * param: pageIndex -> String
     * return:
     * exception:
     * description : Move to the Page/API page.
     */
    moveLinkPage(boardId) {
      this.$router.push(`${this.$CONTEXT}/admin/boardMgmt/link/${boardId}`);
    },
    /**
     * param: pageIndex -> Int
     * return:
     * exception:
     * description : Pagination move
     */
    movePage(pageIndex) {
      this.getList(pageIndex);
    },
  },
  mounted() {
    this.$nextTick(() => {
      console.info('initialize SDL Admin Board List Page');
      this.init();
    });
  },
};
</script>

<style scoped></style>
