<!--
  Program: Select board popup
  Author: SDL
  Brief: bulletin board selection popup
-->
<template>
  <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable" style="max-height: fit-content;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          {{ popupType === 'user' ? $t('sdl.menu.label.userBoard') : $t('sdl.menu.label.adminBoard') }}
        </h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body modal-custom-body">
        <table class="table table-bordered ui--table">
          <colgroup>
            <col style="width:10%" />
            <col style="width:20%" />
            <col style="" />
            <col style="width:25%" />
          </colgroup>
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">{{ $t('sdl.menu.menuType') }}</th>
              <th scope="col">{{ $t('sdl.board.label.bbsName') }}</th>
              <th scope="col">{{ $t('sdl.common.label.createdDate') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr class="cursor-pointer" v-for="item in list" :key="item.boardId" @click="selectedBoard = item">
              <td class="text-center">
                <input type="radio" name="board" :checked="selectedBoard === item" />
              </td>
              <td class="text-center">
                {{ item.boardType === 'BASIC' ? $t('sdl.board.basicType') : $t('sdl.board.pictureType') }}
              </td>
              <td>{{ item.boardName }}</td>
              <td class="text-center">{{ $filters.dateFormat(item.firstRegDatetime) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.cancel') }}
        </button>
        <button type="button" class="btn btn-primary" @click="confirm">
          {{ $t('sdl.common.label.selectButton') }}
        </button>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: {
    popupType: {
      required: true,
      type: String,
    },
    confirmFunc: {
      required: true,
      type: Function,
    },
  },
  data() {
    return {
      list: [],
      selectedBoard: null,
    };
  },
  methods: {
    getBoardList() {
      axios.get(`${SDLUtil.API_URL}/boards-popup`).then(({ data }) => {
        this.list = data;
      });
    },
    confirm() {
      // validation
      if (this.selectedBoard === null) {
        SDLUtil.alert('sdl.menu.message.valid.selectBoard');
        return;
      }

      this.confirmFunc(this.selectedBoard.boardId, this.selectedBoard.boardType);
      this.$emit('close');
    },
  },
  created() {
    this.getBoardList();
  },
};
</script>

<style scoped>
/*noinspection ALL*/
.modal-custom-body {
  /*height: available;*/
  height: 100%;
  height: -moz-available; /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  height: fill-available;
}
</style>
