<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="gallery-form mb-40" @submit.prevent>
      <dl class="mb-60">
        <dd>
          <p>{{ findResult.sj }}</p>
          <div class="date flex align-center">
            <img :src="calendaricon" alt="">
            <span>{{ $dotFormatDate(findResult.rgsde) }}</span>
          </div>
        </dd>
      </dl>
      <div class="flex-sp-bw mb-50">
        <div class="img-box">
          <img v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :src="findResult.files[0].filePath" :alt="썸네일" style="max-width: 100%" />
          <img v-else :src="noimg" :alt="썸네일" />
        </div>
        <form class="info-form wfull" @submit.prevent>
          <div class="info-box">
            <h3>기본정보</h3>
            <dl>
              <dd class="mb-20">
                <img :src="addressicon" alt="">
                <span>링크</span>
                <p><a :href="findResult.link" target="_blank">{{ findResult.link }}</a></p>
              </dd>
              <dd class="mb-20">
                <img :src="yearicon" alt="">
                <span>생산연도</span>
                <p>{{ $dotFormatDate(findResult.prdctnYear) }}</p>
              </dd>
              <dd>
                <img :src="categoryicon" alt="">
                <span>카테고리</span>
                <ul class="category">
                  <li v-for="(item, idx) of findResult.ctgrys" :key="idx" class="category">{{ item.ctgryNm }}</li>
                </ul>
              </dd>
            </dl>
          </div>
        </form>
      </div>
    </form>
    <h3>내용</h3>
    <form class="info-form mb-50" @submit.prevent>
      <dl>
        <dd>
          <ViewerComponent :content="findResult.cn" />
        </dd>
      </dl>
    </form>
    <div class="btn-group flex-center">
      <button v-if="isRegister" class="red-line " type="button" @click="fnDelete">삭제</button>
      <button v-if="isRegister" class="blue-line " type="button" @click="fnMoveTo('edit', pageId)">수정</button>
      <button class="gray-line-bg " type="button" @click="fnMoveTo('list')">목록</button>
    </div>
  </div>
</template>
<script>
// COMPONENT
import ViewerComponent from '@/views/component/editor/ViewerComponent.vue';
// API
import { findNesDtaProc, deleteNesDtaProc } from '@/resources/api/nesDta';

export default {
  components: {
    ViewerComponent,
  },

  data() {
    return {
      // ICON
      noimg: "client/resources/images/no_img.png",
      calendaricon: 'client/resources/images/icon/calendaricon.png',
      homeicon: 'client/resources/images/icon/home.png',
      erroricon: 'client/resources/images/icon/error.png',
      righticon: 'client/resources/images/icon/right.png',
      addressicon: 'client/resources/images/icon/addressicon.png',
      yearicon: 'client/resources/images/icon/yearicon.png',
      categoryicon: 'client/resources/images/icon/categoryicon.png',

      pageId: null,
      findResult: {},
      selectedFiles: [],

      isRegister: false,
    };
  },

  created() {
    this.pageId = this.$route.query.id;
    if (this.$isEmpty(this.pageId)) {
      alert("게시물 존재하지 않습니다.");
      this.fnMoveTo('list');
    }
  },

  mounted() {
    this.fnFindNesDta(); // 상세 조회
  },

  methods: {
    // 상세 조회
    async fnFindNesDta() {
      try {
        const response = await findNesDtaProc(this.pageId);
        this.findResult = response.data.data.nesDta;
        this.isRegister = this.$registerChk(this.findResult.register);
      } catch (error) {
        alert('조회중 오류가 발생했습니다.');

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

        this.fnMoveTo('list');
      }
    },

    // 삭제
    async fnDelete() {
      let isCheck = confirm("해당 페이지를 삭제하시겠습니까?");
      if (!isCheck) {
        return;
      }

      try {
        const response = await deleteNesDtaProc(this.pageId);
        alert('해당 페이지를 삭제했습니다.');
        this.fnMoveTo('list'); // 목록으로 이동
      } catch (error) {
        if (error.response) {
          alert(error.response.data.message);
        }
        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]) {
        this.$router.push(routes[type]);
      } else {
        alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
        this.$router.push(routes['list']);
      }
    },
  },
};
</script>