<template>
  <div class="pagetitle">
    <h1>프로젝트 내역</h1>
  </div>
  <!-- End Page Title -->
  <section class="section">
    <div class="row">
      <!-- 해당년도 연차 수 -->
      <!-- 전체 -->
      <div class="col-xxl-2 col-md-3">
        <button type="button" class="btn btn-light mb-2">
          전체 <span class="badge bg-secondary text-light">{{ filteredData.length }}개</span>
        </button>
      </div>
      <!-- End 전체 -->

      <!-- 사용 -->
      <div class="col-xxl-2 col-md-3">
        <button type="button" class="btn btn-light mb-2">
          사용 <span class="badge bg-secondary text-light">{{ filteredData.filter(item => item.acceptTerms).length }}개</span>
        </button>
      </div>
      <!-- End 사용 -->

      <!-- 미사용 -->
      <div class="col-xxl-2 col-xl-3">
        <button type="button" class="btn btn-light mb-2">
          미사용 <span class="badge bg-secondary text-light">{{ filteredData.filter(item => !item.acceptTerms).length }}개</span>
        </button>
      </div>
      <!-- End 미사용 -->

      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">프로젝트 내역</h5>
            <div class="d-flex pb-3 justify-content-between">

              <div class="datatable-search d-flex gap-1 ">
                <div class="col-xxl-5 col-md-4">
                  <select class="form-select" v-model="selectedYear">
                    <option value="">전체</option>
                    <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
                  </select>
                </div>
                <div class="col-xxl-5 col-md-4">
                  <select class="form-select" v-model="selectedMonth">
                    <option value="">월</option>
                    <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
                  </select>
                </div>
                <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-4"
                  @click="filterData">조회</button>

              </div>
              <div class="d-flex justify-content-end ">
                <button type="button" class="btn btn-outline-primary">
                  등록
                </button>
                <button type="button" class="btn btn-outline-secondary" @click="deletePending">
                  삭제
                </button>
              </div>

            </div>
            <!-- Table  -->
            <table id="myTable" class="table datatable table-hover table-bordered">
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th rowspan="2">No</th>
                  <th rowspan="2">프로젝트명</th>
                  <th rowspan="2">주관</th>
                  <th colspan="4" class="text-center">기간</th>
                  <th rowspan="2">총 투입일</th>
                  <th rowspan="2">비고</th>
                </tr>
                <tr>
                  <th data-type="date" data-format="YYYY/DD/MM">사업시작</th>
                  <th data-type="date" data-format="YYYY/DD/MM">사업종료</th>
                  <th data-type="date" data-format="YYYY/DD/MM">투입시작</th>
                  <th data-type="date" data-format="YYYY/DD/MM">투입종료</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in filteredData" :key="index">
                  <td>
                    <div class="form-check">
                      <label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
                      <input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
                    </div>
                  </td>
                  <td>{{ item.projectNm }}</td>
                  <td>{{ item.orgNm }}</td>
                  <td>{{ item.BstartDate }}</td>
                  <td>{{ item.BendDate }}</td>
                  <td>{{ item.MystartDate }}</td>
                  <td>{{ item.MyendDate }}</td>
                  <td>{{ item.totalDays }}</td>
                  <td>{{ item.rm }}</td>
                </tr>
              </tbody>
            </table>
            <!-- End Table -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      years: [2023, 2024, 2025],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      selectedYear: '',
      selectedMonth: '',
      ProjectData: [
        { projectNm: '프로젝트명', orgNm: '기관명', BstartDate: '2025-01-03', BendDate: '2025-01-01', MystartDate: '2025-01-03', MyendDate: '2025-01-05', totalDays: 0, rm: '비고', acceptTerms: false },
        { projectNm: '프로젝트명', orgNm: '기관명', BstartDate: '2024-01-03', BendDate: '2024-01-01', MystartDate: '2024-01-03', MyendDate: '2024-01-07', totalDays: 0, rm: '비고', acceptTerms: false },
        // 다른 항목들 추가
      ],
      filteredData: [],
    };
  },
  methods: {
    deletePending() {
      const selectedItems = this.ProjectData.filter(item => item.acceptTerms);
      const nonDeletableItems = selectedItems.filter(item => item.approvalStatus === true);
      if (nonDeletableItems.length > 0) {
        alert("승인된 건은 삭제할 수 없습니다.");
        return;
      }
      if (selectedItems.length > 0) {
        this.ProjectData = this.ProjectData.filter(item => !item.acceptTerms);
        alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
      } else {
        alert("선택된 항목이 없습니다.");
      }
    },
    filterData() {
      if (!this.selectedYear && !this.selectedMonth) {
        this.filteredData = this.ProjectData;
      } else {
        this.filteredData = this.ProjectData.filter(item => {
          const itemYear = new Date(item.BstartDate).getFullYear();
          const itemMonth = new Date(item.BstartDate).getMonth() + 1;

          return (
            (!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
            (!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
          );
        });
      }
      this.updateTotalDays();
    },
    updateTotalDays() {
      // filteredData에서 각 항목의 totalDays 계산
      this.filteredData.forEach(item => {
        const mystartDate = new Date(item.MystartDate);
        const myendDate = new Date(item.MyendDate);
        
        // 날짜 차이 계산 (밀리초 단위로 계산 후, 일수로 변환)
        const timeDiff = myendDate - mystartDate;
        const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
        item.totalDays = daysDiff >= 0 ? daysDiff : 0;
      });
    },
  },
  mounted() {
    const currentYear = new Date().getFullYear();
    this.selectedYear = currentYear;
    this.filteredData = this.ProjectData.filter(item => new Date(item.BstartDate).getFullYear() === currentYear);
    this.updateTotalDays();
  },
};
</script>

<style scoped></style>
