<template>
  <div class="pagetitle">
    <h1>공지사항</h1>
  </div>
  <!-- End Page Title -->
  <section class="section">
    <div class="row">


      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title"></h5>
            <div class="d-flex pb-3 justify-content-between">
              <div class="datatable-search d-flex gap-1 ">
                <div class="">
                  <select class="form-select " v-model="selectedDept">
                    <option value="" >이름</option>
                    <option v-for="dept in depts" :key="dept" :value="dept">{{ dept }}</option>
                  </select>
                </div>
                <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>
            </div>
                <button type="button" class="btn btn-outline-secondary"
                  @click="filterData">조회</button>

              </div>
              <div class="d-flex justify-content-end ">
                <button type="button" class="btn btn-outline-primary" @click="registerLeave">
                  등록
                </button>
                <!-- <button type="button" class="btn btn-outline-success" @click="saveChanges">
                  저장
                </button> -->
                <button type="button" class="btn btn-outline-secondary" @click="deletePending">
                  삭제
                </button>
              </div>

            </div>
            <!-- Table  -->
            <table id="myTable" class="table datatable table-hover">
              <colgroup>
                <col width="10%">
                <col width="75%">
                <col width="5%">
                <col width="5%">
                <col width="5%">
              </colgroup>
              <!-- 동적으로 <th> 생성 -->
              <thead>
                <tr>
                  <th>No </th>
                  <th>제목</th>
                  <th>작성자</th>
                  <th>작성일</th>
                  <th>조회수</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in ChuljangData" :key="item.startDate + index">
  <td>
    <div class="form-check">
      <label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
      <input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
    </div>
  </td>
  <td><input type="text" v-model="item.theme" /></td>
  <td><input type="text" v-model="item.name" /></td>
  <td><input type="text" v-model="item.date" /></td>
  <td><input type="text" v-model="item.views" /></td>
</tr>
              </tbody>
            </table>

            <!-- End Table -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { DataTable } from 'simple-datatables'
export default {
  data() {
    return {
      // 데이터 초기화
      depts: [2023, 2024, 2025], // 연도 목록
      levels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
      selectedDept: '',
      selectedlevel: '',
      ChuljangData: [
      { startDate: '', endDate: '', where: '대구', purpose: '',  acceptTerms: false },
      { startDate: '', endDate: '', where: '경산', acceptTerms: false },
        // 더 많은 데이터 추가...
      ],
      filteredData: [],
    };
  },
  computed: {

  },
  methods: {
    registerLeave() {
      // "NoticeInsert" 페이지로 이동
      this.$router.push({ path: '/NoticeInsert' });
    },
   
    deletePending() {
    // 선택된 항목만 필터링하여 삭제
    const selectedItems = this.ChuljangData.filter(item => item.acceptTerms);

    // 승인된 항목이 없으면 삭제 진행
    if (selectedItems.length > 0) {
      this.ChuljangData = this.ChuljangData.filter(item => !item.acceptTerms);
      alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
    } else {
      alert("선택된 항목이 없습니다.");
    }
  },
   
    // 페이지 변경
    changePage(page) {
      this.currentPage = page;
    },
  },
  mounted() {
    
    // 처음에는 모든 데이터를 표시
    this.filteredData = this.ChuljangData;
  
  },
};
</script>

<style scoped></style>
