<template>
  <div class="content">
    <div class="sub-title-area mb-30">
      <h2>사진 기록물</h2>
      <div class="breadcrumb-list">
        <ul>
          <li><img :src="homeicon" alt="Home Icon">
            <p>기록물</p>
          </li>
          <li><img :src="righticon" alt=""></li>
          <li>사진 기록물</li>
        </ul>
      </div>
    </div>
    <form class="insert-form mb-50">
      <dl>
        <dd>
          <label for="id" class="require">제목</label>
          <div class="wfull"><input type="text" id="id" placeholder="제목을 입력하세요."></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="year">생산연도</label>
          <input type="text" id="year" placeholder="생산연도를 입력하세요">
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="address">주소</label>
          <div class="wfull"><input type="text" id="address" placeholder="주소를 입력하세요"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="text">내용</label>
          <div class="wfull">
            <EditorComponent :contents="insertDTO.cn" />
          </div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="category" class="flex align-center">
            <p>카테고리</p><button type="button" class="category-add" @click="openModal">추가하기</button>
          </label>
          <ul class="category">
            <li v-for="(category, index) in selectedCtgries" :key="index"> {{ category }} <button type="button" class="cancel" @click="removeCategory(index)"><b>✕</b></button>
            </li>
          </ul>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="file" class="require">파일</label>
          <ul class="wfull">
            <li class="flex align-center">
              <p>파일첨부</p>
              <div class="invalid-feedback"><img :src="erroricon" alt=""><span>첨부파일은 건당 최대 10GB를 초과할 수 없습니다.</span></div>
            </li>
            <li class="file-insert">
              <input type="file" id="fileInput" class="file-input" multiple @change="showFileNames" accept="image/jpeg,image/png,image/gif,image/jpg">
              <label for="fileInput" class="file-label mb-20" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop" :class="{ 'drag-over': isDragging }">
                <div class="flex-center align-center"><img :src="fileicon" alt="">
                  <p>파일첨부하기</p>
                </div>
                <p>파일을 첨부하시려면 이 영역으로 파일을 끌고 오거나 클릭해주세요</p>
              </label>
              <p class="mb-10">파일목록</p>
              <div id="fileNames" class="file-names">
                <span v-if="fileNames.length === 0">선택된 파일이 없습니다.</span>
                <div v-for="(file, index) in fileNames" :key="index" class="flex-sp-bw mb-5 file-wrap">
                  <div class="file-name">
                    <img :src="file.icon" alt="fileicon">
                    <p>{{ file.name }}</p>
                  </div>
                  <button type="button" class="cancel" @click="removeFile(index)"><b>✕</b></button>
                </div>
              </div>
            </li>
          </ul>
        </dd>
      </dl>
    </form>
    <div class="btn-group flex-center">
      <button type="button" class="cancel" @click="fnMoveTo('PicHistorySearch')">취소</button>
      <button type="button" class="register" @click="submitForm">등록</button>
    </div>
  </div>
  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" />
</template>
<script>
import axios from 'axios';
import apiClient from '../../../resources/api';
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
// COMPONENT
import EditorComponent from '../../component/EditorComponent.vue';
import CategorySelectModal from '../../component/modal/CategorySelectModal.vue';

export default {
  components: {
    DoubleLeftOutlined,
    LeftOutlined,
    RightOutlined,
    DoubleRightOutlined,
    EditorComponent,
    CategorySelectModal,
  },

  data() {
    return {
      // 아이콘 경로
      homeicon: 'client/resources/images/icon/home.png',
      erroricon: 'client/resources/images/icon/error.png',
      righticon: 'client/resources/images/icon/right.png',
      fileicon: 'client/resources/images/icon/file.png',
      searchicon: 'client/resources/images/icon/search.png',

      isModalOpen: false,
      isDragging: false,

      items: [
        { id: 1, category: '카테고리 1', selected: false },
        { id: 2, category: '카테고리 2', selected: false },
        { id: 3, category: '카테고리 3', selected: false },
      ],
      fileNames: [],
      insertDTO: {
        sj: null, //제목
        cn: null, //내용
        adres: null, // 주소
        prdctnYear: null, // 생산연도
        ty: 'P', // 타입 ( P: 사진, V: 영상 )
        ctgryIds: null, // 카테고리 정보
      },

      selectedFiles: [],
      selectedCtgries: [], // 카테고리 목록
    };
  },
  computed: {
    filteredItems() {
      // This could be modified to support filtering based on searchQuery
      return this.items.filter(item =>
        item.category.includes(this.searchQuery)
      );
    }
  },
  methods: {
    // 드래그 앤 드롭 이벤트 핸들러
    handleDragOver(event) {
      this.isDragging = true;
    },
    handleDragLeave(event) {
      this.isDragging = false;
    },
    handleDrop(event) {
      this.isDragging = false;
      const files = event.dataTransfer.files;
      if (files.length > 0) {
        this.processFiles(files);
      }
    },

    // 파일 업로드 처리 함수
    processFiles(files) {
      // 파일 타입 검증 (이미지 파일만 허용)
      const allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];
      const maxSize = 10 * 1024 * 1024 * 1024; // 10GB

      for (let i = 0; i < files.length; i++) {
        const fileType = files[i].name.split('.').pop().toLowerCase();
        if (!allowedTypes.includes(fileType)) {
          alert(`${files[i].name} 파일은 허용되지 않는 형식입니다. 이미지 파일(jpg, jpeg, png, gif)만 업로드 가능합니다.`);
          return;
        }

        // 파일 크기 제한 체크 (10GB)
        if (files[i].size > maxSize) {
          alert(`${files[i].name} 파일이 10GB를 초과합니다.`);
          return;
        }
      }

      // 실제 File 객체들을 저장
      for (let i = 0; i < files.length; i++) {
        this.selectedFiles.push(files[i]);
      }

      // UI에 표시할 파일 정보 저장
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileType = file.name.split('.').pop().toLowerCase();  // 파일 확장자 추출

        // 파일 타입에 따른 아이콘 선택
        let iconPath = this.fileicon; // 기본 아이콘

        if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/imgicon.png';
        } else if (['pdf'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/pdficon.png';
        } else if (['xls', 'xlsx'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/excelicon.png';
        } else if (['hwp'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/hwpicon.png';
        }

        // 파일 이름과 아이콘을 목록에 추가
        this.fileNames.push({
          name: file.name,
          icon: iconPath,
          size: this.formatFileSize(file.size)
        });
      }
    },

    fnToggleModal(selectedCtgryIds) {
      this.isModalOpen = !this.isModalOpen;
      if (selectedCtgryIds && selectedCtgryIds.length > 0) {
        this.insertDTO.ctgryIds = selectedCtgryIds;
      }
    },
    removeCategory(index) {
      // Remove category from the list
      this.selectedCtgries.splice(index, 1);
    },
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    showFileNames(event) {
      const files = event.target.files;
      if (files.length > 0) {
        this.processFiles(files);
      }
    },
    removeFile(index) {
      // UI 목록과 실제 파일 객체 목록에서 모두 제거
      this.fileNames.splice(index, 1);
      this.selectedFiles.splice(index, 1);
    },
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },

    // 등록
    submitForm() {
      const vm = this;

      // 폼 요소들의 값을 가져오기
      const titleInput = document.getElementById('id');
      const yearInput = document.getElementById('year');
      const addressInput = document.getElementById('address');

      // insertDTO 업데이트
      vm.insertDTO.sj = titleInput ? titleInput.value : null;
      vm.insertDTO.prdctnYear = yearInput ? yearInput.value : null;
      vm.insertDTO.adres = addressInput ? addressInput.value : null;

      // 유효성 검사
      if (!vm.insertDTO.sj) {
        alert("제목을 입력해 주세요.");
        return;
      }
      if (vm.selectedFiles.length < 1) {
        alert("파일을 1개 이상 첨부해 주세요.");
        return;
      }

      // 데이터 세팅
      const formData = new FormData();

      // 텍스트 데이터 추가
      formData.append('sj', vm.insertDTO.sj);
      formData.append('cn', vm.insertDTO.cn || '');
      formData.append('adres', vm.insertDTO.adres || '');
      formData.append('prdctnYear', vm.insertDTO.prdctnYear || '');
      formData.append('ty', vm.insertDTO.ty);

      // 카테고리 IDs 추가
      if (vm.insertDTO.ctgryIds && vm.insertDTO.ctgryIds.length > 0) {
        // 백엔드 요구사항에 따라 조정 필요
        vm.insertDTO.ctgryIds.forEach((id, index) => {
          formData.append(`ctgryIds[${index}]`, id);
        });
      }

      // 파일 추가
      for (let i = 0; i < vm.selectedFiles.length; i++) {
        formData.append("multipartFiles", vm.selectedFiles[i]);
      }

      // API 통신
      axios({
        url: "/dcry/saveDcry.file",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      }).then(response => {
        let result = response.data;
        let id = result.data.dcryId;
        alert("등록 되었습니다.");

        // 상세 페이지로 이동
        vm.fnMoveTo('PicHistoryDetail', id);
      }).catch(error => {
        if (error.response) {
          alert(error.response.data.message);
        } else {
          alert("에러가 발생했습니다.");
        }
        console.error(error.message);
      });
    },

    // 페이지 이동
    fnMoveTo(page, id) {
      if (id !== null || id !== '') {
        this.$router.push({ name: page, query: { id: id } });
      } else {
        this.$router.push({ name: page });
      }
    }
  }
};
</script>
<style>
.file-label {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-label:hover {
  border-color: #aaa;
  background-color: #f9f9f9;
}

.file-label.drag-over {
  border-color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
}
</style>