<template>
  <div class="pagetitle">
    <h2>프로젝트 등록</h2>
  </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>ux/ui</option>
            </select>
          </div>
          <div class="col-md-9">
            <label for="rm" class="form-label">사업금액</label>
            <input type="text" class="form-control" id="amount" v-model="amount" />
          </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"><PlusOutlined /></button>
              </form>
              <input type="text" class="select-member" :value="selectedMember.join(' ')" >
            </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"><PlusOutlined /></button>
              </form>
              <input type="text" class="select-member" :value="selectedMember.join(' ')" >
            </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 { PlusOutlined } from '@ant-design/icons-vue';

export default {
  data() {
    const today = new Date().toISOString().split('T')[0];
    return {
      searchQuery: '',
      selectedMember: [],
      projectNm: '', // Project name
      orgNm: '', // Organization name
      department: '', // Department selection
      amount: '',
      rm: '', // Business amount
      BstartDate: today, // Business start date
      BendDate: today, // Business end date
      MystartDate: today, // Actual start date
      MyendDate: today, // Actual end date
      totalDays: 1, // Total days
      reason: "", // Notes or remarks
    };
  },
  components: {
    PlusOutlined,
  },
  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(); // Validate the form when submitting
      if (this.isFormValid) {
        // Save form data to localStorage
        localStorage.setItem('projectFormData', JSON.stringify(this.$data));
        alert("승인 요청이 완료되었습니다.");
        // Additional processing logic (e.g., API request)
      } else {
        alert("모든 필드를 올바르게 작성해주세요.");
      }
    },
    loadFormData() {
      const savedData = localStorage.getItem('projectFormData');
      if (savedData) {
        this.$data = JSON.parse(savedData);
      }
      console.log(loadFormData)
    },
    
  },
  mounted() {
    // Load the saved form data when the page is loaded
    this.loadFormData();
  },
  watch: {
    projectNm: "saveFormData",
    orgNm: "saveFormData",
    department: "saveFormData",
    rm: "saveFormData",
    BstartDate: "saveFormData",
    BendDate: "saveFormData",
    MystartDate: "saveFormData",
    MyendDate: "saveFormData",
    totalDays: "saveFormData",
    reason: "saveFormData",
  },
  
};
</script>
