<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>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></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";

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

      // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
      selectedClassId: this.$route.query.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();
      }
    },
    setClassId() {
      sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
    },
  },
  watch: {},
  computed: {},
  components: {
    SvgIcon,
    ProgressBar,
  },
  mounted() {
    console.log("Main2 mounted");
    //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
    this.setClassId();
  },
};
</script>
