<template>
    <div class="card ">
    <div class="card-body">
      <h2 class="card-title">직원별 급여명세서</h2>
      <form class="row g-3 needs-validation detail" :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 >
              </div>
            </div>
            <div class="col-12">
              <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
                  >
              </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>
              </div>
            </div>
            <div class="col-12 border-x">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label">월</label>
                <select name="" id="" class="form-select">
              <option value="">월</option>
            </select>
              </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>
              </div>
            </div>


          </form>

          <div class="tbl-wrap tbl2" style="margin-top: 3rem;">
      <table id="myTable" class="tbl data">
        <!-- 동적으로 <th> 생성 -->
        <thead>
          <tr class="toptitle"><th colspan="5" >세부내역</th></tr>
          <tr class="middletitle">
            <th colspan="3">지급</th>
            <th colspan="2">공제</th>
          </tr>
        </thead>
        <!-- 동적으로 <td> 생성 -->
        <tbody>
          <tr>
            <th rowspan="7">매월 지급 </th>
            <th>임금항목</th>
            <th>지급 금액(원)</th>
            <th>공제 항목</th>
            <th>공제 금액(원)</th>
          </tr>
          <tr >
           <td></td>
           <td></td>
           <td></td>
           <td></td>
          </tr>
          <tr >
           <td></td>
           <td></td>
           <td></td>
           <td></td>
          </tr>
          <tr >
           <td></td>
           <td></td>
           <td></td>
           <td></td>
          </tr>
          <tr >
           <td></td>
           <td></td>
           <td></td>
           <td></td>
          </tr>
          <tr >
           <td></td>
           <td></td>
           <td></td>
           <td></td>
          </tr>
          
        </tbody>
        <tbody>
          <tr>
            <th rowspan="3">격월 또는 부정기 지급</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th colspan="2">지급액 계</th>
            <td></td>
            <th >지금액 계</th>
            <td></td>
          </tr>
          <tr>
            <td colspan="3"></td>
            <th> 실수령액(원)</th>
            <td></td>
          </tr>
        </tbody>
      </table>
      <table id="myTable" class="tbl data" style="margin-top: 10px;">
        <!-- 동적으로 <th> 생성 -->
        <thead>
          <tr class="toptitle"><th colspan="3" >세부내역</th></tr>
          <tr >
            <th >구분</th>
            <th>산출식 또는 산출방법</th>
            <th>지급액(원)</th>
          </tr>
        </thead>
        <!-- 동적으로 <td> 생성 -->
        <tbody>
          <tr >
           <td></td>
           <td></td>
           <td></td>
          </tr>
          
          
        </tbody>
        
      </table>
      

    </div>
    <div class="buttons">
        <button type="submit" class="btn sm tertiary">목록</button>
      </div>
    </div>
    
</div>
    
</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"

export default {
    data() {
        return {
            photoicon: "/client/resources/img/photo_icon.png",
            img1: "/client/resources/img/img.png",
            icon1: "/client/resources/img/icon.png",
            dateicon: "/client/resources/img/date.png",
            startbtn: "/client/resources/img/start.png",
            stopbtn: "/client/resources/img/stop.png",
            moreicon: "/client/resources/img/more.png",
            today: new Date().toLocaleDateString('ko-KR', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                weekday: 'short',
            }),
            time: this.getCurrentTime(),
            listData: [
      {
        type: '내부',
        projectName: 'AI 개발 프로젝트',
        pm: '홍길동',
        budget: 50000000,
        period: '2024-01-01 ~ 2024-12-31',
        status: '진행중'
      },
      {
        type: '외부',
        projectName: '웹 리뉴얼',
        pm: '김영희',
        budget: 20000000,
        period: '2023-01-01 ~ 2023-12-31',
        status: '미진행'
      }
    ]
        }
    },
    methods: {
        formatBudget(amount) {
    return new Intl.NumberFormat().format(amount) + ' 원';
  },
        isPastPeriod(period) {
      // 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
      const endDateStr = period.split('~')[1]?.trim();
      if (!endDateStr) return false;

      const endDate = new Date(endDateStr);
      const today = new Date();

      // 현재 날짜보다 과거면 true
      return endDate < today;
    },
        getStatusClass(status) {
      return status === 'active' ? 'status-active' : 'status-inactive';
    },
    getStatusClass(status) {
  if (status === '미진행') return 'status-pending';
  if (status === '진행중') return 'status-approved';

  // Default empty string
  return '';
},
        getCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        },
        getCategoryClass(category) {
        switch (category) {
            case '용역': return 'category-service';
            case '내부': return 'category-internal';
            case '국가과제': return 'category-government';
            default: return '';
        }
    },
    },
    watch: {

    },
    computed: {

    },
    components: {
        GoogleCalendar,
    },
    mounted() {
        console.log('main mounted');
        setInterval(() => {
            this.time = this.getCurrentTime();
        }, 1000);
    }
}
</script>
<style scoped>
tr{cursor: pointer;}
</style>