<template>
  <div class="header flex justify-end">
    <div class="setting" @click="logout">
      <img src="../../resources/img/setting.png" alt="" />
    </div>
    <div class="notice" @click="buttonSearch">
      <img src="../../resources/img/icon2.png" alt="" />
      <p>{{ unCheck }}</p>
    </div>
    <img src="../../resources/img/img03.png" alt="" />
    <div class="popup-wrap" v-show="searchOpen">
      <div class="popup-box">
        <div class="flex mb10 justify-between">
          <p class="popup-title">알림</p>
          <button type="button" class="popup-close-btn" @click="closeBtn">
            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
          </button>
        </div>
        <article class="flex justify-between mt20" v-for="(item, index) in dataList" :key="item.id"
          :class="{ 'selected-row': selectedRow == item.dataList }">
          <img style="width: fit-content" src="../../resources/img/img200_13p.png" alt="" />
          <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
          <button @click="buttonSearch2(item)" type="button" title="글쓰기" class="new-btn">
            자세히 보기
          </button>
        </article>
        <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px">
          <button @click="previousPage" :disabled="page === 1">이전</button>
          <button class="selected-btn">{{ page }}</button>
          <button @click="nextPage" :disabled="page === totalPages">
            다음
          </button>
        </article>
      </div>
    </div>
    <div class="popup-wrap popup2" v-show="searchOpen2">
      <div class="popup-box">
        <div class="flex mb10 justify-between">
          <p class="popup-title">알림 자세히 보기</p>
          <button type="button" class="popup-close-btn" @click="closeBtn2">
            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
          </button>
        </div>
        <div class="board-wrap">
          <div class="flex align-center">
            <label for="" class="title2">{{ boardData.bbsTtl }}</label>
          </div>
          <hr />
          <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea>
        </div>
        <div class="flex justify-center mt20">
          <button type="button" title="확인" class="new-btn" @click="closeBtn2">
            확인
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify, mdiWindowClose } from "@mdi/js";
import axios from "axios";
export default {
  data() {
    return {
      mdiWindowClose: mdiWindowClose,
      showModal: false,
      searchOpen: false,
      searchOpen2: false,

      // 게시글 정보
      dataList: [],
      totalBoard: null,
      selectedRow: "",
      unCheck: null,

      boardData: [],

      // 페이징 정보
      page: 1,
      pageSize: 2,
      totalpages: null,

      // 사용자 정보
      userId: "USID_000000000000006",
      stdId: "",
    };
  },
  methods: {
    closeModal() {
      this.showModal = false;
    },
    buttonSearch() {
      this.searchOpen = true;
    },
    buttonSearch2(item) {
      const vm = this;
      this.searchOpen2 = true;
      this.boardData = item;

      axios({
        url: "/board/boardStudentCheck.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          bbsId: item.bbsId,
          stdId: vm.stdId,
        },
      })
        .then(function (res) {
          vm.boardList();
        })
        .catch(function (error) {
          console.log("result - error : ", error);
        });
    },
    closeBtn() {
      this.searchOpen = false;
    },
    closeBtn2() {
      this.searchOpen2 = false;
    },

    logout() {
      const result = confirm('로그아웃 하시겠습니까?')
      if (result) {

      } else {
        return;
      }
      localStorage.removeItem('token');
      localStorage.removeItem("vuexState");

      this.goToPage('login');
    },
    goToPage(page) {
         this.$router.push({ name: page });
      },

    // 공지 조회
    boardList() {
      const vm = this;
      axios({
        url: "/board/boardStudentList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId },
      })
        .then(function (res) {
          vm.dataList = res.data.result[0].boardClass[0].board;
          vm.userNm = res.data.result[0].userNm;
          vm.userId = res.data.result[0].userId;
          vm.unCheck = res.data.unCheck;
          vm.stdId =
            res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId;
          vm.totalBoard = res.data.totalBoard;
          vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
        })
        .catch(function (error) {
          console.log("result - error : ", error);
        });
    },

    previousPage() {
      if (this.page > 1) {
        this.page -= 1;
        this.boardList();
      }
    },

    nextPage() {
      if (this.page < this.totalPages) {
        this.page += 1;
        this.boardList();
      }
    },
  },
  watch: {},
  computed: {},
  components: {
    SvgIcon,
  },
  mounted() {
    console.log("Header mounted");
    this.boardList();
  },
};
</script>
<style scoped>
.popup-wrap {
  position: fixed;
  background-color: transparent;
  width: fit-content;
  height: fit-content;
  z-index: 10;
}

.popup-box {
  top: 300px;
  left: 62%;
}

.popup2 .popup-box {
  top: 450px;
  left: 38%;
}
</style>
