<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" @submit.prevent>
      <dl>
        <dd>
          <label for="sj" class="require">제목</label>
          <div class="wfull"><input type="text" id="sj" placeholder="제목을 입력하세요." v-model="requestDTO.sj"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="prdctnYear">생산연도</label>
          <prdctn-select-component v-model="dateForm" :value="requestDTO.prdctnYear" @formatted-date="requestDTO.prdctnYear = $event" />
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="link">주소</label>
          <div class="wfull"><input type="text" id="link" placeholder="URL 주소를 입력하세요" v-model="requestDTO.link"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="text">내용</label>
          <div class="wfull">
            <EditorComponent v-model:contents="requestDTO.cn" v-model:plainContents="requestDTO.searchCn" />
          </div>
        </dd>
        <div class="hr"></div>
        <dd class="category-dd">
          <label for="category" class="flex align-center">카테고리</label>
          <category-list-component v-model="selectedCtgries" />
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="file">썸네일</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" ref="fileInput" class="file-input" accept="image/jpeg,image/png,image/gif,image/jpg" @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="requestDTO.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 requestDTO.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-end">
      <button type="button" class="cancel" @click="fnMoveTo('list')">취소</button>
      <button type="button" class="register" @click="submitForm">
        <span v-if="$isEmpty(pageId)">등록</span>
        <span v-else>수정</span>
      </button>
    </div>
  </div>
</template>
<script>
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
// COMPONENT
import PrdctnSelectComponent from '@/views/component/PrdctnSelectComponent.vue';
import EditorComponent from '@/views/component/editor/EditorComponent.vue';
import CategoryListComponent from '@/views/component/CategoryListComponent.vue';
// API
import { findNesDtaProc, saveNesDtaProc, updateNesDtaProc } from '@/resources/api/nesDta';

export default {
  components: {
    DoubleLeftOutlined,
    LeftOutlined,
    RightOutlined,
    DoubleRightOutlined,
    // COMPONENT
    PrdctnSelectComponent,
    EditorComponent,
    CategoryListComponent,
  },

  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,

      isDragging: false,

      fileNames: [],

      // 등록/수정 요청 객체
      requestDTO: {
        nesDtaId: null,
        sj: null,
        cn: null,
        searchCn: null,
        link: null,
        prdctnYear: null,
        fileId: null,
        files: [],
        ctgryIds: [],
      },

      // 날짜 객체 (자식 컴포넌트와 동기화)
      dateForm: {
        year: new Date().getFullYear(),
        month: '',
        day: ''
      },

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

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

  methods: {
    // 상세 조회
    async fnFindDcry() {
      try {
        const response = await findNesDtaProc(this.pageId);
        this.copyToDcryReqDTO(response.data.data.nesDta);
      } catch (error) {
        alert('조회중 오류가 발생했습니다.');
        this.fnMoveTo('list'); // 목록으로 이동

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

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

      this.requestDTO.files = nesDta.files.length > 0 ? nesDta.files : []; // 기존 첨부파일

      this.multipartFiles = [];
      this.selectedCtgries = nesDta.ctgrys.length > 0 ? nesDta.ctgrys : [];
    },

    // 드래그 앤 드롭 이벤트 핸들러
    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 = ['jpg', 'jpeg', 'png', 'gif']; // 이미지 파일만 허용
      const maxSize = 10 * 1024 * 1024 * 1024; // 10GB

      // 유효성 검사
      if ((files.length + this.multipartFiles.length + this.requestDTO.files.length) > 1) {
        alert("썸네일은 한 개만 등록 가능합니다.");
        this.resetFileInput(); // input 파일 목록 비움
        return;
      }

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

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

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

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

    // 파일 입력 초기화 메서드 추가
    resetFileInput() {
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = '';
      }
    },

    // 파일 삭제
    fnDelFile(type, separator) {
      if (type === 'new') {
        this.multipartFiles.splice(separator, 1);

        // 모든 새 파일이 삭제된 경우 input 요소 초기화
        if (this.multipartFiles.length === 0) {
          this.resetFileInput(); // input 파일 목록 비움
        }
      } else if (type === 'old') {
        this.requestDTO.files = this.requestDTO.files.filter(item => item.fileId !== separator);
      }
    },

    // 등록
    async submitForm() {
      // 공백제거
      this.requestDTO.sj = this.$processTitle(this.requestDTO.sj);

      // 유효성 검사
      if (this.$isEmpty(this.requestDTO.sj)) {
        alert("제목을 입력해 주세요.");
        return;
      }

      if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
        if (!/^\d+$/.test(this.requestDTO.prdctnYear)) {
          alert("생산연도는 숫자만 입력 가능합니다.");
          return;
        }
      }

      if (!this.$isEmpty(this.requestDTO.link)) {
        const urlRegex = /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
        if (!urlRegex.test(this.requestDTO.link)) {
          alert("링크는 url만 입력 가능합니다.");
          return;
        }
      }

      try {
        const formData = new FormData();

        // 텍스트 데이터 추가
        formData.append('sj', this.requestDTO.sj);

        if (!this.$isEmpty(this.pageId)) {
          formData.append('nesDtaId', this.pageId);
        }

        if (!this.$isEmpty(this.requestDTO.prdctnYear)) {
          formData.append('prdctnYear', this.requestDTO.prdctnYear);
        }

        if (!this.$isEmpty(this.requestDTO.link)) {
          formData.append('link', this.requestDTO.link);
        }

        if (!this.$isEmpty(this.requestDTO.cn)) {
          formData.append('cn', this.requestDTO.cn);
          if (!this.$isEmpty(this.requestDTO.searchCn)) {
            formData.append('searchCn', this.requestDTO.searchCn);
          }
        }

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

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

        // 파일 추가
        if (this.multipartFiles.length > 0) {
          formData.append("multipartFiles", this.multipartFiles[0]);

          // 썸네일 정보 추가
          if (this.selectedThumb !== null) {
            formData.append('selectedThumb', this.multipartFiles[0].name);
          }
        }

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

        // API 통신
        const response = this.$isEmpty(this.pageId) ? await saveNesDtaProc(formData) : await updateNesDtaProc(formData);
        alert(this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.");

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

    // 페이지 이동
    fnMoveTo(type, id) {
      const routes = {
        'list': { name: 'NewsReleaseSearch' },
        'view': { name: 'NewsReleaseDetail', query: { id } },
        'edit': { name: 'NewsReleaseInsert', query: this.$isEmpty(id) ? {} : { id } },
      };

      if (routes[type]) {
        if (!this.$isEmpty(this.pageId) && type === 'list') {
          this.$router.push({ name: 'PicHistoryDetail', query: { id: this.pageId } });
        }
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  }
};
</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>