<template>
  <div class="pagetitle">
    <h1>프로젝트 등록</h1>
  </div><!-- End Page Title -->

  <section class="section">
    <div class="card">
      <div class="card-body">

        <!-- Multi Columns Form -->
        <form class="row g-3 pt-3" @submit.prevent="handleSubmit">
          <div class="col-md-9">
            <label for="projectNm" class="form-label">프로젝트명</label>
            <input type="text" class="form-control" id="projectNm" v-model="projectNm" />
          </div>
          <div class="col-md-5">
            <label for="orgNm" class="form-label">주관사</label>
            <input type="text" class="form-control" id="orgNm" v-model="orgNm" />
          </div>
          <div class="col-md-5">
            <label for="inputName5" class="form-label">부서</label>
            <select id="inputState" class="form-select">
              <option selected></option>
              <option></option>
              <option></option>
              <option></option>
              <option></option>
              <option></option>
            </select>
          </div>
          <div class="col-md-9">
            <label for="rm" class="form-label">사업금액</label>
            <input type="text" class="form-control" id="rm" v-model="rm" />
          </div>
          <div class="col-md-5">
            <label for="startDate" class="form-label">사업기간</label>
            <div class="d-flex gap-1">
              <input type="date" class="form-control" id="BstartDate" v-model="BstartDate" />~
              <input type="date" class="form-control" id="BendDate" v-model="BendDate" />
            </div>
          </div>
          <div class="col-6">
            <label for="prvonsh" class="form-label">사업 투입인력</label>
            <div class="search-bar d-flex gap-2">
              <form class="search-form d-flex  align-items-center" method="POST" action="#"
                @submit.prevent="updateMember">
                <input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword">
                <button type="submit" title="Search"><i class="bi bi-search"></i></button>
              </form>
              <input type="text" class="select-member" :value="selectedMember.join(' ')" readonly>
            </div>
          </div>
          <div class="col-md-5">
            <label for="endDate" class="form-label">실제 투입기간</label>
            <div class="d-flex gap-1">
              <input type="date" class="form-control" id="MystartDate" v-model="MystartDate" />~
              <input type="date" class="form-control" id="MyendDate" v-model="MyendDate" />
              
            </div>
          </div>
          <div class="col-6">
            <label for="prvonsh" class="form-label">실제 투입인력</label>
            <div class="search-bar d-flex gap-2">
              <form class="search-form d-flex  align-items-center" method="POST" action="#"
                @submit.prevent="updateMember">
                <input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword">
                <button type="submit" title="Search"><i class="bi bi-search"></i></button>
              </form>
              <input type="text" class="select-member" :value="selectedMember.join(' ')" readonly>
            </div>
          </div>
          <div class="col-md-4">
            <label for="totalDays" class="form-label">총 투입일<span class="small"></span></label>
            <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
          </div>
          
          <div class="col-12">
            <label for="rm" class="form-label">비고</label>
            <input type="text" class="form-control" id="rm" v-model="rm" />
          </div>

          <div class="text-end">
            <button type="submit" class="btn btn-primary">등록</button>
            <button type="reset" class="btn btn-secondary">취소</button>
          </div>
        </form><!-- End Multi Columns Form -->

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

<script>
import { useAuthStore } from '../../stores/authStore';
export default {
  data() {
    const today = new Date().toISOString().split('T')[0];
    return {
      searchQuery: '',
      selectedMember: [],
      BstartDate: today,
      MystartDate: today,
      totalDays: 0, // 사용 휴가일 계산
      reason: "", // 사유
    };
  },
  computed: {
    // Pinia Store의 상태를 가져옵니다.
    loginUser() {
      const authStore = useAuthStore();
      return authStore.getLoginUser;
    },
  },
  methods: {
    updateMember() {
        // Add the search query to the selectedMembers array if it's not empty
        if (this.searchQuery.trim()) {
          this.selectedMember.push(this.searchQuery.trim());
        }
        // Clear the search query after adding it to selectedMembers
        this.searchQuery = '';
      },
    // 폼 검증 메서드
    validateForm() {
      // 필수 입력 필드 체크
      if (
        this.BstartDate &&
        this.BendDate &&
        this.MystartDate &&
        this.MyendDate &&
        this.totalDays > 0 
      ) {
        this.isFormValid = true;
      } else {
        this.isFormValid = false;
      }
    },
    
    handleSubmit() {
      this.validateForm(); // 제출 시 유효성 확인
      if (this.isFormValid) {
        alert("승인 요청이 완료되었습니다.");
        // 추가 처리 로직 (API 요청 등)
      } else {
        alert("모든 필드를 올바르게 작성해주세요.");
      }
    },
  },
  watch: {
    BstartDate: 'calculateDayCount',
    BendDate: 'calculateDayCount',
    MystartDate: 'calculateDayCount',
    MyendDate: 'calculateDayCount',
    rm: "validateForm",
  },
  
};
</script>
