<template>
  <div class="popup-wrap">
    <div class="popup-container">
      <div class="content" v-if="popup.popupTypeCd === 'image'">
        <button type="button" class="img-link" ref="imageWrap" @click="fnMove">
          <img
            :src="$replaceImagePath(fileList[0].ablstPathNm)"
            :alt="fileList[0].fileNm + '.' + fileList[0].extnNm"
           class="popup-img"/>
        </button>
      </div>
      <div
        class="iframe-container content cusor"
        v-else-if="popup.popupTypeCd === 'video'"
      >
        <YouTube :src="popup.vdoUrlAddr" ref="youtube" @ready="onReady" />
      </div>
    </div>
    <div class="popup-btn flex justify-end align-center pd10 border-t">
      <div class="flex align-center mr10">
        <label for="today" class="detail-text cusor">
          <input
            type="checkbox"
            name="today"
            id="today"
            v-model="isNoShowToday"
          />
          오늘 하루 보지 않기
        </label>
      </div>
      <div class="mr10">|</div>
      <div class="flex align-center">
        <button type="button" class="detail-text" title="닫기" @click="fnClose">닫기</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import YouTube from "vue3-youtube";

// API
import { sysDetailProc } from "../../../resources/api/popup";

export default {
  components: {
    YouTube,
  },
  data() {
    return {
      popupId: null, // 팝업 아이디
      // 팝업 객체
      popup: {},
      codeList: [],
      fileList: [],
      // 오늘 하루 보지 않기 체크 여부
      isNoShowToday: false,
      // 이미지 주소
      imageUrl: null,
    };
  },
  created() {
    let urlParams = new URLSearchParams(window.location.search);
    this.popupId = decodeURIComponent(urlParams.get("popupId"));
    this.fnViewDetail();
  },
  methods: {
    // 영상 자동 재생
    onReady() {
      this.$refs.youtube.playVideo();
    },
    // 팝업 조회(상세)
    fnViewDetail() {
      let data = {
        popupId: this.popupId,
      };
      this.axiosViewDetail(data);
    },
    async axiosViewDetail(data) {
      try {
        const response = await sysDetailProc(data);
        this.popup = response.data["data"]["popupVO"];
        this.codeList = response.data["data"]["codeList"];
        this.fileList = response.data["data"]["fileList"];
        // if (this.popup.popupType == "image") {
        //   this.downloadFile();
        // }
      } catch (error) {
        // alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },
    // 팝업 닫기
    fnClose() {
      if (this.isNoShowToday) {
        const today = new Date().toDateString();
        this.$cookies.set(this.popupId, today, "1d");
      }
      if (this.popup.popupType == "image") {
        window.URL.revokeObjectURL(this.imageUrl);
      }
      window.close();
    },
    // axios: 첨부파일 다운로드
    // async downloadFile() {
    //   const file = this.fileList[0];
    //   try {
    //     const response = await axios({
    //       url: "/file/fileDownload.json", // URL 경로 확인
    //       method: "post",
    //       headers: {
    //         "Content-Type": "application/json; charset=UTF-8",
    //         Authorization: this.$store.state.authorization,
    //       },
    //       data: file.fileId,
    //       responseType: "blob",
    //     });
    //     this.imageUrl = window.URL.createObjectURL(
    //       new Blob([response.data], { type: "image/" + file.extnNm })
    //     );
    //   } catch (error) {
    //     alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
    //   }
    // },
    fnMove() {
      window.open(this.popup.linkUrlAddr, '_blank')
      // window.opener.location = this.popup.linkUrlAddr;
      this.fnClose();
    },
  },
};
</script>
