<!--
  Program: SDL Board Management
  Author: SDL
  Brief: Board Management Page & API
-->
<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!--Contents Area -->
    <div class="ui--view-container">
      <h4 class="mb-3">{{ $t('sdl.board.label.linkList') }}</h4>
      <!-- Header -->
      <table class="table table-bordered ui--table-form ui--table-form-view mb-4">
        <colgroup>
          <col style="width:15%" />
          <col style="width:35%" />
          <col style="width:15%" />
          <col style="width:35%" />
        </colgroup>
        <tbody>
          <tr>
            <th scope="row">{{ $t('sdl.board.label.boardId') }}</th>
            <td><input v-model="boardId" type="text" readonly class="form-control-plaintext" /></td>
            <th scope="row">{{ $t('sdl.board.label.bbsName') }}</th>
            <td><input v-model="boardInfo.boardName" type="text" readonly class="form-control-plaintext" /></td>
          </tr>
        </tbody>
      </table>
      <h5 class="mb-2">{{ $t('sdl.board.label.adminRole') }}</h5>
      <div class="row mb-3">
        <div class="col-6">
          <h6>Page List</h6>
          <table class="table table-bordered ui--table-form">
            <colgroup>
              <col style="width:15%" />
              <col style="width:25%" />
              <col style="width:60%" />
            </colgroup>
            <tbody>
              <tr>
                <th scope="col">{{ $t('sdl.board.label.role') }}</th>
                <th scope="col">{{ $t('sdl.board.label.function') }}</th>
                <th scope="col">URL</th>
              </tr>
              <tr v-for="page in adminLinkInfo.page" :key="page.pagePath">
                <td>{{ page.authorizationType }}</td>
                <td>{{ page.pageName }}</td>
                <td>{{ page.pagePath }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-6">
          <h6>API List</h6>
          <table class="table table-bordered ui--table-form">
            <colgroup>
              <col style="width:15%" />
              <col style="width:25%" />
              <col style="width:60%" />
            </colgroup>
            <tbody>
              <tr>
                <th scope="col">{{ $t('sdl.board.label.role') }}</th>
                <th scope="col">{{ $t('sdl.board.label.function') }}</th>
                <th scope="col">URL</th>
              </tr>
              <tr v-for="api in adminLinkInfo.api" :key="api.pagePath">
                <td>{{ api.authorizationType }}</td>
                <td>{{ api.apiName }}</td>
                <td>{{ api.apiUrl }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <hr class="mb-3" />
      <h5 class="mb-2">{{ $t('sdl.board.label.userRole') }}</h5>
      <div class="row mb-3">
        <div class="col-6">
          <h6>Page List</h6>
          <table class="table table-bordered ui--table-form">
            <colgroup>
              <col style="width:15%" />
              <col style="width:25%" />
              <col style="width:60%" />
            </colgroup>
            <tbody>
              <tr>
                <th scope="col">{{ $t('sdl.board.label.role') }}</th>
                <th scope="col">{{ $t('sdl.board.label.function') }}</th>
                <th scope="col">URL</th>
              </tr>
              <tr v-for="page in userLinkInfo.page" :key="page.pagePath">
                <td>{{ page.authorizationType }}</td>
                <td>{{ page.pageName }}</td>
                <td>{{ page.pagePath }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-6">
          <h6>API List</h6>
          <table class="table table-bordered ui--table-form">
            <colgroup>
              <col style="width:15%" />
              <col style="width:25%" />
              <col style="width:60%" />
            </colgroup>
            <tbody>
              <tr>
                <th scope="col">{{ $t('sdl.board.label.role') }}</th>
                <th scope="col">{{ $t('sdl.board.label.function') }}</th>
                <th scope="col">URL</th>
              </tr>
              <tr v-for="api in userLinkInfo.api" :key="api.pagePath">
                <td>{{ api.authorizationType }}</td>
                <td>{{ api.apiName }}</td>
                <td>{{ api.apiUrl }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <hr class="mb-4" />
      <div class="ui--button-container">
        <button class="btn btn-secondary btn-lg" type="submit" @click="moveListPage()">
          {{ $t('sdl.common.label.list') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import SDLUtil from '@/utils/SDLUtil';

export default {
  data() {
    return {
      boardId: this.$route.params.boardId,
      boardInfo: {},
      adminLinkInfo: {},
      userLinkInfo: {},
    };
  },
  computed: {},
  methods: {
    /**
     * param:
     * return:
     * exception:
     * description : Initialize Page
     */
    init() {
      this.getBoardInfo();
    },
    /**
     * param:
     * return:
     * exception:
     * description : Retrieving board information
     */
    async getBoardInfo() {
      SDLUtil.showLoadingBar(true);
      await axios
        .get(`${SDLUtil.API_URL}/boards/${this.boardId}`)
        .then(({ data }) => {
          this.boardInfo = data;
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
      this.adminLinkInfo = SDLUtil.getBoardPageApiList(this.boardId, this.boardInfo.boardType, 'admin');
      this.userLinkInfo = SDLUtil.getBoardPageApiList(this.boardId, this.boardInfo.boardType, 'user');
    },
    /**
     * param:
     * return:
     * exception:
     * description : Move to List Page
     */
    moveListPage() {
      this.$router.push(`${this.$CONTEXT}/admin/boardMgmt/list`);
    },
  },
  mounted() {
    this.$nextTick(() => {
      console.info('initialize SDL Admin Board Page&Api Page');
      this.init();
    });
  },
};
</script>

<style scoped></style>
