<template>
  <div class="card">

    <div class="card-body">
      <h2 class="card-title">프로젝트 등록</h2>
      <p class="require"><img :src="require" alt=""> 필수입력</p>
      <form class="row g-3  needs-validation" @submit.prevent="handleSubmit">

        <div class="col-12">
          <label for="purpose" class="form-label">
            <p>구분
            <p class="require"><img :src="require" alt=""></p>
            </p>
          </label>
          <select class="form-select" style="width: 110px;">
            <option value=""></option>
            <option value=""></option>
            <option value=""></option>
          </select>
        </div>
        <div class="col-12">
          <label for="inputName5" class="form-label">
            <p>프로젝트명
            <p class="require"><img :src="require" alt=""></p>
            </p>
          </label>
          <input type="text" class="form-control" />
        </div>
        <div class="col-12">
          <label for="inputName5" class="form-label">주관기관</label>
          <input type="text" class="form-control" />
        </div>
        <div class="col-12">
          <div class="col-12 border-x">
            <label for="where" class="form-label">
              <p>담당부서
              <p class="require"><img :src="require" alt=""></p>
              </p>
            </label>
            <input type="text" class="form-control" id="buseo" v-model="selectedDepartment" readonly />
            <input type="button" class="form-control " value="검색" @click="showPopup = true" />
            <BuseoPopup v-if="showPopup" @close="showPopup = false" @select="addBuseo" />
          </div>
          <div class="col-12 border-x">
            <label for="where" class="form-label">
              <p>프로젝트 책임자
              <p class="require"><img :src="require" alt=""></p>
              </p>
            </label>
            <input type="text" class="form-control" id="where" v-model="selectedname" readonly />
            <input type="button" class="form-control " value="검색" @click="showPopup1 = true" />
            <HrPopup v-if="showPopup1" @close="showPopup1 = false" @select="addApproval" />
          </div>

        </div>
        <div class="col-12">
          <div class="col-12 border-x">
            <label for="where" class="form-label">사업비</label>
            <input type="text" class="form-control" id="where" v-model="where" />
          </div>
          <div class="col-12 border-x">
            <label for="where" class="form-label">회의비</label>
            <input type="text" class="form-control" id="where" v-model="where" />
          </div>

        </div>
        <div class="col-12">
          <label for="startDate" class="form-label">
            <p>사업기간
            <p class="require"><img :src="require" alt=""></p>
            </p>
          </label>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="startDate" v-model="startDate" />
            <!-- 시간 선택을 위한 select 사용 -->
            ~
          </div>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="endDate" v-model="endDate" />
          </div>
        </div>
        <div class="col-12">
          <label for="startDate" class="form-label">계획기간</label>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="startDate" v-model="startDate" />
            <!-- 시간 선택을 위한 select 사용 -->
            ~
          </div>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="endDate" v-model="endDate" />
          </div>
        </div>
        <div class="col-12">
          <label for="startDate" class="form-label">실제기간</label>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="startDate" v-model="startDate" />
            <!-- 시간 선택을 위한 select 사용 -->
            ~
          </div>
          <div class="d-flex gap-1">
            <input type="date" class="form-control" id="endDate" v-model="endDate" />
          </div>
        </div>


        <div class="col-12 ">
          <label for="member" class="form-label">
            <p>투입인력 <button type="button" title="추가" @click="showPopup2 = true">
                <PlusCircleFilled />
              </button>
            <p class="require"><img :src="require" alt=""></p>
            </p>

          </label>
          <HrPopup v-if="showPopup2" @close="showPopup2 = false" @select="addApproval1"/>
          <div class="approval-container">
            <div v-for="(member, index) in approvals1" :key="index" class="d-flex gap-2 addapproval mb-2">
              <select class="form-select" style="width: 110px;" v-model="member.category">
                <option value="선택">선택</option>
                <option value=""></option>
                <option value=""></option>
              </select>
              <input type="text" class="form-control" v-model="member.name" style="max-width: 150px;" />


              <button type="button" @click="removeApproval(index)" class="delete-button">
                <CloseOutlined />
              </button>
            </div>
          </div>
        </div>

        <div class="col-12 chuljang border-x">
          <label for="prvonsh" class="form-label">비고</label>
          <input type="text" class="form-control textarea" id="reason" v-model="reason" />
        </div>


      </form>
      <div class="buttons">
        <button type="submit" class="btn primary">등록</button>
        <button type="reset" class="btn tertiary">취소</button>
      </div>
    </div>
  </div>
</template>

<script>
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from "../../../component/Popup/HrPopup.vue";
import BuseoPopup from "../../../component/Popup/BuseoPopup.vue";
export default {
  data() {
    const today = new Date().toISOString().split('T')[0];
    return {
      showPopup: false,
      showPopup1: false,
      showPopup2: false,
      buseos: [],
      selectedDepartment: '',
      selectedname: '',
      approvals: [],
      approvals1: [],
      require: "/client/resources/img/require.png",
      startDate: today,
      startTime: "09:00", // 기본 시작 시간 09:00
      endDate: today,
      endTime: "18:00", // 기본 종료 시간 18:00
      category: "",
      dayCount: 1,
      reason: "", // 사유
    };
  },
  components: {
    PlusCircleFilled, CloseOutlined, BuseoPopup, HrPopup
  },
  computed: {
  },
  methods: {
    addBuseo(selectedUser) {
      this.buseos.push({
        department: selectedUser.department,
        name: selectedUser.name
      });

      this.selectedDepartment = selectedUser.department; // 입력창에 표시
      this.showPopup = false;
    },
    removeBuseo(index) {
      this.buseos.splice(index, 1);
    },
    addApproval(selectedUser) {
      this.approvals.push({
        name: selectedUser.name
      });

      this.selectedname = selectedUser.name; // 입력창에 표시
      this.showPopup1 = false;
    },
    addApproval1(selectedUser) {
      this.approvals1.push({
        category: '선택',
        name: selectedUser.name, // or other fields if needed
      });
      this.showPopup2 = false; // 팝업 닫기
    },
    // 승인자 삭제
    removeApproval(index) {
      this.approvals1.splice(index, 1);
    },
    
    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일로 간주
        }
      }

     
    },
    
  },
  mounted() {
  },

};
</script>
