<template>
  <div class="content-zone sch-full">
    <div class="content">
      <div class="scroll">
        <div class="form-box">
          <div class="form-box-title">
            <p>기본정보</p>
          </div>
          <div class="form-content">
            <div>
              <p class="form-title">제목</p>
              <p>{{ popup['popupTtl'] }}</p>
              <!-- <input
                type="text"
                class="full-input"
                v-model="popup['popupTtl']"
                ref="popupTtl"
                disabled
              /> -->
            </div>
            <div>
              <p class="form-title">게시일</p>
              <p>{{ popup['bgngDt'] +"-"+  popup['endDt'] }}</p>
         
                  <!-- <input
                    type="datetime"
                    class="full-input"
                    v-model="popup['bgngDt']"
                    ref="bgngDt"
                    disabled
                  />
    
                <div class="pd10">-</div>
            
                  <input
                    type="datetime"
                    class="full-input"
                    v-model="popup['endDt']"
                    ref="endDt"
                    disabled
                  /> -->
           

            </div>
            <div>
              <p class="form-title">팝업크기</p>
              <p>{{ popup['wdthLen'] + "X" + popup['vrtcLen']}}</p>
             
              <!-- <div class="flex align-center">
                <div class="gd-3 pl0">
                  <select
                    class="full-input"
                    v-model="popup['popupSizeType']"
                    disabled
                  >
                    <option value="fixed">고정값</option>
                    <option value="custom">사용자지정</option>
                  </select>
                </div>
                <div class="gd-9 pr0">
                  <div
                    v-if="popup['popupSizeType'] == 'fixed'"
                    class="flex align-center no-gutters"
                  >
                    <div
                      v-for="(popupSize, index) of popupSizes"
                      :key="index"
                      class="gd-3"
                    >
                      <input
                        type="radio"
                        :id="popupSize['id']"
                        class="mr5"
                        v-model="popup['popupSize']"
                        :value="popupSize['id']"
                        ref="popupSize"
                        disabled
                      />
                      <label :for="popupSize['id']">
                        {{ popupSize["wdthLen"] }}X{{ popupSize["vrtcLen"] }}
                      </label>
                    </div>
                  </div>
                  <div
                    v-if="popup['popupSizeType'] == 'custom'"
                    class="flex align-center no-gutters"
                  >
                    <div class="gd-5">
                      <input
                        type="text"
                        class="full-input"
                        v-model="popup['wdthLen']"
                        disabled
                      />
                    </div>
                    <div class="pd10">x</div>
                    <div class="gd-5">
                      <input
                        type="text"
                        class="full-input"
                        v-model="popup['vrtcLen']"
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </div> -->
            </div>
            <div>
              <p class="form-title">업로드 형식 </p>
              <p>{{ popup['popupType'] }}</p>
              <!-- <div class="flex align-center no-gutters">
                <div class="gd-5">
                  <input
                    type="radio"
                    id="image"
                    class="mr5"
                    v-model="popup['popupType']"
                    value="image"
                    disabled
                  />
                  <label for="image">이미지</label>
                </div>
                <div class="gd-5">
                  <input
                    type="radio"
                    id="video"
                    class="mr5"
                    v-model="popup['popupType']"
                    value="video"
                    disabled
                  />
                  <label for="video">영상</label>
                </div>
              </div> -->
            </div>
            <template v-if="popup['popupType'] == 'image'">
              <div>
                <p class="form-title">이미지 첨부파일</p>
                <p v-if="fileList.length < 1">첨부파일이 없습니다.</p>
                <p v-else>{{ fileList[0]['fileNm'] + '.' + fileList[0]['extnNm'] }}</p>
                <!-- <div class="flex align-center">
                  <div class="gd-10 pl0">
                    <div class="filebox">
                      <input
                        class="upload-name full-input"
                        :placeholder="
                          fileList.length < 1
                            ? '첨부파일이 없습니다.'
                            : fileList[0]['fileNm'] +
                              '.' +
                              fileList[0]['extnNm']
                        "
                        disabled
                      />
                    </div>
                  </div>
                  <div class="gd-2 pl0 pr0">
                    <button
                      for="file"
                      class="large-btn gray-border-btn text-ct"
                      disabled
                    >
                      파일찾기
                    </button>
                  </div>
                </div> -->
              </div>
              <div>
                <p class="form-title">링크 URL</p>
                <p v-if="popup['linkUrl'] != null || popup['linkUrl'] != ''">{{ popup['linkUrl'] }}</p>
                <p v-else>링크가 없습니다.</p>
                <!-- <input
                  type="text"
                  class="full-input"
                  v-model="popup['linkUrl']"
                  ref="linkUrl"
                  disabled
                /> -->
              </div>
            </template>
            <template v-if="popup['popupType'] == 'video'">
                <div>
                  <p class="form-title">동영상 URL</p>
                  <p>{{ popup['vdoUrl'] }}</p>
                  <!-- <input
                    type="text"
                    class="full-input"
                    v-model="popup['vdoUrl']"
                    ref="vdoUrl"
                    disabled
                  /> -->
                </div>
            </template>
              <div>
                <p class="form-title point-font2 mb10"> 팝업 노출 페이지</p>
                <p>{{ popup['pageType'] }}</p>
                <!-- <select
                  class="full-input"
                  v-model="popup['pageType']"
                  ref="pageType"
                  disabled
                >
                  <option value="">팝업을 노출할 페이지를 선택하세요.</option>
                  <option
                    v-for="(item, index) of codeList"
                    :key="index"
                    :value="item.cd"
                  >
                    {{ item.cdNm }}
                  </option>
                </select> -->
              </div>
              <div>
                <p class="form-title">순서</p>
                <p>{{ popup['sn'] }}</p>
                <!-- <select
                  class="full-input"
                  v-model="popup['sn']"
                  ref="sn"
                  disabled
                >
                  <option value="0">순서를 선택하세요.</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select> -->
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="btn-wrap">
      <button class="btn sm tertiary" @click="fnList">목록</button>
      <button
        class="btn sm main"
        @click="fnUpdate"
        v-if="pageAuth.mdfcnAuthrt == 'Y'"
      >
        수정
      </button>
      <button
        class="btn sm red"
        @click="fnDelete"
        v-if="pageAuth.delAuthrt == 'Y'"
      >
        삭제
      </button>
  </div>
</template>

<script>
import { mdiClose, mdiTrayArrowDown } from "@mdi/js";

// API
import { detailProc, deleteProc } from "../../../../resources/api/popup";

export default {
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      path: mdiClose,
      downPath: mdiTrayArrowDown,

      file: null,

      // 팝업 객체
      popup: {},
      popupSizes: [
        { id: "PS1", wdthLen: 300, vrtcLen: 300 },
        { id: "PS2", wdthLen: 500, vrtcLen: 700 },
        { id: "PS3", wdthLen: 700, vrtcLen: 1000 },
        { id: "PS4", wdthLen: 1200, vrtcLen: 850 },
      ],

      // 파일 업로드
      files: null,
      fileList: [],
      deleteFileList: [],

      codeList: [], // 팝업 노출 페이지
    };
  },
  created() {
    this.fnViewDetail();
  },
  methods: {
    // 조회(상세)
    fnViewDetail() {
      let data = {
        popupId: this.$route.query.pageId,
      };
      this.axiosViewDetail(data);
    },
    // 수정
    fnUpdate() {
      this.$router.push({
        name: "admPopupManagementInsert",
        query: { pageId: this.$route.query.pageId },
      });
    },
    // 삭제
    fnDelete() {
      const isDelete = confirm("삭제하시겠습니까?");
      if (isDelete) {
        let data = this.popup;
        this.axiosDelete(data);
      }
    },
    // 목록
    fnList() {
      this.$router.push({
        name: "admPopupManagementSelectList",
      });
    },

    //─────axios─────┐
    // 상세 조회
    async axiosViewDetail(data) {
      try {
        const response = await detailProc(data);
        this.popup = response.data["data"]["popupVO"];
        this.codeList = response.data["data"]["codeList"];
        this.fileList = response.data["data"]["fileList"];
        // 팝업 크기 삽입
        for (let popupSize of this.popupSizes) {
          if (
            popupSize["wdthLen"] == this.popup["wdthLen"] &&
            popupSize["vrtcLen"] == this.popup["vrtcLen"]
          ) {
            this.popup["popupSize"] = popupSize["id"];
          }
        }
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    // 삭제
    async axiosDelete(data) {
      try {
        const response = await deleteProc(data);
        alert(response.data.message);
        if (response.status == 200) {
          this.fnList();
        }
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    //─────axios─────┘
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>
