<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 action="" class="insert-form mb-50">
      <dl>
        <dd>
          <label for="id" class="require">제목</label>
          <div class="wfull"><input type="text" id="id" value="" placeholder="제목을 입력하세요."></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="year">생산연도</label>
          <input type="text" id="year" value="" placeholder="생산연도를 입력하세요">
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="address">주소</label>
          <div class="wfull"><input type="text" id="address" value="" placeholder="주소를 입력하세요"></div>
        </dd>
        <div class="hr"></div>
        <dd>
          <label for="text">내용</label>
          <textarea name="" id=""></textarea>
        </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 class="category1">카테고리1 <button class="cancel"><b>✕</b></button></li>
            <li class="category2">카테고리2 <button class="cancel"><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>첨부파일은 10건까지 등록 가능하며, 건당 최대 100MB를 초과할 수 없습니다.</span></div>
            </li>
            <li class="file-insert">
              <input type="file" id="fileInput" class="file-input" multiple @change="showFileNames">
              <label for="fileInput" class="file-label mb-20">
                <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">
                    <!-- Corrected here: Use file.icon instead of fileicons.img -->
                    <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 class="cancel">취소</button>
      <button class="register">등록</button>
    </div>
  </div>
  <div v-if="isModalOpen" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <h2>모달 제목</h2>
      <p>모달의 내용이 여기에 들어갑니다.</p>
      <button @click="closeModal">닫기</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isModalOpen: false,
      // Define the image sources
      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',
      fileNames: [],
    };
  },
  methods: {
    showFileNames(event) {
      const files = event.target.files;
      this.fileNames = [];  // Clear previous file names

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const fileType = file.name.split('.').pop().toLowerCase();  // Get file extension

        // Set default icon
        let iconPath = this.fileicons;

        // Determine the icon based on file type
        if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/imgicon.png';  // Example for image files
        } else if (['pdf'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/pdficon.png';  // Example for PDF files
        } else if (['xls'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/excelicon.png';  // Example for audio files
        } else if (['hwp'].includes(fileType)) {
          iconPath = 'client/resources/images/icon/hwpicon.png';  // Example for video files
        }

        // Push the file name and corresponding icon to the fileNames array
        this.fileNames.push({
          name: file.name,
          icon: iconPath
        });
      }
    },
    removeFile(index) {
      // Remove file from the list
      this.fileNames.splice(index, 1);
      console.log(removeFile)
    },
    openModal() {
      this.isModalOpen = true;
    },
    // 모달 닫기
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>
