<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="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="tbl-wrap chk-area">
            <table id="myTable" class="tbl data">

              <thead>
                <tr>
                  <th>메뉴명</th>
                  <th>전체</th>
                  <th>읽기</th>
                  <th>쓰기</th>
                  <th>수정</th>
                  <th>삭제</th>
                </tr>
              </thead>
              <!-- 동적으로 <td> 생성 -->
              <tbody>
                <tr v-for="(item, index) in listData" :key="index">
      <td>{{ item.menuName }}</td>
      <td>
        <div class="form-check">
          <input
            type="checkbox"
            :id="`all_${index}`"
            v-model="item.permissions.all"
            @change="toggleAll(index)"
          />
          <label :for="`all_${index}`"></label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input
            type="checkbox"
            :id="`read_${index}`"
            v-model="item.permissions.read"
          />
          <label :for="`read_${index}`"></label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input
            type="checkbox"
            :id="`write_${index}`"
            v-model="item.permissions.write"
          />
          <label :for="`write_${index}`"></label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input
            type="checkbox"
            :id="`edit_${index}`"
            v-model="item.permissions.edit"
          />
          <label :for="`edit_${index}`"></label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input
            type="checkbox"
            :id="`delete_${index}`"
            v-model="item.permissions.delete"
          />
          <label :for="`delete_${index}`"></label>
        </div>
      </td>
    </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  data() {
    return {
      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: [
      {
          menuName: '메뉴1',
          permissions: {
            all: false,
            read: false,
            write: false,
            edit: false,
            delete: false,
          },
        },
        {
          menuName: '메뉴2',
          permissions: {
            all: false,
            read: false,
            write: false,
            edit: false,
            delete: false,
          },
        },
      ]
    }
  },
  components: {
    SearchOutlined
  },
  methods: {
    toggleAll(index) {
      const all = this.listData[index].permissions.all;
      this.listData[index].permissions.read = all;
      this.listData[index].permissions.write = all;
      this.listData[index].permissions.edit = all;
      this.listData[index].permissions.delete = all;
    },
    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>