<template>
  <div class="title-box flex justify-between mb40">
    <p class="title">홈</p>
  </div>
  <div class="content-t">
    <div class="flex" style="gap: 50px" :style="{ flexWrap: 'wrap' }">
      <div
        class="class"
        v-for="classItem in classesList"
        :key="classItem.sclsId"
      >
        <div
          class="box gd-col2"
          style="gap: 10px"
          @click="goToPage('ClassDetail', classItem.sclsId)"
        >
          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
        </div>
        <div class="text flex justify-between mt20">
          <p class="title1">{{ classItem.sclsNm }}</p>
          <span class="member">{{ classItem.studentCount }}</span>
        </div>
        <div
          class="btnGroup mt15 flex align-center justify-end"
          style="gap: 10px"
        >
          <button @click="editModeModal(classItem.sclsId)">수정</button>
          <p>&#124;</p>
          <button @click="deleteClass(classItem.sclsId)">삭제</button>
        </div>
      </div>
      <div class="textbook-add">
        <button @click="addModeModal">
          <img src="../../../resources/img/btn32_98t_normal.png" alt="" />
        </button>
      </div>
      <!-- 팝업창 -->
      <div v-show="searchOpen" class="popup-wrap">
        <div class="popup-box">
          <div class="flex justify-between mb30">
            <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>
          <div class="search-wrap mb30">
            <input
              type="text"
              v-model="createClassName"
              class="data-wrap"
              placeholder=""
            />
            <!-- <button type="button" >
                            <img src="../../../resources/img/look_t.png" alt="">
                        </button> -->
          </div>
          <div class="flex justify-center">
            <button
              type="button"
              title="글쓰기"
              class="new-btn mr10"
              @click="closeBtn"
            >
              취소
            </button>
            <button
              type="button"
              title="등록"
              class="new-btn"
              @click="isEditMode ? updateClass() : insertClass()"
            >
              {{ isEditMode ? "수정" : "등록" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

      classesList: [], // 불러온 반 정보
      user_id: "2", //유저 아이디 : 현재는 고정
      createClassName: "", // 생성 또는 수정할 반 이름

      isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
      current_editId: "", // 현재 수정할 반 id
    };
  },
  methods: {
    goToPage(page, sclsId) {
      //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
      this.$router.push({ name: page, query: { sclsId: sclsId } });
    },
    closeModal() {
      this.showModal = false;
    },
    editModeModal(sclsId) {
      this.searchOpen = true;
      this.isEditMode = true; // 수정 모드로 설정
      this.current_editId = sclsId;
    },
    addModeModal() {
      this.searchOpen = true;
      this.isEditMode = false; // 추가 모드로 설정
    },
    closeBtn() {
      this.searchOpen = false;
      this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
    },
    showConfirm(type, callback) {
      let message = "";
      if (type === "delete") {
        message = "삭제하시겠습니까?";
      } else if (type === "reset") {
        message = "초기화하시겠습니까?";
      } else if (type === "save") {
        message = "등록하시겠습니까?";
      } else if (type === "edit") {
        message = "수정하시겠습니까?";
      }

      if (confirm(message)) {
        if (callback) callback(); // 콜백 함수 호출
      }
    },
    // 조회
    selectClass() {
      sessionStorage.removeItem("sclsId");
      axios({
        url: "/classes/selectClass.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          userId: this.user_id,
        },
      })
        .then((res) => {
          if (res.data.status === "success") {
            console.log("classesList - response(조회) : ", res.data.data);
            this.classesList = res.data.data;
          } else {
            console.log("조회에 실패했습니다: ", res.data);
            alert("조회에 실패했습니다.");
          }
        })
        .catch((err) => {
          console.log("classesList - error(조회) : ", err);
          alert("조회에 오류가 발생했습니다.");
        });
    },
    // 추가
    insertClass() {
      if (this.createClassName.trim() === "") {
        alert("반 이름을 입력해주세요");
      } else {
        this.showConfirm("save", () => {
          axios({
            url: "/classes/insertClass.json",
            method: "post",
            headers: {
              "Content-Type": "application/json; charset=UTF-8",
            },
            data: {
              userId: this.user_id,
              sclsNm: this.createClassName,
            },
          })
            .then((res) => {
              if (res.data.status === "success") {
                console.log("classesList - response(추가) : ", res.data.data);
                this.selectClass();
                this.createClassName = ""; // 반 이름 초기화
                this.closeBtn(); // 생성 모달 닫기
              } else {
                console.log("추가에 실패했습니다: ", res.data);
                alert("추가에 실패했습니다.");
              }
            })
            .catch((err) => {
              console.log("classesList - error(추가) : ", err);
              alert("추가에 오류가 발생했습니다.");
            });
        });
      }
    },
    // 삭제
    deleteClass(sclsId) {
      this.showConfirm("delete", () => {
        axios({
          url: "/classes/deleteClass.json",
          method: "post",
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
          data: {
            sclsId: sclsId,
          },
        })
          .then((res) => {
            if (res.data.status === "success") {
              console.log("classesList - response(삭제) : ", res.data.data);
              this.selectClass();
            } else {
              console.log("삭제에 실패했습니다: ", res.data);
              alert("삭제에 실패했습니다.");
            }
          })
          .catch((err) => {
            console.log("classesList - error(삭제) : ", err);
            alert("삭제에 오류가 발생했습니다.");
          });
      });
    },
    // 수정
    updateClass() {
      if (this.createClassName.trim() === "") {
        alert("반 이름을 입력해주세요");
      } else {
        this.showConfirm("edit", () => {
          axios({
            url: "/classes/updateClass.json",
            method: "post",
            headers: {
              "Content-Type": "application/json; charset=UTF-8",
            },
            data: {
              sclsId: this.current_editId,
              sclsNm: this.createClassName,
            },
          })
            .then((res) => {
              if (res.data.status === "success") {
                console.log("classesList - response(수정) : ", res.data.data);
                this.selectClass();
                this.createClassName = ""; // 반 이름 초기화
                this.current_editId = ""; // 반 Id 초기화
                this.closeBtn(); // 팝업 닫기
              } else {
                console.log("수정에 실패했습니다: ", res.data);
                alert("수정에 실패했습니다.");
              }
            })
            .catch((err) => {
              console.log("classesList - error(수정) : ", err);
              alert("수정에 오류가 발생했습니다.");
            });
        });
      }
    },
  },
  watch: {},
  computed: {},
  components: {
    SvgIcon,
  },
  mounted() {
    console.log("Main2 mounted");
    this.selectClass();
  },
};
</script>

<style>
.content-t {
  flex-wrap: wrap;
  height: 90%;
  overflow-y: scroll;
}
</style>
