<template>
  <div class="pagetitle">
    <h2>공지사항 등록</h2>
  </div>
  <section class="section">
    <div class="card">
      <div class="card-body pt-3">
        <table class="form-table" style="width: 100%;">
          <tbody>
            <tr>
              <th class="text-lf">
                <span>제목</span>
              </th>
              <td>
                <input
                  type="text"
                  class="form-control"
                  placeholder="제목을 입력하세요."
                />
              </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">
                <ckeditor :editor="editor" v-model="editorData"></ckeditor>
              </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"
                      @change="handleFileInsert"
                      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"
                    />
                    <label for="notice-y">사용</label>
                  </div>
                  <div class="col-md-4">
                    <input
                      type="radio"
                      name="notice"
                      id="notice-n"
                      class="mr5"
                      value="N"
                    />
                    <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"
                    />
                  </div>
                  <div class="pd-1">-</div>
                  <div class="col-md-4">
                    <input
                      type="datetime-local"
                      class="form-control"
                    />
                  </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="private"
                      id="private-y"
                      class="mr5"
                      value="Y"
                    />
                    <label for="private-y">사용</label>
                  </div>
                  <div class="col-md-4">
                    <input
                      type="radio"
                      name="private"
                      id="private-n"
                      class="mr5"
                      value="N"
                    />
                    <label for="private-n">미사용</label>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="text-end">
          <button class="btn btn-primary" @click="handleInsert">
            {{ notice == null ? "등록" : "수정" }}
          </button>
          <button class="btn btn-secondary" @click="handleCancel">취소</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  components: {
    ckeditor: CKEditor
  },
  data() {
    return {
      editor: ClassicEditor,  // Editor build to use
      editorData: '',         // Data for editor content
    };
  },
  methods: {
    handleInsert() {
      console.log('Editor Data:', this.editorData);
    },
    handleCancel() {
      // Your cancel logic
    },
  },
  mounted() {
  console.log(CKEditor); // Check if CKEditor is properly imported and available
}
};
</script>

<style scoped>
td,
th {
  padding: 1rem;
}
th {
  width: 10rem;
}
#file {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}
.ckeditor {
  width: 100%;
  height: 300px;  /* Adjust height as needed */
}
</style>
