<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="sj" class="require">제목</label>
          <div class="wfull"><input type="text" id="sj" placeholder="제목을 입력하세요." v-model="reqDTO.sj"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="prdctnYear">생산연도</label>
          <input type="text" id="prdctnYear" placeholder="생산연도를 입력하세요" v-model="reqDTO.prdctnYear">
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="adres">주소</label>
          <div class="wfull"><input type="text" id="adres" placeholder="주소를 입력하세요" v-model="reqDTO.adres"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="text">내용</label>
          <div class="wfull">
            <EditorComponent v-model:contents="reqDTO.cn" />
          </div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="category" class="flex align-center">
            <p>카테고리</p><button type="button" class="category-add" @click="fnToggleModal">추가하기</button>
          </label>
          <ul class="category">
            <li v-for="(item, idx) of selectedCtgries" :key="idx">{{ item.ctgryNm }} <button type="button" class="cancel" @click="fnDelCtgry(item.ctgryId)"><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" accept="video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv,video/webm,video/x-matroska" @change="handleFileSelect">
              <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">
                <div v-if="reqDTO.files.length === 0 && multipartFiles.length === 0">선택된 파일이 없습니다.</div>
                <!-- 새로 추가된 파일 목록 -->
                <div v-for="(file, idx) of multipartFiles" :key="idx" class="flex-sp-bw mb-5 file-wrap">
                  <div class="file-name">
                    <img src="/client/resources/images/icon/imgicon.png" alt="fileicon">
                    <p>{{ file.name }}</p>
                  </div>
                  <button type="button" class="cancel" @click="fnDelFile('new', idx)"><b>✕</b></button>
                </div>
                <!-- 기존 등록된 파일 목록 -->
                <div v-for="(file, idx) of reqDTO.files" :key="idx" class="flex-sp-bw mb-5 file-wrap">
                  <div class="file-name">
                    <img src="/client/resources/images/icon/imgicon.png" alt="fileicon">
                    <p>{{ file.fileNm }}</p>
                  </div>
                  <button type="button" class="cancel" @click="fnDelFile('old', file.fileId)"><b>✕</b></button>
                </div>
              </div>
            </li>
          </ul>
        </dd>
      </dl>
    </form>
    <div class="btn-group flex-center">
      <button type="button" class="cancel" @click="fnMoveTo('VideoHistorySearch')">취소</button>
      <button type="button" class="register" @click="submitForm">
        <span v-if="$isEmpty(pageId)">등록</span>
        <span v-else>수정</span>
      </button>
    </div>
  </div>
  <CategorySelectModal v-if="isModalOpen" :selectedCtgries="selectedCtgries" @toggleModal="fnToggleModal" @addCtgries="fnAddCtgries" />
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
// COMPONENT
import EditorComponent from '../../component/editor/EditorComponent.vue';
import CategorySelectModal from '../../component/modal/CategorySelectModal.vue';
// API
import { findDcryProc, saveDcry, updateDcry } from '@/resources/api/dcry';

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',

      pageId: null,

      isModalOpen: false,
      isDragging: false,

      fileNames: [],

      // 등록/수정 요청 객체
      reqDTO: {
        dcryId: null,
        sj: null,
        cn: null,
        adres: null,
        prdctnYear: null,
        ty: 'V',
        fileId: null,
        files: [],
        ctgryIds: [],
      },

      multipartFiles: [],
      selectedCtgries: [], // 카테고리 목록
    };
  },

  created() {
    this.pageId = this.$route.query.id;
    if (!this.$isEmpty(this.pageId)) {
      this.fnFindDcry(); // 상세 조회
    }
  },

  methods: {
    // 상세 조회
    async fnFindDcry() {
      try {
        const response = await findDcryProc(this.pageId);

        if (response.data.data.dcry.ty !== 'V') {
          alert('올바른 접근이 아닙니다.');
          this.fnMoveTo('VideoHistorySearch'); // 목록으로 이동
        }

        this.copyToDcryReqDTO(response.data.data.dcry);
      } catch (error) {
        alert('조회중 오류가 발생했습니다.');
        this.fnMoveTo('VideoHistorySearch'); // 목록으로 이동

        if (error.response) {
          alert(error.response.data.message);
        }
        console.error(error.message);
      }
    },

    // dcry > reqDTO
    copyToDcryReqDTO(dcry) {
      const copyFields = Object.keys(this.reqDTO).filter(key => key !== 'dcryId' && key !== 'ty' && key !== 'files');
      copyFields.forEach(field => {
        this.reqDTO[field] = this.$isEmpty(dcry[field]) ? null : dcry[field];
      });

      this.reqDTO.ty = 'V'; // 영상기록물
      this.reqDTO.files = dcry.files.length > 0 ? dcry.files : []; // 기존 첨부파일

      this.multipartFiles = [];
      this.selectedCtgries = dcry.ctgrys.length > 0 ? dcry.ctgrys : [];

      console.log(this.reqDTO);
    },

    // 카테고리 모달 열기/닫기
    fnToggleModal() {
      this.isModalOpen = !this.isModalOpen;
    },

    // 카테고리 등록
    fnAddCtgries(selectedCtgries) {
      this.selectedCtgries = [...this.selectedCtgries, ...selectedCtgries];

      this.fnToggleModal(); // 카테고리 모달 닫기
    },

    // 카테고리 삭제
    fnDelCtgry(id) {
      this.selectedCtgries = this.selectedCtgries.filter(item => item.ctgryId !== id);
    },

    // 드래그 앤 드롭 이벤트 핸들러
    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);
      }
    },
    handleFileSelect(event) {
      const files = event.target.files;
      if (files.length > 0) {
        this.processFiles(files);
      }
    },

    // 파일 업로드 처리 함수
    processFiles(files) {
      const allowedTypes = ['mp4', 'mov', 'avi', 'wmv', 'mkv', 'webm']; // 영상 파일만 허용
      const maxSize = 10 * 1024 * 1024 * 1024; // 10GB

      // 유효성 검사
      if (files.length > 1 + this.multipartFiles.length + this.reqDTO.files.length > 0) {
        alert("영상 파일은 한 개만 등록 가능합니다.");
        return;
      }

      for (let file of files) {
        const fileType = file.name.split('.').pop().toLowerCase();

        // 파일 타입 검증
        if (!allowedTypes.includes(fileType)) {
          alert(`${file.name} 파일은 허용되지 않는 형식입니다. 이미지 파일(jpg, jpeg, png, gif)만 업로드 가능합니다.`);
          return;
        }

        // 파일 크기 제한 검증
        if (file.size > maxSize) {
          alert(`${file.name} 파일이 10GB를 초과합니다.`);
          return;
        }

        this.multipartFiles.push(file);
      }
    },

    // 파일 삭제
    fnDelFile(type, separator) {
      if (type === 'new') {
        this.multipartFiles.splice(separator, 1);
      } else if (type === 'old') {
        this.reqDTO.files = this.reqDTO.files.filter(item => item.fileId !== separator);
      }
    },

    // 등록
    async submitForm() {
      // 유효성 검사
      if (!this.reqDTO.sj) {
        alert("제목을 입력해 주세요.");
        return;
      }
      if (this.$isEmpty(this.pageId) && this.multipartFiles.length == 0) {
        alert("파일을 1개 이상 첨부해 주세요.");
        return;
      }

      try {
        const formData = new FormData();

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

        // 게시물 아이디
        if (!this.$isEmpty(this.pageId)) {
          formData.append('dcryId', this.pageId);
        }

        // 파일 아이디
        if (!this.$isEmpty(this.reqDTO.fileId)) {
          formData.append('fileId', this.reqDTO.fileId);
        }

        // 카테고리 Ids 추가
        if (this.selectedCtgries && this.selectedCtgries.length > 0) {
          for (let ctgry of this.selectedCtgries) {
            formData.append("ctgryIds", ctgry.ctgryId);
          }
        }

        // 파일 추가
        for (let file of this.multipartFiles) {
          formData.append("multipartFiles", file);
        }

        // 기존파일 수정
        if (!this.$isEmpty(this.pageId) && this.reqDTO.files.length > 0) {
          for (let file of this.reqDTO.files) {
            formData.append("files", file.fileId);
          }
        }

        // API 통신
        const response = this.$isEmpty(this.pageId) ? await saveDcry(formData) : await updateDcry(formData);
        let result = response.data;
        let id = result.data.dcryId;
        alert(this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.");

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

    // 페이지 이동
    fnMoveTo(page, id) {
      if (this.$isEmpty(id)) {
        this.$router.push({ name: page });
      } else {
        this.$router.push({ name: page, query: { id: id } });
      }
    }
  }
};
</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>