<!--
  Program: SDL Board Management
  Author: SDL
  Brief: Board Management Detail & Edit
-->
<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!--Contents Area -->
    <div class="ui--view-container">
      <!-- Header -->
      <h4 class="mb-3">{{ $t('sdl.board.label.basicInfo') }}</h4>
      <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.bbsId') }} <span v-if="!boardId" class="ui--text-required">&#42;</span></th>
            <td v-if="!boardId">
              <sdl-regex-input v-model="boardInfo.boardId" :regExp="/^[A-Za-z0-9]+$/" class="form-control" v-validation="" :errorMessage="$t('sdl.department.message.requiredValue')"></sdl-regex-input>
            </td>
            <td v-else>{{ boardInfo.boardId }}</td>
            <th scope="row">{{ $t('sdl.board.label.bbsName') }} <span class="ui--text-required">&#42;</span></th>
            <td>
              <input v-model="boardInfo.boardName" type="text" class="form-control" v-validation="" :errorMessage="$t('sdl.department.message.requiredValue')" />
            </td>
          </tr>
          <tr>
            <th scope="row">{{ $t('sdl.board.label.viewListType') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.boardType" class="form-check-input" type="radio" id="rdoBasicType" value="BASIC" :disabled="boardId" @click="setBoardType" />
                <label class="form-check-label" for="rdoBasicType">{{ $t('sdl.board.label.basicType') }}</label>
              </div>
              <div class="form-check form-check-inline" :disabled="boardId">
                <input v-model="boardInfo.boardType" class="form-check-input" type="radio" id="rdoImageType" value="PICTURE" :disabled="boardId" @click="setImageBoardType" />
                <label class="form-check-label" for="rdoImageType">{{ $t('sdl.board.label.pictureType') }}</label>
              </div>
            </td>
            <th scope="row">{{ $t('sdl.board.label.pageCount') }}</th>
            <td>
              <select v-model="boardInfo.pageSize" class="form-select w-25">
                <template v-if="boardInfo.boardType === 'PICTURE'">
                  <option v-for="option in picturePageSizeOption" :value="option" :key="option">{{ option }}</option>
                </template>
                <template v-else>
                  <option v-for="option in pageSizeOption" :value="option" :key="option">{{ option }}</option>
                </template>
              </select>
            </td>
          </tr>
          <tr>
            <th scope="row">{{ $t('sdl.common.label.description') }}</th>
            <td colspan="3">
              <textarea v-model="boardInfo.description" class="form-control" aria-label="textarea"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- Header -->
      <h5 class="mb-3">{{ $t('sdl.board.label.detailFunctionUsed') }}</h5>
      <table class="table table-bordered ui--table-form ui--table-form-view mb-5">
        <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.editorUseYn') }}</th>
            <td colspan="3">
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.editorUsed" class="form-check-input" type="radio" id="editorUsed_Y" :value="true" />
                <label class="form-check-label" for="editorUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.editorUsed" class="form-check-input" type="radio" id="editorUsed_N" :value="false" />
                <label class="form-check-label" for="editorUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">{{ $t('sdl.board.label.replyYn') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.answerUsed" class="form-check-input" type="radio" id="answerUsed_Y" :value="true" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="answerUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.answerUsed" class="form-check-input" type="radio" id="answerUsed_N" :value="false" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="answerUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
            <th scope="row">{{ $t('sdl.board.label.commentYn') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.commentUsed" class="form-check-input" type="radio" id="commentUsed_Y" :value="true" />
                <label class="form-check-label" for="commentUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.commentUsed" class="form-check-input" type="radio" id="commentUsed_N" :value="false" />
                <label class="form-check-label" for="commentUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">{{ $t('sdl.board.label.attachFileUseYN') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.fileAttachUsed" class="form-check-input" type="radio" id="fileAttachUsed_Y" :value="true" />
                <label class="form-check-label" for="fileAttachUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.fileAttachUsed" class="form-check-input" type="radio" id="fileAttachUsed_N" :value="false" />
                <label class="form-check-label" for="fileAttachUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
            <th scope="row">{{ $t('sdl.board.label.attachImageUseYN') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.imageAttachUsed" class="form-check-input" type="radio" id="imageAttachUsed_Y" :value="true" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="imageAttachUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.imageAttachUsed" class="form-check-input" type="radio" id="imageAttachUsed_N" :value="false" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="imageAttachUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
          </tr>
          <tr>
            <th scope="row">{{ $t('sdl.board.label.noticePopup') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.noticePopupUsed" class="form-check-input" type="radio" id="noticePopupUsed_Y" :value="true" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="noticePopupUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.noticePopupUsed" class="form-check-input" type="radio" id="noticePopupUsed_N" :value="false" :disabled="boardInfo.boardType === 'PICTURE'" />
                <label class="form-check-label" for="noticePopupUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
              <label
                class="btn btn-checkbox"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                :data-bs-title="$t('sdl.board.tooltip.noticePopup.restriction')"
                :class="{ active: boardInfo.noticePopupUnfoldUsed }"
                :data-html="true"
                @click="changeNoticeUnfold"
              >
                <i class="bi me-1" :class="[boardInfo.noticePopupUnfoldUsed ? 'bi-check-square-fill' : 'bi-square']"></i>
                {{ $t('sdl.board.label.noticePopup.restriction') }}
              </label>
            </td>
            <th scope="row">{{ $t('sdl.board.label.noticeLabel.display') }}</th>
            <td>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.noticeLabelUsed" class="form-check-input" type="radio" id="noticeLabelUsed_Y" :value="true" :disabled="boardInfo.boardType === 'PICTURE'" @change="changePostColumn('NOTICE_LABEL')" />
                <label class="form-check-label" for="noticeLabelUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.noticeLabelUsed" class="form-check-input" type="radio" id="noticeLabelUsed_N" :value="false" :disabled="boardInfo.boardType === 'PICTURE'" @change="changePostColumn('NOTICE_LABEL')" />
                <label class="form-check-label" for="noticeLabelUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </td>
          </tr>
          <tr class="border">
            <th scope="row">{{ $t('sdl.board.label.group') }}</th>
            <td colspan="3">
              <div class="col-form-radio mt-1">
                <div class="form-check form-check-inline">
                  <input v-model="boardInfo.classificationUsed" class="form-check-input" type="radio" id="classificationUsed_Y" :value="true" @change="changePostColumn('CLASSIFICATION_NAME')" />
                  <label class="form-check-label" for="classificationUsed_Y">{{ $t('sdl.common.label.use') }}</label>
                </div>
                <div class="form-check form-check-inline">
                  <input v-model="boardInfo.classificationUsed" class="form-check-input" type="radio" id="classificationUsed_N" :value="false" @change="changePostColumn('CLASSIFICATION_NAME')" />
                  <label class="form-check-label" for="classificationUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
                </div>
              </div>
              <div class="add-list" style="display: block">
                <ul class="list-group">
                  <li class="list-group-item bg-light">
                    <button class="btn btn-outline-secondary ui--btn-xs float-end" @click="addClassification()" v-authorization="['update', 'execute']">
                      {{ $t('sdl.common.label.add') }}
                    </button>
                  </li>
                  <li v-for="item in boardInfo.classifications" class="list-group-item" :key="item.classificationId">
                    <div class="input-group">
                      <input v-model="item.classificationName" type="text" class="form-control" style="width: 25%" :placeholder="$t('sdl.board.label.classificationName')" />
                      <input v-model="item.description" type="text" class="form-control" style="width: 75%" :placeholder="$t('sdl.board.label.classificationDesc')" />
                    </div>
                    <button class="btn ui--btn-icon-sm" @click.stop="deleteClassification(item.classificationId)" v-authorization="['update', 'execute']">
                      <i class="bi bi-x"></i>
                    </button>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- Header -->
      <template v-if="boardId">
        <h4 class="mb-3">{{ $t('sdl.board.label.searchListSetting') }}</h4>
        <h5 class="mb-3">{{ $t('sdl.board.label.searchArea.condition') }}</h5>
        <!-- SEARCH Area -->
        <div class="ui--search-container clearfix mb-4">
          <div class="row">
            <!-- row -->
            <label class="col-1 col-form-label text-end">{{ $t('sdl.board.label.group') }}</label>
            <div class="col-2 col-form-radio">
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchClassificationUsed" class="form-check-input" type="radio" id="searchClassificationUsed_Y" :value="true" />
                <label class="form-check-label" for="searchClassificationUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchClassificationUsed" class="form-check-input" type="radio" id="searchClassificationUsed_N" :value="false" />
                <label class="form-check-label" for="searchClassificationUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </div>
            <label class="col-2 col-form-label text-end">{{ $t('sdl.board.label.searchSetting.condition') }}</label>
            <div class="col-2 col-form-radio">
              <!-- 선택 -->
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchConditionUsed" class="form-check-input" type="radio" id="searchConditionUsed_Y" :value="true" />
                <label class="form-check-label" for="searchConditionUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchConditionUsed" class="form-check-input" type="radio" id="searchConditionUsed_N" :value="false" />
                <label class="form-check-label" for="searchConditionUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </div>
            <label class="col-2 col-form-label text-end">{{ $t('sdl.board.label.regDate') }}</label>
            <div class="col-3 col-form-radio">
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchDateUsed" class="form-check-input" type="radio" id="searchDateUsed_Y" :value="true" />
                <label class="form-check-label" for="searchDateUsed_Y">{{ $t('sdl.common.label.use') }}</label>
              </div>
              <div class="form-check form-check-inline">
                <input v-model="boardInfo.searchDateUsed" class="form-check-input" type="radio" id="searchDateUsed_N" :value="false" />
                <label class="form-check-label" for="searchDateUsed_N">{{ $t('sdl.common.label.nonUse') }}</label>
              </div>
            </div>
          </div>
        </div>

        <h5 class="mb-3">{{ $t('sdl.board.label.listArea.column') }}</h5>
        <table class="table table-bordered ui--table mb-5">
          <colgroup>
            <col style="width: 5%" />
            <col style="width: 7%" />
            <col style="width: 20%" />
            <col style="width: 20%" />
            <col />
          </colgroup>
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">{{ $t('sdl.board.label.columnOrder') }}</th>
              <th scope="col">{{ $t('sdl.common.label.used') }}</th>
              <th scope="col">
                {{ $t('sdl.board.label.width') }} <strong class="text-success ms-1">{{ sumColumnWidth }}</strong
                >/100%
              </th>
              <th scope="col">{{ $t('sdl.board.label.columnName') }}</th>
            </tr>
          </thead>
          <draggable v-bind="dragOptions" v-model="boardInfo.columns" tag="tbody" @change="moveColumnList" handle=".drag-handle" item-key="columnSequence">
            <template #item="{ element }">
              <tr>
                <td class="text-center drag-handle">
                  <i class="bi bi-grip-vertical" title="Move Row"></i>
                </td>
                <td class="text-center">{{ element.columnSequence }}</td>
                <td class="text-center">
                  <div class="form-check form-check-inline">
                      <input v-model="element.used" class="form-check-input" type="radio" :id="`column_${element.columnSequence}_Y`" :value="true" :disabled="element.postMappColumn === 'CLASSIFICATION_NAME' || element.postMappColumn === 'NOTICE_LABEL'" />
                      <label class="form-check-label" :for="`column_${element.columnSequence}_Y`">{{ $t('sdl.common.label.use') }}</label>
                  </div>
                  <div class="form-check form-check-inline">
                      <input v-model="element.used" class="form-check-input" type="radio" :id="`column_${element.columnSequence}_N`" :value="false" :disabled="element.postMappColumn === 'CLASSIFICATION_NAME' || element.postMappColumn === 'NOTICE_LABEL'" />
                      <label class="form-check-label" :for="`column_${element.columnSequence}_N`">{{ $t('sdl.common.label.nonUse') }}</label>
                  </div>
                </td>
                <td class="text-center">
                  <div class="input-group m-auto" style="width: 100px">
                    <sdl-regex-input v-model="element.columnWidth" :regExp="/^[0-9]*$/g" class="form-control text-end" v-validation="" :errorMessage="$t('sdl.board.alert.valid.colWidth')"></sdl-regex-input>
                    <span class="input-group-text">%</span>
                  </div>
                </td>
                <td>
                  <div class="input-group">
                    <select v-model="element.postMappColumn" class="form-select" style="width: 25%" @change="changePostColumn(element.postMappColumn)">
                      <option v-for="opt in defaultColumns" :value="opt.code" :key="opt.code">{{ $t(opt.labelCode) }}</option>
                    </select>
                    <input v-model="element.columnLabelCode" type="text" readonly="readonly" class="form-control" style="width: 75%" />
                  </div>
                </td>
              </tr>
            </template>
          </draggable>
        </table>
        <h5 class="mb-3">{{ $t('sdl.board.label.list.sort') }}</h5>
        <table class="table table-bordered ui--table-form mb-5">
          <colgroup>
            <col style="width: 40%" />
            <col style="width: 60%" />
          </colgroup>
          <thead>
            <tr>
              <th scope="col">{{ $t('sdl.board.label.columnName') }}</th>
              <th scope="col">{{ $t('sdl.board.label.sort') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <select v-model="boardInfo.sortColumn" class="form-select">
                  <option v-for="opt in alignColumns" :value="opt.code" :key="opt.code">{{ $t(opt.labelCode) }}</option>
                </select>
              </td>
              <td>
                <div class="form-check form-check-inline">
                  <input v-model="boardInfo.sortMethod" class="form-check-input" type="radio" id="sortMethod_asc" value="ASC" />
                  <label class="form-check-label" for="sortMethod_asc">{{ $t('sdl.board.label.asc') }}</label>
                </div>
                <div class="form-check form-check-inline">
                  <input v-model="boardInfo.sortMethod" class="form-check-input" type="radio" id="sortMethod_desc" value="DESC" />
                  <label class="form-check-label" for="sortMethod_desc">{{ $t('sdl.board.label.desc') }}</label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
      <hr class="mb-4" />
      <div class="ui--button-container">
        <button class="btn btn-secondary btn-lg" type="button" @click="moveListPage()">
          {{ $t('sdl.common.label.list') }}
        </button>
        <button class="btn btn-secondary btn-lg" type="button" v-if="boardId && !boardInfo.deleted" @click="deleteBoard()" v-authorization="'execute'">
          {{ $t('sdl.common.label.delete') }}
        </button>
        <button class="btn btn-primary btn-lg" type="button" @click="saveBoard()" v-authorization="['update', 'execute']">
          {{ !boardId ? $t('sdl.common.label.register') : $t('sdl.common.label.save') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import _ from 'lodash';
import draggable from 'vuedraggable';
import SDLUtil from '@/utils/SDLUtil';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      pageTitle: '',
      boardId: this.$route.params.boardId,
      boardInfo: { boardId: '' },
      pageSizeOption: [5, 10, 12, 15, 20, 30],
      picturePageSizeOption: [4, 8, 12, 16],
      defaultColumns: [
        { code: 'NOTICE_LABEL', labelCode: 'sdl.board.label.notice', alignUsed: false },
        { code: 'CLASSIFICATION_NAME', labelCode: 'sdl.board.label.classification', alignUsed: true },
        { code: 'POST_TITLE', labelCode: 'sdl.common.label.title', alignUsed: true },
        { code: 'NOTICE_POPUP_START_DATE', labelCode: 'sdl.board.label.noticePopupStartDate', alignUsed: true },
        { code: 'NOTICE_POPUP_END_DATE', labelCode: 'sdl.board.label.noticePopupEndDate', alignUsed: true },
        { code: 'REGR_NAME', labelCode: 'sdl.board.label.regUser', alignUsed: true },
        { code: 'REG_DATE', labelCode: 'sdl.board.label.regDate', alignUsed: true },
        { code: 'HIT_COUNT', labelCode: 'sdl.board.label.hitCount', alignUsed: true },
      ],
      dragOptions: {
        animation: 200,
        disabled: false,
        ghostClass: 'ghost',
      },
    };
  },
  computed: {
    // List of columns to be sorted
    alignColumns() {
      return this.defaultColumns.filter(col => col.alignUsed);
    },
    // Calculate column width sum (based on column used)
    sumColumnWidth() {
      if (this.boardInfo.columns) {
        return _.sumBy(
          this.boardInfo.columns.filter(col => col.used),
          col => _.toInteger(col.columnWidth),
        );
      }
      return 0;
    },
  },
  methods: {
    /**
     * param:
     * return:
     * exception:
     * description : Initialize Page
     */
    init() {
      // Set the title of the page.
      this.pageTitle = this.boardId ? SDLUtil.getMsgProp('sdl.board.label.bbsReg') : SDLUtil.getMsgProp('sdl.board.label.bbsMod');
      // Initialize board information for registration
      if (!this.boardId) {
        this.boardInfo = {
          boardId: '',
          boardName: '',
          boardType: 'BASIC',
          pageSize: '10',
          noticePopupUsed: false,
          noticePopupUnfoldUsed: false,
          noticeLabelUsed: false,
          editorUsed: false,
          answerUsed: true,
          commentUsed: true,
          fileAttachUsed: true,
          imageAttachUsed: false,
          description: '',
          classificationUsed: false,
          searchConditionUsed: true,
          searchClassificationUsed: true,
          searchDateUsed: true,
          classifications: [{ classificationId: _.uniqueId('class_'), classificationName: '', description: '' }],
          sortColumn: 'POST_TITLE',
          sortMethod: 'DESC',
          deleted: false,
        };
      } else {
        // Initialize board information for detail / edit
        this.getBoardInfo();
      }
    },
    /**
     * param:
     * return:
     * exception:
     * description : Retrieving board information
     */
    getBoardInfo() {
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/boards/${this.boardId}`)
        .then(({ data }) => {
          this.boardInfo = data;
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
        });
    },
    setBoardType() {
      _.assign(this.boardInfo, {
        pageSize: '10',
      });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Force some properties when the bulletin board type is an image
     */
    setImageBoardType() {
      _.assign(this.boardInfo, {
        pageSize: 8,
        answerUsed: false,
        imageAttachUsed: true,
        noticeLabelUsed: false,
        noticePopupUsed: false,
        noticePopupUnfoldUsed: false,
      });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Pop-up notice alterations.
     */
    changeNoticeUnfold() {
      if (_.eq(this.boardInfo.boardType, 'BASIC')) {
        this.boardInfo.noticePopupUnfoldUsed = !this.boardInfo.noticePopupUnfoldUsed;
      }
    },
    /**
     * param: code -> String
     * return:
     * exception:
     * description : Set column usage according to classification/notification label usage
     */
    changePostColumn(code) {
      if (!this.boardInfo.columns) return;
      this.boardInfo.columns
        .filter(col => _.eq(col.postMappColumn, code))
        .forEach(col => {
          col.columnLabelCode = _.find(this.defaultColumns, ['code', col.postMappColumn]).labelCode;
          // Sets whether to use columns according to classification / notice label usage
          if (_.eq(code, 'CLASSIFICATION_NAME') || _.eq(code, 'NOTICE_LABEL')) {
            col.used = _.eq(code, 'CLASSIFICATION_NAME') ? this.boardInfo.classificationUsed : this.boardInfo.noticeLabelUsed;
          }
        });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Add Classification.
     */
    addClassification() {
      this.boardInfo.classifications.push({
        classificationId: _.uniqueId('class_'),
        classificationName: '',
        description: '',
        append: !!this.boardId,
      });
    },
    /**
     * param: classificationId -> String
     * return:
     * exception:
     * description : Delete Classification.
     */
    deleteClassification(classificationId) {
      const idx = _.findIndex(this.boardInfo.classifications, ['classificationId', classificationId]);
      this.boardInfo.classifications.splice(idx, 1);
    },
    /**
     * param:
     * return:
     * exception:
     * description : Column sequence change
     */
    moveColumnList() {
      this.boardInfo.columns.map((col, idx) => {
        col.columnSequence = idx;
        return col;
      });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Input item verification
     */
    validateBoardInfo() {
      // Basic information input - Check the message board ID/Name input
      if (SDLUtil.onSubmitValidation()) return false;
      // Basic information input - Check classification item input
      // Delete if there is no input in line 1 that is seen as default
      const classes = this.boardInfo.classifications;
      if (_.eq(classes.length, 1) && _.isEmpty(classes[0].classificationName.trim()) && _.isEmpty(classes[0].description.trim())) {
        this.boardInfo.classifications = [];
      }
      // Basic information input - Check the presence of items when using classification items
      if (this.boardInfo.classificationUsed && _.isEmpty(this.boardInfo.classifications)) {
        SDLUtil.alert('sdl.board.alert.valid.classificationCount');
        return false;
      }
      // column information input - Check not entered items
      if (this.boardId) {
        if (_.find(this.boardInfo.columns, c => _.isEmpty(c.columnWidth.trim()))) {
          SDLUtil.alert('sdl.board.alert.valid.colWidth');
          return false;
        }
        // column information input - Verify that the sum of the width of the use column is 100%
        if (this.sumColumnWidth !== 100) {
          SDLUtil.alert('sdl.board.alert.valid.colWidth.sum');
          return false;
        }
      }
      return true;
    },
    /**
     * param:
     * return:
     * exception:
     * description : Save Board
     */
    saveBoard() {
      if (this.validateBoardInfo()) {
        if (!this.boardId) {
          SDLUtil.confirm({
            title: 'sdl.common.label.save',
            msg: 'sdl.common.message.doSave',
            okLabel: 'sdl.common.label.confirm',
            cancelLabel: 'sdl.common.label.cancel',
            onOkEvt: () =>
              axios
                .post(`${SDLUtil.API_URL}/boards`, this.boardInfo)
                .then(() => {
                  this.boardId = this.boardInfo.boardId;
                  SDLUtil.showLoadingBar(false);
                  this.refreshPage();
                })
                .catch(err => {
                  SDLUtil.errorAlert(err);
                }),
            onCancelEvt: () => console.log('cancel'),
          });
        } else {
          // Processing new classification IDs among classification items as spaces
          this.boardInfo.classifications.map(c => {
            if (c.append) c.classificationId = '';
            return c;
          });
          SDLUtil.confirm({
            title: 'sdl.common.label.save',
            msg: 'sdl.common.message.doSave',
            okLabel: 'sdl.common.label.confirm',
            cancelLabel: 'sdl.common.label.cancel',
            onOkEvt: () =>
              axios
                .put(`${SDLUtil.API_URL}/boards/${this.boardId}`, this.boardInfo)
                .then(() => {
                  SDLUtil.showLoadingBar(false);
                  this.refreshPage();
                })
                .catch(err => {
                  SDLUtil.errorAlert(err);
                }),
            onCancelEvt: () => console.log('cancel'),
          });
        }
      }
    },
    /**
     * param:
     * return:
     * exception:
     * description : Delete Board
     */
    deleteBoard() {
      SDLUtil.confirm({
        title: 'sdl.common.label.delete',
        msg: 'sdl.common.message.doDelete',
        okLabel: 'sdl.common.label.confirm',
        cancelLabel: 'sdl.common.label.cancel',
        onOkEvt: () =>
          axios
            .delete(`${SDLUtil.API_URL}/boards/${this.boardId}`)
            .then(() => {
              SDLUtil.showLoadingBar(false);
              this.moveListPage();
            })
            .catch(err => {
              SDLUtil.errorAlert(err);
            }),
        onCancelEvt: () => console.log('cancel'),
      });
    },
    /**
     * param:
     * return:
     * exception:
     * description : Move to List Page
     */
    moveListPage() {
      this.$router.push(`${this.$CONTEXT}/admin/boardMgmt/list`);
    },
    /**
     * param:
     * return:
     * exception:
     * description : Move to List Page
     */
    refreshPage() {
      this.$router.replace(`${this.$CONTEXT}/admin/boardMgmt/detail/${this.boardId}`);
      this.init();
    },
  },
  mounted() {
    this.$nextTick(() => {
      console.info('initialize SDL Admin BoardMgmt Detail Page');
      this.init();
    });
  },
};
</script>

<style>
.drag-handle {
  cursor: move;
}
</style>
