<template>
  <div class="title-box flex justify-between mb40">
    <p class="title">반 관리</p>
  </div>
  <div class="wrap mb30">
    <div class="flex justify-between mb30 align-center">
      <label for="" class="title1">게시판</label>
      <div class="look-btn flex align-center" @click="goToPage('Board')">
        <p>자세히 보기</p>
        <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
      </div>
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <td>No.</td>
          <td>제목</td>
          <td>내용</td>
          <td>작성자</td>
          <td>등록일</td>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in dataList"
            :key="item.id"
            :class="{ 'selected-row': selectedRow == item.dataList }"
            @click="[goToPage('noticeDetail'), selectBoardList(item)]"
          >
            <td>{{ totalPosts - index }}</td>
            <td>{{ item.bbsTtl }}</td>
            <td>{{ item.bbsCls }}</td>
            <td>{{ userNm }}</td>
            <td>{{ item.bbsTm.substr(0, 16) }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="flex justify-between" style="gap: 30px">
    <div class="wrap mb30">
      <div class="flex justify-between mb30 align-center">
        <label for="" class="title1">학생 목록</label>
        <div class="look-btn align-center flex">
          <p>자세히 보기</p>
          <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
        </div>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <td>No.</td>
            <td>이름</td>
            <td>학년</td>
            <td>반</td>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="wrap mb30">
      <div class="flex justify-between mb30 align-center">
        <label for="" class="title1">책 </label>
        <div class="align-center flex look-btn">
          <p>자세히 보기</p>
          <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
        </div>
      </div>
      <div class="flex" style="gap: 50px">
        <div class="textbook">
          <div class="box" style="gap: 10px"></div>
          <div class="text">
            <p class="title1" style="color: #fff">A 교재</p>
            <div
              class="btnGroup mt15 flex align-center justify-end"
              style="gap: 10px"
            >
              <button>수정</button>
              <p>&#124;</p>
              <button @click="showConfirm('delete')">삭제</button>
            </div>
          </div>
        </div>
        <div class="textbook">
          <div class="box" style="gap: 10px"></div>
          <div class="text">
            <p class="title1" style="color: #fff">A 교재</p>
            <div
              class="btnGroup mt15 flex align-center justify-end"
              style="gap: 10px"
            >
              <button>수정</button>
              <p>&#124;</p>
              <button @click="showConfirm('delete')">삭제</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdilArrowRight } from "@mdi/light-js";
import ProgressBar from "../../component/ProgressBar.vue";
import axios from "axios";

export default {
  data() {
    return {
      mdiMagnify: mdiMagnify,
      mdilArrowRight: mdilArrowRight,
      timer: "00:00",
      progress: 20,

      // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
      selectedClassId: this.$route.query.sclsId,

      // 게시글 정보
      dataList: [],
      totalPosts: 0,
      selectedRow: "",
      bbsTm: "",

      // 페이징
      currentPage: 0,
      itemsPerPage: 5,

      // 반 아이디
      sclsId: "",
    };
  },
  methods: {
    goToPage(page) {
      this.$router.push({ name: page });
    },
    increaseProgress() {
      if (this.progress < 100) {
        this.progress += 10;
      }
    },
    showConfirm(type) {
      let message = "";
      if (type === "cancel") {
        message = "삭제하시겠습니까?";
      } else if (type === "reset") {
        message = "초기화하시겠습니까?";
      } else if (type === "save") {
        message = "등록하시겠습니까?";
      }

      if (confirm(message)) {
        this.goBack();
      }
    },

    // 게시글 조회
    boardList() {
      const vm = this;
      axios({
        url: "/board/findAll.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          page: vm.currentPage + 1,
          pageSize: vm.itemsPerPage,
          sclsId: vm.selectedClassId,
        },
      })
        .then(function (res) {
          console.log("dataList - response : ", res.data);

          vm.dataList = res.data.result[0].boardClass[0].board;
          vm.userNm = res.data.result[0].userNm;
          vm.userId = res.data.result[0].userId;
          vm.totalPosts = res.data.totalBoard;

          console.log(vm.userId);
        })
        .catch(function (error) {
          console.log("result - error : ", error);
        });
    },
    setClassId() {
      sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
      sessionStorage.removeItem("selectedBoardList");
      sessionStorage.removeItem("file");
      this.boardList();
    },

    // 게시글 정보 세션에 저장
    selectBoardList(item) {
      sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
    },
  },
  watch: {},
  computed: {},
  components: {
    SvgIcon,
    ProgressBar,
  },
  mounted() {
    console.log("Main2 mounted");
    //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
    this.setClassId();
  },
};
</script>
