<!--
  Program: main page
  Author: SDL
  Brief: Page to enter after login
-->
<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <!--Contents Area -->
    <!-- jumbotron -->
    <div class="jumbotron index-img" style="background-image: url('/static/image/main/grainy-gradients.jpg')">
      <span class="index-gradient"></span>
      <div class="container">
        <div class="row">
          <div class="col-7 text-center mx-auto">
            <div class="text-center mx-auto main-text">
              <strong>{{ $t('sdl.common.projectName') }} System Summary</strong>
              <p>The {{ $t('sdl.common.projectName') }} provides a comprehensive programming, configuration model and reuseable common module for modern Java-based enterprise applications.</p>
              <p class="mt-4">
                <button class="btn btn-main-primary me-2" type="submit">Primary</button>
                <button class="btn btn-main-secondary me-2" type="submit">Secondary</button>
                <a href="javascript:" class="link-main">Link<i class="bi bi-arrow-right ms-1"></i></a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- Wave -->
      <div class="position-absolute w-100 z-index-1 bottom-0">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
          </defs>
          <g class="moving-waves">
            <use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(255,255,255,0.40)"></use>
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
            <use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
            <use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
            <use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(255,255,255,0.95)"></use>
          </g>
        </svg>
      </div>
      <!-- //Wave -->
    </div>
    <!-- //jumbotron -->
    <!-- row welcome -->
    <div class="mcontents box-welcome-example">
      <div class="container">
        <div class="row">
          <div class="box-welcome-example-in">
            <div class="row">
              <div class="col-3 position-relative">
                <!-- in -->
                <div class="row align-items-center p-4">
                  <div class="col-4"><i class="bi bi-envelope statistic-icon icon-size-36"></i></div>
                  <div class="col-8">
                    <div class="text-end">
                      <a href="javascript:" class="statistic-content">8</a>
                      <p class="text-muted statistic-title">Email</p>
                    </div>
                  </div>
                </div>
                <hr />
                <!-- // in -->
              </div>
              <div class="col-3 position-relative">
                <!-- in -->
                <div class="row align-items-center p-4">
                  <div class="col-4"><i class="bi bi-clipboard-check statistic-icon icon-size-36"></i></div>
                  <div class="col-8">
                    <div class="text-end">
                      <a href="javascript:" class="statistic-content">5</a>
                      <p class="text-muted statistic-title">Approval</p>
                    </div>
                  </div>
                </div>
                <!-- // in -->
                <hr />
                <!-- // in -->
              </div>
              <div class="col-3 position-relative">
                <!-- in -->
                <div class="row align-items-center p-4">
                  <div class="col-4"><i class="bi bi-calendar4-week statistic-icon icon-size-36"></i></div>
                  <div class="col-8">
                    <div class="text-end">
                      <a href="javascript:" class="statistic-content">10</a>
                      <p class="text-muted statistic-title">Schedule</p>
                    </div>
                  </div>
                </div>
                <!-- // in -->
                <hr />
              </div>
              <div class="col-3">
                <!-- in -->
                <div class="row align-items-center p-4">
                  <div class="col-4"><i class="bi bi-list-check statistic-icon icon-size-36"></i></div>
                  <div class="col-8">
                    <div class="text-end">
                      <a href="javascript:" class="statistic-content">2</a>
                      <p class="text-muted statistic-title">Task</p>
                    </div>
                  </div>
                </div>
                <!-- // in -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- row card -->
    <div class="mcontents mcontents-bg-white box-card-example">
      <div class="container">
        <!-- inner -->
        <div class="row g-4">
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-gem icon-size-36"></i></div>
              <h5>Diamond</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-box icon-size-36"></i></div>
              <h5>Red Garnet</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-tv icon-size-36"></i></div>
              <h5>Purple Amethyst</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-window-sidebar icon-size-36"></i></div>
              <h5>Green Emerald</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-type icon-size-36"></i></div>
              <h5>Zoo Pearl</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
          <div class="col-4">
            <div class="example-box-1 rounded-4 example-box-link transition-ease-5">
              <div class="d-inline-block rounded-2"><i class="bi bi-file-earmark-check icon-size-36"></i></div>
              <h5>Yellow Citrine</h5>
              <p>
                Presents standards and recommendations for screen design and design application...<br /><a href="javascript:">Read More<i class="bi bi-arrow-right ms-1 mt-3"></i></a>
              </p>
            </div>
          </div>
        </div>
        <!-- //inner -->
      </div>
    </div>

    <!-- row tab contents -->
    <div class="mcontents mcontents-bg-gray box-tab-example">
      <div class="container">
        <!-- inner -->
        <div class="section-heading2 text-center">
          <h4>Header Title</h4>
        </div>
        <nav class="mb-5">
          <ul class="nav nav-pills justify-content-center">
            <li class="nav-item">
              <a class="nav-link active" id="nav-1-tab" data-bs-toggle="tab" data-bs-target="#nav-1" type="button" role="tab" aria-controls="nav-1" aria-selected="true">Apple</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-2-tab" data-bs-toggle="tab" data-bs-target="#nav-2" type="button" role="tab" aria-controls="nav-2" aria-selected="false">Lemon</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-3-tab" data-bs-toggle="tab" data-bs-target="#nav-3" type="button" role="tab" aria-controls="nav-3" aria-selected="false">Tomato</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="nav-4-tab" data-bs-toggle="tab" data-bs-target="#nav-4" type="button" role="tab" aria-controls="nav-4" aria-selected="false">Strawberry</a>
            </li>
          </ul>
        </nav>
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-1" role="tabpanel" aria-labelledby="nav-1-tab" tabindex="0">
            <!-- tab contents -->
            <div class="row g-4">
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 300px">1 of Apple</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 300px">2 of Apple</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 300px">3 of Apple</div>
              </div>
            </div>
            <!-- //tab contents -->
          </div>
          <div class="tab-pane fade" id="nav-2" role="tabpanel" aria-labelledby="nav-2-tab" tabindex="0">
            <!-- tab contents -->
            <div class="row g-4">
              <div class="col-4">
                <div class="example-box-2 rounded-4 mb-4" style="height: 138px">1 of Group1</div>
                <div class="example-box-2 rounded-4" style="height: 138px">2 of Group1</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 300px">1 of Group2</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4 mb-4" style="height: 138px">1 of Group3</div>
                <div class="example-box-2 rounded-4" style="height: 138px">2 of Group3</div>
              </div>
            </div>
            <!-- //tab contents -->
          </div>
          <div class="tab-pane fade" id="nav-3" role="tabpanel" aria-labelledby="nav-3-tab" tabindex="0">
            <!-- tab contents -->
            <div class="row g-4">
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">1 of Tomato</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">1 of Tomato</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">3 of Tomato</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">4 of Tomato</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">5 of Tomato</div>
              </div>
              <div class="col-4">
                <div class="example-box-2 rounded-4" style="height: 138px">6 of Tomato</div>
              </div>
            </div>
            <!-- //tab contents -->
          </div>
          <div class="tab-pane fade" id="nav-4" role="tabpanel" aria-labelledby="nav-4-tab" tabindex="0">
            <!-- tab contents -->
            <div class="row g-4">
              <div class="col-6">
                <div class="example-box-2 rounded-4" style="height: 300px">1 of Group1</div>
              </div>
              <div class="col-6">
                <div class="row g-4">
                  <div class="col-6"><div class="example-box-2 rounded-4" style="height: 138px">1 of Group2</div></div>
                  <div class="col-6"><div class="example-box-2 rounded-4" style="height: 138px">2 of Group2</div></div>
                  <div class="col-6"><div class="example-box-2 rounded-4" style="height: 138px">3 of Group2</div></div>
                  <div class="col-6"><div class="example-box-2 rounded-4" style="height: 138px">4 of Group2</div></div>
                </div>
              </div>
            </div>
            <!-- //tab contents -->
          </div>
        </div>
        <!-- //inner -->
      </div>
    </div>

    <!-- row card group -->
    <div class="mcontents mcontents-bg-white">
      <div class="container">
        <!-- inner -->
        <div class="section-heading2">
          <h4>Header Title</h4>
        </div>
        <div class="row mb-4">
          <div class="col-1"><div class="example-card-group">Planet</div></div>
          <div class="col-11">
            <div class="row g-4">
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">Design</span>
                    <h5 class="card-title">Mercury</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#TV</a> <a href="javascript:">#OLED</a>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">App</span>
                    <h5 class="card-title">Venus</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#Cook</a> <a href="javascript:">#Cool</a>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">Dev</span>
                    <h5 class="card-title">Earth</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#Galaxybook</a> <a href="javascript:">#PC</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-1"><div class="example-card-group">Color</div></div>
          <div class="col-11">
            <div class="row g-4">
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">App</span>
                    <h5 class="card-title">Green</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#TV</a> <a href="javascript:">#OLED</a>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">Dev</span>
                    <h5 class="card-title">Yellow</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#Cook</a> <a href="javascript:">#Cool</a>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="card">
                  <div class="card-body">
                    <span class="badge example-card-text mb-3">Design</span>
                    <h5 class="card-title">Violet</h5>
                    <p class="card-text">Presents standards and recommendations for screen design and design application...</p>
                    <hr />
                    <a href="javascript:">#Galaxybook</a> <a href="javascript:">#PC</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-block w-100 text-center mt-4 mb-4">
          <button type="button" class="btn btn-light">{{ $t('sdl.main.message.viewMore') }} <i class="bi bi-chevron-down"></i></button>
        </div>
      </div>
    </div>

    <!-- row link -->
    <div class="mcontents mcontents-bg-gray box-link-example">
      <div class="container">
        <!-- inner -->
        <div class="row">
          <div class="col">
            <a href="javascript:" class="d-flex justify-content-center">
              <i class="bi bi-sun icon-size-28 me-2"></i>
              <div class="fs-5 fw-bold">Link Sun</div>
            </a>
          </div>
          <div class="col">
            <a href="javascript:" class="d-flex justify-content-center">
              <i class="bi bi-cloud icon-size-28 me-2"></i>
              <div class="fs-5 fw-bold">Link Cloud</div>
            </a>
          </div>
          <div class="col">
            <a href="javascript:" class="d-flex justify-content-center">
              <i class="bi bi-umbrella icon-size-28 me-2"></i>
              <div class="fs-5 fw-bold">Link Rain</div>
            </a>
          </div>
          <div class="col">
            <a href="javascript:" class="d-flex justify-content-center">
              <i class="bi bi-snow icon-size-28 me-2"></i>
              <div class="fs-5 fw-bold">Link Snow</div>
            </a>
          </div>
          <div class="col">
            <a href="javascript:" class="d-flex justify-content-center">
              <i class="bi bi-wind icon-size-28 me-2"></i>
              <div class="fs-5 fw-bold">Link Wind</div>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- row notice -->
    <div class="mcontents mcontents-bg-white">
      <!-- contents in -->
      <div class="container">
        <div class="row">
          <div class="col-4">
            <div class="board-box">
              <header class="group-header">
                <h4>{{ $t('sdl.main.message.notice') }}</h4>
                <small>
                  <router-link :to="$CONTEXT + '/board/notice/user/list'">
                    {{ $t('sdl.main.message.viewMore') }}
                  </router-link>
                </small>
              </header>
              <ul class="list-group list-border">
                <li class="list-group-item" v-for="row in noticeList" :key="row.postId" @click.prevent="$router.push(`${$CONTEXT}/board/notice/user/view/${row.postId}/default`)">
                  <a href="javascript:">{{ row.postTitle }}</a>
                  <small class="float-end">{{ $filters.dateFormat(row.regDate) }}</small>
                </li>
              </ul>
              <!--            1건 노출 방식-->
              <!--            <div class="boardlist-view">-->
              <!--              <a href="javascript:">-->
              <!--                <strong>{{ $t('sdl.common.projectName')}} 버전 업데이트 합니다</strong>-->
              <!--                <p>가장 최근의 공지사항을 노출합니다. 현재 이 페이지는 예시로 구성하였습니다. 마음대로 구성하세요.</p>-->
              <!--              </a>-->
              <!--              <small>2019-05-21</small>-->
              <!--            </div>-->
            </div>
          </div>
          <div class="col-4">
            <div class="board-box">
              <header class="group-header">
                <h4>FAQ</h4>
                <small>
                  <router-link :to="$CONTEXT + '/board/faq/user/list'">
                    {{ $t('sdl.main.message.viewMore') }}
                  </router-link>
                </small>
              </header>
              <!-- faq list -->
              <ul class="list-group list-border">
                <li class="list-group-item" v-for="row in faqList" :key="row.postId" @click.prevent="$router.push(`${$CONTEXT}/board/faq/user/view/${row.postId}/default`)">
                  <a href="javascript:">{{ row.postTitle }}</a>
                  <small class="float-end">{{ $filters.dateFormat(row.regDate) }}</small>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-4">
            <div class="border-start ps-5 h-100">
              <header class="group-header">
                <h4>최신 기사</h4>
              </header>
              <ul class="list-unstyled">
                <li class="mb-4">
                  <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center" href="javascript:">
                    <div class="example-box-3" style="height: 57px"></div>
                    <div class="col-lg-9">
                      <h6 class="mb-0 sdl-ellipsis">{{ $t('sdl.common.projectName') }} 버전 업데이트 합니다</h6>
                      <small class="text-body-secondary">2024-01-15</small>
                    </div>
                  </a>
                </li>
                <li>
                  <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center" href="javascript:">
                    <div class="example-box-3" style="height: 57px">해당 DIV를<br />이미지로 대체</div>
                    <div class="col-lg-9">
                      <h6 class="mb-0 sdl-ellipsis">Example post title</h6>
                      <small class="text-body-secondary">2024-01-15</small>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- // contents in -->
      </div>
      <!--//Contents Area -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil, StringUtil } from '@/utils';

export default {
  data() {
    return {
      userInfo: {},
      noticeList: [],
      faqList: [],
    };
  },
  methods: {
    // 리스트 조회
    getBoardList(boardId) {
      // 게시판 설정 정보에 따라 parameter 구성
      const params = {
        pageIndex: 1,
        boardId,
        pageSize: 4,
        // classificationId: this.boardInfo.searchClassificationUsed ? this.classificationId : null,
      };

      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/boards/${boardId}/posts-with-paging?${StringUtil.queryStringfy(params)}`)
        .then(({ data }) => {
          // console.log(data);
          // if (_.eq(this.boardInfo.boardType, 'BASIC')) this.convertBasicList(data.rows);
          // else this.convertPictureList(data.rows);
          // this.currentPage = data.currentPage;
          // this.records = data.records;
          // Loading bar hidden
          if (boardId === 'notice') {
            this.noticeList = data.rows;
          } else {
            this.faqList = data.rows;
          }

          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
    },
  },
  created() {
    this.userInfo = SDLUtil.getLoginedUserInfo();
    this.getBoardList('notice');
    this.getBoardList('faq');
  },
};
</script>
