<template>
  <div class="title-box flex justify-between mb20">
    <p class="title">내 사진첩</p>
  </div>
  <div class="myphoto mb30">
    <div>
      <div class="title-box flex justify-end mb40">
        <select name="" id="">
          <option
            v-for="classItem in classList"
            :key="classItem.sclsId"
            :value="classItem.sclsId"
            @click="
              currentPage = 1;
              stdPhotoSelectList(classItem.sclsId);
            "
          >
            {{ classItem.sclsNm }}
          </option>
        </select>
      </div>
      <div class="btnGroup" style="display: flex; flex-direction: column">
        <button
          v-for="n in totalPages"
          :key="n"
          @click="changePage(n)"
          type="button"
          title="페이지 버튼"
          class="tab-btn"
        >
          <img
            v-if="currentPage !== n"
            src="../../../resources/img/btn49_15s_normal.png"
            alt=""
          />
          <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
          <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
        </button>
      </div>
      <div v-if="selectedTab === 'tab1'" class="tab-box">
        <div class="flex justify-between">
          <div
            v-for="(photo, index) in (photoList?.result || []).slice(0, 3)"
            :key="index"
            class="photo"
            :style="{ transform: getRotation(index) }"
            @click="buttonSearch(photo)"
          >
            <div class="class">
              <div class="box">
                <div class="photo-container">
                  <img :src="fetchImage(photo.fileRpath)" alt="" />
                </div>
              </div>
              <div class="photo-text mt10 ml10">
                <div class="member ml30">{{ photo.likeData }}</div>
                <div class="title2">{{ photo.unitName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-between mt20">
          <div
            v-for="(photo, index) in (photoList?.result || []).slice(3, 6)"
            :key="index + 3"
            class="photo"
            :style="{ transform: getRotation(index + 3) }"
            @click="buttonSearch(photo)"
          >
            <div class="class">
              <div class="box">
                <div class="photo-container">
                  <img
                    :src="fetchImage(photo.fileRpath)"
                    alt=""
                    style="width: 150px"
                  />
                </div>
              </div>
              <div class="photo-text mt10 ml10">
                <div class="member ml30">{{ photo.likeData }}</div>
                <div class="title2">{{ photo.unitName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <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>

          <div
            class="photo-modal flex justify-between mt20"
            v-if="photoData.length > 0"
          >
            <div class="box">
              <div>
                <img
                  :src="fetchImage(photoData[0].fileRpath)"
                  alt=""
                  style="width: 640px; height: 480px"
                />
              </div>
            </div>
            <div class="photo-title-container">
              <div class="title1">
                {{ photoData[0].unitName }}을 마친
                <em class="yellow">{{ photoData[0].stdName }}</em
                >친구
              </div>
              <p class="title2 date">{{ photoData[0].photoDate }}</p>
            </div>
          </div>

          <div class="text flex justify-between mt20" v-else>
            <span class="title1">데이터를 불러올 수 없습니다.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      classList: [],
      photoList: [],

      photoData: [],

      currentPage: 1,
      pageSize: 6,
      totalPages: 1,

      mdiWindowClose: mdiWindowClose,
      selectedTab: "tab1",
      mdiMagnify: mdiMagnify,
      mdilArrowRight: mdilArrowRight,
      timer: "00:00",
      progress: 20,
      showModal: false,
      searchOpen: false,
      searchOpen2: false,
    };
  },
  methods: {
    stdClassesSelectList: function () {
      const vm = this;
      axios({
        url: "/classes/selectClass.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          userId: "1",
        },
      })
        .then(function (response) {
          console.log("classList - response : ", response.data);
          vm.classList = response.data.data;
          vm.currentPage = 1;
        })
        .catch(function (error) {
          console.log("classList - error : ", error);
          alert("학생 반 조회에 오류가 발생했습니다.");
        });
    },

    stdPhotoSelectList: function (sclsId) {
      const vm = this;
      axios({
        url: "/photo/stdPhotoList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          stdId: "1",
          sclsId: "1", // 여기에 sclsId들어가야함
          page: vm.currentPage,
          pageSize: vm.pageSize,
        },
      })
        .then(function (response) {
          console.log("photoList - response : ", response.data);
          vm.photoList = response.data;
          vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
        })
        .catch(function (error) {
          console.log("photoList - error : ", error);
          alert("반별 내 사진 조회에 오류가 발생했습니다.");
        });
    },

    getRotation(index) {
      const rotations = [2, -1, 1, -2, 1, -1];
      return `rotate(${rotations[index]}deg)`;
    },

    changePage(pageNumber) {
      this.currentPage = pageNumber;
      this.stdPhotoSelectList(this.selectedClassId);
    },

    closeModal() {
      this.showModal = false;
    },
    buttonSearch(photo) {
      if (!photo) return;

      const vm = this;
      this.searchOpen = true;
      axios({
        url: "/photo/photoDetail.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          photoId: photo.photoId,
        },
      })
        .then(function (response) {
          console.log("photoData - response : ", response.data);
          vm.photoData = response.data;
        })
        .catch(function (error) {
          console.log("photoData - error : ", error);
          alert("사진 조회에 오류가 발생했습니다.");
        });
    },

    closeBtn() {
      this.searchOpen = false;
    },
    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();
      }
    },

    // 사진 경로 불러오기
    imageSearch(photo) {
      if (!photo) return;

      const vm = this;
      this.searchOpen = true;
      axios({
        url: "/photo/photoDetail.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          photoId: photo.photoId,
        },
      })
        .then(function (response) {
          console.log("photoData - response : ", response.data);
          vm.photoData = response.data;
        })
        .catch(function (error) {
          console.log("photoData - error : ", error);
          alert("사진 조회에 오류가 발생했습니다.");
        });
    },
    fetchImage(fileRpath) {
      return "http://localhost:9080/" + fileRpath;
    },
  },
  watch: {},
  computed: {
    currentPhotos() {
      // 현재 페이지에 해당하는 사진들만 반환
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.photoList.result.slice(start, end);
    },
  },
  components: {
    SvgIcon,
    ProgressBar,
  },
  mounted() {
    console.log("Main2 mounted");
    this.stdClassesSelectList();
    this.stdPhotoSelectList();
  },
};
</script>

<style>
.btnGroup button {
  cursor: pointer;
  z-index: 100000;
}
.popup-wrap {
  z-index: 10000000;
}
.popup-box {
  top: 500px;
  width: 950px;
  height: 650px;
}

.class {
  width: 260px;
  height: 200px;
}

.photo-container {
  text-align: center;
}

.photo-container img {
  width: 150px;
  height: 110px;
}

.photo-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.photo-modal {
  flex-direction: column;
}

.photo-modal .box {
  text-align: center;
}

.photo-title-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
