<template>
  <div class="card ">
    <div class="card-body ">
      <h2 class="card-title">직원 검색</h2>
  
        
          <div class="name-box flex  simple">
            <div class="img-area column">
          <div class="img">
            <img :src="previewImg || placeholder" alt="미리보기 이미지" />
            <button class="close-btn" @click="removeImage">&#215;</button>
          </div>
          <div class="info">
            <div class="file">
              <label for="fileUpload" class="file-label">
                <img :src="file" alt="">
                <p>업로드</p>
              </label>
              <input id="fileUpload" type="file" @change="handleFileUpload" accept="image/*" />
            </div>
          </div>
        </div>
            <form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
              @submit.prevent="handleRegister" novalidate >
              <div class="col-12 ">
                <div class="col-12 border-x">
                  <label for="youremail" class="form-label "><p>아이디<p class="require"><img :src="require" alt=""></p></p></label>
                  <input v-model="email" type="text" name="username" class="form-control"  required
                    >
                </div>
  
                <div class="col-12 border-x">
                  <label for="yourPassword" class="form-label"><p>권한<p class="require"><img :src="require" alt=""></p></p></label>
                  <select class="form-select" >
                <option value="선택">선택</option>
                <option value=""></option>
                <option value=""></option>
              </select>
                </div>
              </div>
              <div class="col-12 ">
                <div class="col-12 border-x">
                  <label for="youremail" class="form-label "><p>이름<p class="require"><img :src="require" alt=""></p></p></label>
                  <input v-model="email" type="text" name="username" class="form-control"  required
                    >
                </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 v-model="selectedname" type="password" name="password" class="form-control" 
                    required  placeholder="주식회사 테이큰 소프트">
                    <input type="button" class="form-control " value="검색" @click="showPopup = true" />
                    <BuseoPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/>
                </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 class="form-select" >
                <option value="선택">선택</option>
                <option value=""></option>
                <option value=""></option>
              </select>
                </div>
  
                <div class="col-12 border-x">
                  <label for="yourPassword" class="form-label">직책</label>
                  <select class="form-select" >
                <option value="선택">선택</option>
                <option value=""></option>
                <option value=""></option>
              </select>
                </div>
              </div>
  
  
            </form>
  
          </div>
          <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }"
            @submit.prevent="handleRegister" novalidate style="margin-bottom: 20px;">
            <div class="col-12">
              <label for="yourName" class="form-label">연락처</label>
              <input v-model="name" type="text" name="name" class="form-control " id="yourName"  
                placeholder="admin">
            </div>
            <div class="col-12">
              <label for="yourName" class="form-label">생년월일</label>
              <input v-model="name" type="date" name="name" class="form-control" id="yourName"  
               >
            </div>
            <div class="col-12 border-x">
              <label for="yourName" class="form-label"><p>입사일<p class="require"><img :src="require" alt=""></p></p></label>
              <input v-model="name" type="date" name="name" class="form-control" id="yourName" required 
                >
            </div>
  
  
  
          </form>
          <form class="row g-3 needs-validation detail salary" :class="{ 'was-validated': formSubmitted }"
            @submit.prevent="handleRegister" novalidate>
            <div class=" col-12 border-x"><label>연봉<button type="button" title="추가" @click="addSalary">
              <PlusCircleFilled />
            </button></label>
              <div class="yearsalary approval-container">
              <div class="col-12 border-x addapproval" v-for="(salary, index) in salarys" :key="index">
                <input type="text" name="name" class="form-control" v-model="salary.salary" style="width: 200px;"  
                  placeholder="년도">
                <div>
                  <input type="text" name="name" class="form-control" v-model="salary.total"   
                    placeholder="금액">
                </div>
              </div>
              
            </div>
            </div>
          </form>
          <div class="buttons">
        <button type="reset" class="btn sm sm primary">등록</button>
        <button type="submit" class="btn sm sm tertiary">취소</button>
      </div>
    </div>

  </div>

</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined, PlusCircleFilled } from '@ant-design/icons-vue';
import BuseoPopup from "../../../component/Popup/BuseoPopup.vue";
export default {
  data() {
    return {
      showPopup: false,
      selectedname: '',
      approvals: [],
      salarys: [ {
          salary: '',
          total: '',
        },] ,
      previewImg: null,
      placeholder: "/client/resources/img/img1.png",
      require: "/client/resources/img/require.png",
      file: "/client/resources/img/file.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(),
      listData: Array.from({ length: 20 }, (_, i) => ({
      department: `부서 ${i + 1}`,
      name: `이름 ${i + 1}`,
      position: `직급 ${i + 1}`
    }))
    }
  },
  components: {
    SearchOutlined, PlusCircleFilled, BuseoPopup
  },
  methods: {
    addApproval(selectedUser) {
      this.approvals.push({
        name: selectedUser.name
      });

      this.selectedname = selectedUser.name; // 입력창에 표시
      this.showPopup = false;
    },
    addSalary() {
      this.salarys.push({
        salary: '',
        total: '',
      });
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewImg = e.target.result; // 파일 읽기 완료 후 미리보기 이미지 설정
        };
        reader.readAsDataURL(file); // 파일을 데이터 URL로 읽기
      } else {
        alert('이미지 파일만 선택할 수 있습니다.');
      }
    },

    // 이미지 삭제 함수
    removeImage() {
      this.previewImg = null; // 미리보기 이미지 삭제
      this.$refs.fileUpload.value = null; // 파일 input 초기화
    },
    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;
}
</style>