<template>
  <div class="card ">
    <div class="card-body ">
      <h2 class="card-title">카드정보 관리</h2>
      <div class="flex align-top">
        <div class="sch-form-wrap search">
          <div class="input-group" style="display: flex;">
            <select name="" id="" class="form-select">
              <option value="">전체</option>
            </select>
            <div class="sch-input">
              <input type="text" class="form-control">
              <button class="ico-sch">
                <SearchOutlined />
              </button>
            </div>
          </div>
          <div class="tbl-wrap table-scroll">
            <table id="myTable" class="tbl data">
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th>카드목록 </th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in listData" :key="index">
                  <td></td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>

        <div style="width: 100%;">
          <div class=" sch-form-wrap title-wrap">
            <h3><img :src="h3icon" alt="">카드 정보</h3>
            <div class="buttons" style="margin: 0;">
              <button type="submit" class="btn sm tertiary">신규</button>
              <button type="reset" class="btn sm secondary">등록</button>
              <button type="delete" class="btn sm btn-red">삭제</button>
            </div>
          </div>
          <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

            <div class="col-12  ">
              <label for="prvonsh" class="form-label">
                <p>카드명
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <input type="text" class="form-control " id="reason" v-model="reason" />
            </div>
            <div class="col-12  ">
              <label for="prvonsh" class="form-label">
                <p>담당자
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <input type="text" class="form-control " id="reason" v-model="selectedname" readonly />
              <input type="button" class="form-control " value="검색" @click="showPopup = true" />
              <!-- 팝업 -->
              <HrPopup v-if="showPopup" @close="showPopup = false"  @select="addApproval"/>
            </div>
            <div class="col-12 chuljang ">
              <label for="prvonsh" class="form-label">비고</label>
              <input type="text" class="form-control textarea" id="reason" v-model="reason" />
            </div>
            <div class="col-12 border-x input-radio">
              <label for="prvonsh" class="form-label">
                <p>사용여부
                <p class="require"><img :src="require" alt=""></p>
                </p>
              </label>
              <div class="chk-area">
                <div class="form-check">
                  <input type="radio" name="rdo_1" id="rdo_1">
                  <label for="rdo_1">사용</label>
                </div>
                <div class="form-check">
                  <input type="radio" name="rdo_1" id="rdo_2" checked>
                  <label for="rdo_2">미사용</label>
                </div>
              </div>
            </div>


          </form>
          <div class=" sch-form-wrap title-wrap">
            <h3><img :src="h3icon" alt="">예약현황</h3>
          </div>
          <div class="tbl-wrap chk-area">
            <table id="myTable" class="tbl data">

              <thead>
                <tr>
                  <th>부서</th>
                  <th>신청자</th>
                  <th>기간</th>
                  <th>상태</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in listData" :key="index">
                  <td>{{ item.buseo }}</td>
                  <td>{{ item.user }}</td>
                  <td>{{ item.startDate }} ~ {{ item.endDate }}</td>
                  <td :class="getStatusClass(item.status)">
                    {{ item.status }}
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
          <div class="pagination">
            <ul>
              <!-- 왼쪽 화살표 (이전 페이지) -->
              <li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
                &lt;
              </li>

              <!-- 페이지 번호 -->
              <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
                @click="changePage(page)">
                {{ page }}
              </li>

              <!-- 오른쪽 화살표 (다음 페이지) -->
              <li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
                &gt;
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import HrPopup from "../../../component/Popup/HrPopup.vue";
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
export default {
  data() {
    return {
      showPopup: false,
      selectedname: '',
      approvals: [],
      require: "/client/resources/img/require.png",
      h3icon: "/client/resources/img/h3icon.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: [
        {
          buseo: '',
          user: '김철수',
          startDate: '2025-05-01',
          endDate: '2025-05-03',
          status: '예약', // 사용중
        },
        {
          buseo: '',
          user: '이영희',
          startDate: '2025-05-05',
          endDate: '2025-05-06',
          status: '예약', // 예약됨
        },
        {
          buseo: '',
          user: '박민호',
          startDate: '2025-04-25',
          endDate: '2025-04-28',
          status: '반납', // 반납됨
        },
      ],
      
    }
  },
  components: {
    SearchOutlined, CloseCircleFilled, HrPopup
  },
  methods: {
    addApproval(selectedUser) {
      this.approvals.push({
        name: selectedUser.name
      });

      this.selectedname = selectedUser.name; // 입력창에 표시
      this.showPopup = false;
    },
    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>