<template>
  <div class="pagetitle">
    <h2>공지사항 등록</h2>
  </div>
  <section class="section">
    <div class="card">
      <div class="card-body pt-3">
        <form @submit.prevent="handleSubmit">
          <table class="form-table" style="width: 100%;">
            <tbody>
              <tr>
                <th class="text-lf">
                  <span>제목</span>
                </th>
                <td>
                  <input type="text" class="form-control" placeholder="제목을 입력하세요." v-model="title" required />
                </td>
              </tr>
              <tr class="border-top">
                <th colspan="4" class="text-lf">
                  <span>내용</span>
                </th>
              </tr>
              <tr style="max-height: 600px">
                <td colspan="4" style="height: 100%" class="pt-0">
                  <textarea name="" id="" v-model="editorData"></textarea>
                </td>
              </tr>

              <!-- 첨부파일 -->
              <tr class="border-top">
                <th class="text-lf">
                  첨부파일
                </th>
                <td colspan="2">
                  <div class="gd-12 pr0">
                    <div class="gd-2 pl0 pr0">
                      <label for="file" class="btn btn-outline-primary">파일찾기</label>
                      <input type="file" id="file" ref="file" multiple />
                    </div>
                  </div>
                </td>
              </tr>

              <!-- 공지글 -->
              <tr class="border-top">
                <th class="text-lf">
                  공지글
                </th>
                <td colspan="3">
                  <div class="d-flex no-gutters">
                    <div class="col-md-4">
                      <input type="radio" name="notice" id="notice-y" class="mr5" value="Y" v-model="notice" required />
                      <label for="notice-y">사용</label>
                    </div>
                    <div class="col-md-4">
                      <input type="radio" name="notice" id="notice-n" class="mr5" value="N" v-model="notice" required />
                      <label for="notice-n">미사용</label>
                    </div>
                  </div>
                </td>
              </tr>

              <!-- 공지글 게시기간 -->
              <tr class="border-top">
                <th class="text-lf">
                  공지글 게시기간
                </th>
                <td colspan="3">
                  <div class="d-flex no-gutters">
                    <div class="col-md-4">
                      <input type="datetime-local" class="form-control" v-model="startDate" :disabled="notice === 'N'"
                        required />
                    </div>
                    <div class="pd-1">-</div>
                    <div class="col-md-4">
                      <input type="datetime-local" class="form-control" v-model="endDate" :disabled="notice === 'N'"
                        required />
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="text-end">
            <button class="btn btn-primary" type="submit">등록</button>
            <button class="btn btn-secondary" @click="handleCancel">취소</button>
          </div>
        </form>


      </div>
    </div>
  </section>
</template>

<script>

export default {
  components: {
  },
  data() {
    console.log(localStorage.getItem('testKey'));
    const today = new Date().toISOString().split('T')[0];
    const todayDatetime = new Date().toISOString().slice(0, 16); // To include time for datetime-local
    return {
      editor: ClassicEditor,
      editorData: '', // Data for the editor
      title: '', // Bind to title input
      notice: '', // Bind to notice radio buttons
      startDate: todayDatetime, // Bind to start date
      endDate: todayDatetime, // Bind to end date
      isFormValid: true, // To track form validation status
    };
  },
  methods: {
    handleInsert() {
      console.log('Form Data:', {
        title: this.title,
        editorData: this.editorData,
        notice: this.notice,
        startDate: this.startDate,
        endDate: this.endDate,
      });
    },
    handleCancel() {
      // Reset form fields
      this.title = '';
      this.editorData = '';
      this.notice = '';
      this.startDate = this.endDate = new Date().toISOString().slice(0, 16);
      // Optionally remove from localStorage
      localStorage.removeItem('formData');
    },
    handleSubmit() {
      console.log('handleSubmit called');
      // Validate the form before submission
      this.validateForm();
      if (this.isFormValid) {
        // Save form data to localStorage
        const formData = {
          title: this.title,
          editorData: this.editorData,
          notice: this.notice,
          startDate: this.startDate,
          endDate: this.endDate,
        };
        localStorage.setItem('formData', JSON.stringify(formData));
        alert('등록되었습니다.');
        // Add further logic here (e.g., API call)
      } else {
        alert('모든 필드를 올바르게 작성해주세요.');
      }
    },
    validateForm() {
      // Check if all required fields are filled
      this.isFormValid = !!(
        this.title &&
        this.editorData &&
        this.notice &&
        this.startDate &&
        this.endDate
      );
    },
    loadFormData() {
      const savedData = localStorage.getItem('formData');
      console.log('savedData:', savedData);
      if (savedData) {
        const formData = JSON.parse(savedData);
        this.title = formData.title || '';
        this.editorData = formData.editorData || '';
        this.notice = formData.notice || '';
        this.startDate = formData.startDate || '';
        this.endDate = formData.endDate || '';
      }
    },
  },
  mounted() {
    this.loadFormData(); // Load saved data from localStorage
  },
};
</script>

<style scoped>
td,
th {
  padding: 1rem;
}

th {
  width: 10rem;
}

#file {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

</style>
