<template>
    <div class="card ">
    <div class="card-body">
      <h2 class="card-title">급여명세서 등록</h2>
      <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"><p>아이디<p class="require"><img :src="require" alt=""></p></p> </label>
              <input  v-model="selectedid" type="text" name="name" class="form-control" required readonly
                >
                <input type="button" class="form-control " value="검색" @click="showPopup1 = true" />
                <HrPopup v-if="showPopup1" @close="showPopup1 = false" @select="addApproval" />
            </div>
            <div class="col-12 ">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label ">이름</label>
                <input v-model="selectedname" type="text" class="form-control"  required  readonly>
              </div>

              <div class="col-12 border-x">
                <label for="yourPassword" class="form-label">부서</label>
                <input v-model="selecteddepartment" type="text"  class="form-control"
                  required readonly >
              </div>
            </div>
            <div class="col-12">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label">직급</label>
                <input v-model="selectedposition" type="text" class="form-control"  required readonly
                  >
              </div>

              <div class="col-12 border-x">
                <label for="yourPassword" class="form-label">직책</label>
                <input v-model="selectedrole" type="text"  class="form-control"
                  required readonly>
              </div>
            </div>
            <div class="col-12 border-x">
              <div class="col-12 border-x">
                <label for="youremail" class="form-label"><p>월<p class="require"><img :src="require" alt=""></p></p> </label>
                <select name="" id="" class="form-select">
              <option value="">월</option>
            </select>
              </div>

              <div class="col-12 border-x">
                <label for="yourPassword" class="form-label"><p>지급일<p class="require"><img :src="require" alt=""></p></p> </label>
                <input  type="date"  class="form-control"
                  required >
              </div>
            </div>


          </form>
          <div class="buttons" style="margin: 10px 0;">
        <button type="submit" class="btn btn-red sm">지난달 정보 불러오기</button>
        <button type="submit" class="btn primary sm" @click="showPopup = true">출장비 조회</button>
        <ChuljangListPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
      </div>
          <form class="row g-3  needs-validation" @submit.prevent="handleSubmit">
            <div class="col-12 form-title">매월지급</div>
        <div class="col-12">
          <label for="purpose" class="form-label"><p>지급  <button type="button" title="추가" @click="addPayment">
              <PlusCircleFilled />
            </button><p class="require"><img :src="require" alt=""></p></p> </label>
         <div class="approval-container">
           <div v-for="(payment, index) in payments" :key="index" class="d-flex gap-2 addapproval mb-2">
              <select class="form-select" style="width: 200px;" v-model="payment.category">
                    <option value="기본급">기본급</option>
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                  <input type="text" class="form-control" v-model="payment.pay" />
                  <button type="button" @click="removePayment(index)" class="delete-button">
                  <CloseOutlined />
                </button>
           </div>
         </div>
        </div>
        <div class="col-12 border-x">
          <label for="purpose" class="form-label"><p>공제  <button type="button" title="추가" @click="addGongje">
              <PlusCircleFilled />
            </button><p class="require"><img :src="require" alt=""></p></p> </label>
         <div class="approval-container">
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
                    <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
              <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
              <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
              <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
              <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
          <div class="d-flex addapproval">
            <select class="form-select" style="width: 200px;" >
              <option value="국민연금">국민연금</option>
                    <option value="">건강보험</option>
                    <option value="">고용보험</option>
                    <option value="">장기요양</option>
                    <option value="">소득세</option>
                    <option value="">지방소득세</option>
                  </select>
                  <input type="text" class="form-control"  />
          </div>
           <div v-for="(gongje, index) in gongjes" :key="index" class="d-flex  addapproval">
              <select class="form-select" style="width: 200px;" v-model="gongje.category">
                    <option value="">기본급</option>
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                  <input type="text" class="form-control" v-model="gongje.pay" />
                  <button type="button" @click="removeGongje(index)" class="delete-button">
                  <CloseOutlined />
                </button>
           </div>
         </div>
        
        </div>
      </form>
          <form class="row g-3  needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
            <div class="col-12 form-title">격월 또는 부정기 지급</div>
        <div class="col-12">
          <label for="purpose" class="form-label"><p>지급  <button type="button" title="추가" @click="addPayment2">
              <PlusCircleFilled />
            </button><p class="require"><img :src="require" alt=""></p></p> </label>
         <div class="approval-container">
           <div v-for="(payment, index) in payments2" :key="index" class="d-flex gap-2 addapproval mb-2">
              <select class="form-select" style="width: 200px;" v-model="payment.category">
                    <option value="선택">선택</option>
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                  <input type="text" class="form-control" v-model="payment.pay" />
                  <button type="button" @click="removePayment2(index)" class="delete-button">
                  <CloseOutlined />
                </button>
           </div>
         </div>
        </div>
        <div class="col-12 border-x">
          <label for="purpose" class="form-label"><p>공제  <button type="button" title="추가" @click="addGongje2">
              <PlusCircleFilled />
            </button><p class="require"><img :src="require" alt=""></p></p> </label>
         <div class="approval-container">
          
           <div v-for="(gongje, index) in gongjes2" :key="index" class="d-flex  addapproval">
              <select class="form-select" style="width: 200px;" v-model="gongje.category">
                    <option value="선택">선택</option>
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                  <input type="text" class="form-control" v-model="gongje.pay" />
                  <button type="button" @click="removeGongje2(index)" class="delete-button">
                  <CloseOutlined />
                </button>
           </div>
         </div>
        
        </div>
      </form>
          <form class="row g-3  needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
            <div class="col-12 form-title">계산방법<button type="button" title="추가" @click="addTr">
              <PlusCircleFilled />
            </button></div>
        <div class="col-12 border-x" >
        <div class="tbl-wrap tbl3">
          <table class="tbl">
            <thead>
              <tr>
                <th>지급</th>
                <th>산출식 또는 산출 방법</th>
                <th>지급액(원)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in listData" :key="index" >
                <td>
                <select class="form-select" v-model="item.payType">
                  <option value="">선택</option>
                  <option value=""></option>
                  <option value=""></option>
                </select>
              </td>
              <td><input type="text" class="form-control" v-model="item.formula" /></td>
              <td><input type="text" class="form-control" v-model="item.amount" /></td>
              </tr>
            </tbody>
          </table>
        </div>
        </div>
       
        
      </form>

      <form class="row g-3  needs-validation" @submit.prevent="handleSubmit" style="margin-top: 10px;">
            
        <div class="col-12 border-x">
          <label for="purpose" class="form-label">지급 </label>
          <input type="text" class="form-control">
          <label for="purpose" class="form-label">지급 </label>
          <input type="text" class="form-control">
          <label for="purpose" class="form-label">지급 </label>
          <input type="text" class="form-control">
        </div>
      </form>
    <div class="buttons">
        <button type="submit" class="btn primary">등록</button>
        <button type="submit" class="btn tertiary">취소</button>
      </div>
    </div>
    
</div>
    
</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from "../../../component/Popup/HrPopup.vue";
import ChuljangListPopup from "../../../component/Popup/ChuljangListPopup.vue";
export default {
    data() {
        return {
          showPopup: false,
          showPopup1: false,
          selectedid: '',
          selectedname: '',
          selectedposition: '',
          selectedrole: '',
          selecteddepartment: '',
          approvals: [],
          listData: [
          { payType: '', formula: '', amount: '' }
      ],
          payments: [ {
          category: '기본급',
          pay: '',
        },] ,
        gongjes: [ {
          category: '기본급',
          pay: '',
        },] ,
          payments2: [ {
          category: '선택',
          pay: '',
        },] ,
        gongjes2: [ {
          category: '선택',
          pay: '',
        },] ,
          require: "/client/resources/img/require.png",
            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(),
          
        }
    },
    components: {
    PlusCircleFilled, CloseOutlined, HrPopup, ChuljangListPopup
  },
    methods: {
      addApproval(selectedUser) {
      this.approvals.push({
        id: selectedUser.id,
        name: selectedUser.name,
        department: selectedUser.department,
        position: selectedUser.position,
        role: selectedUser.role,

      });

      this.selectedid = selectedUser.id; // 입력창에 표시
      this.selectedname = selectedUser.name; // 입력창에 표시
      this.selecteddepartment = selectedUser.department; // 입력창에 표시
      this.selectedposition = selectedUser.position; // 입력창에 표시
      this.selectedrole = selectedUser.role; // 입력창에 표시
      this.showPopup1 = false;
    },
      addTr() {
      this.listData.push({ payType: '', formula: '', amount: '' });
    },
      addPayment() {
      this.payments.push({
        category: '선택',
        pay: '',
      });
    },
    removePayment(index) {
      this.payments.splice(index, 1);
    },
      addGongje() {
      this.gongjes.push({
        category: '선택',
        pay: '',
      });
    },
    removeGongje(index) {
      this.gongjes.splice(index, 1);
    },
      addPayment2() {
      this.payments2.push({
        category: '선택',
        pay: '',
      });
    },
    removePayment2(index) {
      this.payments2.splice(index, 1);
    },
      addGongje2() {
      this.gongjes2.push({
        category: '선택',
        pay: '',
      });
    },
    removeGongje2(index) {
      this.gongjes2.splice(index, 1);
    },
        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: {

    },
    mounted() {
        console.log('main mounted');
        setInterval(() => {
            this.time = this.getCurrentTime();
        }, 1000);
    }
}
</script>
<style scoped>
tr{cursor: pointer;}
.approval-container{
  width: 100%;
}
.addapproval input{
  width: calc(100% - 240px);
}
</style>