<template>
  <div class="card ">
    <div class="card-body">
      <h2 class="card-title">부서별 근태현황</h2>
        <div class="name-box flex sb simple">
          <div class="img-area">
            <div class="img"><img :src="photoicon" alt="">
            </div>
          </div>
          <form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
            @submit.prevent="handleRegister" novalidate>
            <div class="col-12">
              <label for="yourName" class="form-label">아이디</label>
              <input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
                placeholder="admin">
            </div>
            <div class="col-12 ">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label>
                <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
              </div>

              <div class="col-12 border-x">
                <label for="yourPassword" class="form-label">부서</label>
                <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
                  required readonly placeholder="주식회사 테이큰 소프트">
              </div>
            </div>
            <div class="col-12 border-x">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label">직급</label>
                <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly
                  placeholder="과장">
              </div>

              <div class="col-12 border-x">
                <label for="yourPassword" class="form-label">직책</label>
                <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
                  required readonly placeholder="팀장">
              </div>
            </div>


          </form>
        </div>

      <div class="sch-form-wrap ">
        <div class="input-group">
          <select name="" id="" class="form-select">
              <option :value="currentYear">{{ currentYear }}년</option>
              <option value="all">전체</option>
              <option v-for="year in remainingYears" :key="year" :value="year" v-if="year !== currentYear">
                {{ year }}년
              </option>
            </select>
            <select name="" id="" class="form-select">
              <option :value="currentMonth">{{ currentMonth }}월</option>
              <option value="all">전체</option>
              <option v-for="month in remainingMonths" :key="month" :value="month" v-if="month !== currentMonth">
                {{ month }}월
              </option>
            </select>
          <select name="" id="" class="form-select">
                <option value="">전체</option>
                <option value="">지각</option>
                <option value="">조기퇴근</option>
                <option value="">결근</option>
                <option value="">출장</option>
                <option value="">대체휴가</option>
                <option value="">휴가</option>
                <option value="">공가</option>
                <option value="">병가</option>
          </select>
        </div>

      </div>
      <div class=" tbl-wrap tbl2">
        <table class="tbl data">
          <colgroup>
            <col style="width: 150px;">
            <col style="width: ">
            <col style="width: ">
            <col style="width: ">
            <col style="width: ">
            <col style="width: ">
            <!-- 더 많은 열 설정 -->
          </colgroup>
          <tbody>
            <tr class="thead">
              <td rowspan="2" class="th">근태 현황</td>
              <td>지각</td>
              <td>조기퇴근</td>
              <td>결근</td>
              <td>출장</td>
              <td>주말출근</td>
            </tr>
            <tr>
              <td>{{ late }}</td>
              <td>{{ earlyLeave }}</td>
              <td>{{ absence }}</td>
              <td>{{ businessTrip }}</td>
              <td>{{ weekendWork }}</td>
            </tr>
          </tbody>

        </table>
        <table class="tbl data">
          <colgroup>
            <col style="width: 150px;">
            <col span="">
            <col style="width: ">
            <col style="width: ">
            <col style="width: ">
            <!-- 더 많은 열 설정 -->
          </colgroup>
          <tbody>
            <tr class="thead">
              <td rowspan="2" class="th">휴가 현황</td>
              <td>연차</td>
              <td>대체휴가</td>
              <td>공가</td>
              <td>병가</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>

        </table>
      </div>
      <div class="tbl-wrap">
        <table id="myTable" class="tbl data">
          <colgroup>
            <col style="width: 200px;">
            <col style=" width: ">
          </colgroup>
          <thead>
            <tr>
              <th>연차 </th>
              <th>내용</th>
            </tr>
          </thead>
          <!-- 동적으로 <td> 생성 -->
          <tbody>
            <tr v-for="(item, index) in listData" :key="index">
              <td>{{ item.type }}</td>
              <td>{{ item.content }}</td>
            </tr>
          </tbody>
        </table>

      </div>
      <div class="pagination">
        <ul>
          <!-- 왼쪽 화살표 (이전 페이지) -->
          <li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
            &lt;
          </li>

          <!-- 페이지 번호 -->
          <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
            @click="changePage(page)">
            {{ page }}
          </li>

          <!-- 오른쪽 화살표 (다음 페이지) -->
          <li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
            &gt;
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
  data() {

    const today = new Date().toISOString().split('T')[0];
    return {
      currentMonth,
      selectedMonth: currentMonth,
      remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
      currentYear,
      selectedYear: currentYear,
      remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
      photoicon: "/client/resources/img/img1.png",
      currentPage: 1,
      totalPages: 3,
      late: '5', earlyLeave: '3', absence: '2', businessTrip: '1', weekendWork: '0',
      today: new Date().toLocaleDateString('ko-KR', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        weekday: 'short',
      }),
      dateicon: "/client/resources/img/img.png",
      startbtn: "/client/resources/img/start-sm.png",
      stopbtn: "/client/resources/img/stop-sm.png",
      startDate: today,
      startTime: "09:00", // 기본 시작 시간 09:00
      endDate: today,
      endTime: "18:00", // 기본 종료 시간 18:00
      category: "",
      dayCount: 1,
      reason: "", // 사유
      listData: [
        {
          type: '연차',
          content: '결재',
        }, {
          type: '반차',
          content: '전결',
        }],
    };
  },
  components: {
    SearchOutlined
  },
  computed: {
  },
  methods: {
    
    calculateDayCount() {
      const start = new Date(`${this.startDate}T${this.startTime}:00`);
      const end = new Date(`${this.endDate}T${this.endTime}:00`);

      let totalHours = (end - start) / (1000 * 60 * 60);  // 밀리초를 시간 단위로 변환

      if (this.startDate !== this.endDate) {
        // 시작일과 종료일이 다른경우
        const startDateObj = new Date(this.startDate);
        const endDateObj = new Date(this.endDate);
        const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
        if (this.startTime !== "09:00" || this.endTime !== "18:00") {
          this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
        } else {
          this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
        }
      } else {
        // 시작일과 종료일이 같은 경우
        if (this.startTime !== "09:00" || this.endTime !== "18:00") {
          this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
        } else {
          this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
        }
      }

    },
    
  },
  
};
</script>
