<template>
  <div class="sidemenu">
    <div class="myinfo simple">
      <div class="name-box">
        <div class="img-area">
          <div><img :src="photoicon" alt="">
            <p class="name">OOO과장</p>
          </div>
          <div class="info">
            <p>솔루션 개발팀</p>
            <i class="fa-bars"></i>
            <p>팀장</p>
          </div>
        </div>
      </div>


      <details class="menu-box" :open="$route.name.toLowerCase().includes('vhcle')">
        <summary>
          <p>법인차량</p>
          <div class="icon"><img :src="topmenuicon" alt=""></div>
        </summary>
        <ul>
          <li> <router-link :to="{ name: 'VhcleList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
              <p>사용현황</p>
              <div class="icon" v-if="isExactActive">
                <img :src="menuicon" alt="">
              </div>
            </router-link></li>
          <li>
            <router-link :to="{ name: 'VhcleInfoManagement' }" exact-active-class="active-link"
              v-slot="{ isExactActive }">
              <p>차량정보 관리</p>
              <div class="icon" v-if="isExactActive">
                <img :src="menuicon" alt="">
              </div>
            </router-link>
          </li>


        </ul>
      </details>
      <details class="menu-box" :open="$route.name.toLowerCase().includes('card')">
        <summary>
          <p>법인카드</p>
          <div class="icon"><img :src="topmenuicon" alt=""></div>
        </summary>
        <ul>
          <li> <router-link :to="{ name: 'CardList' }" exact-active-class="active-link" v-slot="{ isExactActive }">
              <p>사용현황</p>
              <div class="icon" v-if="isExactActive">
                <img :src="menuicon" alt="">
              </div>
            </router-link></li>
          <li> <router-link :to="{ name: 'CardInfoManagement' }" exact-active-class="active-link"
              v-slot="{ isExactActive }">
              <p>카드정보 관리</p>
              <div class="icon" v-if="isExactActive">
                <img :src="menuicon" alt="">
              </div>
            </router-link></li>


        </ul>
      </details>
    </div>
  </div>
  <!-- End Page Title -->
  <div class="content">
    <router-view></router-view>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      photoicon: "/client/resources/img/photo_icon.png",
      menuicon: "/client/resources/img/menuicon.png",
      topmenuicon: "/client/resources/img/topmenuicon.png",
      // 데이터 초기화
      years: [2023, 2024, 2025], // 연도 목록
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
      selectedYear: '',
      selectedMonth: '',
      DeptData: [
        { member: '', deptNM: '', acceptTerms: false },
        // 더 많은 데이터 추가...
      ],
      filteredData: [],
    };
  },
  computed: {
  },
  methods: {
    async onClickSubmit() {
      // `useMutation` 훅을 사용하여 mutation 함수 가져오기
      const { mutate, onDone, onError } = useMutation(mygql);

      try {
        const result = await mutate();
        console.log(result);
      } catch (error) {
        console.error('Mutation error:', error);
      }
    },
    registerLeave() {
      console.log("등록 버튼 클릭됨");

      // Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
      this.DeptData = [
        ...this.DeptData,
        { member: '', deptNM: '', acceptTerms: false }
      ];

      console.log(this.DeptData); // 배열 상태 출력
    },
    saveChanges() {
      // 로컬스토리지에 DeptData 저장
      localStorage.setItem('DeptData', JSON.stringify(this.DeptData));
      console.log('데이터가 로컬스토리지에 저장되었습니다.');
    },
    deletePending() {
      // 선택된 항목만 필터링하여 삭제
      const selectedItems = this.DeptData.filter(item => item.acceptTerms);

      // 승인된 항목이 없으면 삭제 진행
      if (selectedItems.length > 0) {
        this.DeptData = this.DeptData.filter(item => !item.acceptTerms);
        alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
      } else {
        alert("선택된 항목이 없습니다.");
      }
    },
    // 날짜 필터 적용
    filterData() {
      this.filteredData = this.DeptData.filter(item => {
        const itemYear = new Date(item.startDate).getFullYear();
        const itemMonth = new Date(item.startDate).getMonth() + 1; // 월은 0부터 시작하므로 1을 더해줍니다.

        return (
          (!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
          (!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
        );
      });
    },

    // 페이지 변경
    changePage(page) {
      this.currentPage = page;
    },
  },
  created() {
    // 로컬스토리지에서 기존 데이터가 있으면 불러오기
    const storedData = localStorage.getItem('DeptData');
    if (storedData) {
      this.DeptData = JSON.parse(storedData);
    }
  },
  mounted() {

    // 처음에는 모든 데이터를 표시
    this.filteredData = this.DeptData;

  },
};
</script>

<style scoped></style>
