<template>
  <div class="side">
    <router-link to="/MyPlan.page">
      <div class="logo mb25">
        <img src="../../resources/img/logo2.png" alt="" />
      </div>
    </router-link>
    <div class="profile mb30">
      <div class="flex align-start">
        <img src="../../resources/img/img16_s.png" alt="" />
        <div class="ml25">
          <p class="name mb10">{{ studentInfo.studentName }}</p>
          <p class="mb5">
            {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
            {{ studentInfo.className }}
          </p>
          <!-- <progress-bar :progress="progress"></progress-bar> -->
          <span>지금까지 푼 총 문제 수:</span>
          <span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
        </div>
      </div>
      <hr />
      <p class="title2 mb25">최근 학습 히스토리</p>
      <ul class="flex justify-between ml30 mb30">
        <li
          v-for="historyItem in studentInfo.history"
          :key="historyItem.unitId"
        >
          [{{ historyItem.bookName }}] {{ historyItem.unitName }}
        </li>
      </ul>
    </div>
    <div class="ask mb30">
      <p class="title1 mb15">선생님께 질문 있어요~</p>

      <div class="memo mb15">
        <textarea
          name=""
          id=""
          placeholder="궁금한 것을 적어보세요."
          v-model="studentInfo.studentQuestion"
        ></textarea>
      </div>
      <div class="flex justify-end">
        <button @click="updateQuestion">질문하기</button>
      </div>
    </div>
    <div class="btn-wrap flex justify-between">
      <button class="login-btn" @click="handleClickEvent">
        <img src="../../resources/img/btn07_s.png" alt="" />
        <p>{{ buttonText }}</p>
      </button>

      <!-- <button class="login-btn" type="submit">
        <img src="../../resources/img/btn07_s.png" alt="" />
        <p>오늘 할 다른 공부</p>
      </button> -->
    </div>
  </div>
</template>

<script>
import ProgressBar from "../component/ProgressBar.vue";
import axios from "axios";

export default {
  data() {
    return {
      buttonText: "오답노트",
      progress: 20,
      studentInfo: {
        studentName: "",
        institutionName: "",
        grade: "",
        className: "",
        studentQuestion: "",
        history: [],
      },
      userId: "1", // userId 임시 설정
    };
  },
  methods: {
    // 학생 정보를 가져오는 메서드
    fetchStudentInfo() {
      axios
        .post("/studentInfo/getInfo.json", { userId: this.userId })
        .then((response) => {
          console.log(response.data);
          this.studentInfo = response.data;
        })
        .catch((error) => {
          console.error("학생 정보 가져오기 실패:", error);
        });
    },

    // 질문 업데이트 메서드
    updateQuestion() {
      axios
        .post("/studentInfo/updateQuestion.json", {
          userId: this.userId,
          studentQuestion: this.studentInfo.studentQuestion,
        })
        .then((response) => {
          console.log("질문이 성공적으로 업데이트되었습니다.");
          alert("질문이 성공적으로 업데이트되었습니다.");
        })
        .catch((error) => {
          console.error("질문 업데이트 실패:", error);
          alert("질문 업데이트에 실패했습니다.");
        });
    },

    handleClick() {
      this.toggleText();
      this.goToPage("PreviewNote");
    },

    handleClick() {
      this.toggleTextAndNavigate();
    },

    toggleTextAndNavigate() {
      if (this.buttonText === "오답노트") {
        this.buttonText = "학습 코스";
        this.goToPage("PreviewNote");
        // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
      } else {
        this.buttonText = "오답노트";
        this.goToPage("Dashboard");
        // 버튼 텍스트가 '오답노트'일 때 이동할 경로
      }
    },

    handleClickEvent() {
      this.goToPage("PreviewNote");
    },

    goToPage(page) {
      this.$router.push({ name: page });
    },
  },
  watch: {},
  computed: {},
  components: {
    ProgressBar,
  },
  mounted() {
    console.log("Side mounted");
    this.fetchStudentInfo();
  },
};
</script>
<style scoped>
.login-btn img {
  width: 430px;
  height: 85px;
}
</style>
