<template>
  <div class="content admin-style">
    <div class="admin-page-title point-font2 mb30">
      <p>팝업 관리</p>
    </div>
    <details open class="form-table-style mb30">
      <summary class="point-font2">
        <p class="summary-style pl10">기본정보</p>
      </summary>
      <div class="pt10 pb10">
        <table class="form-table">
          <colgroup>
            <col width="50%" />
            <col width="50%" />
          </colgroup>
          <tr>
            <td>
              <div class="gd-12">
                <label for="" class="form-title point-font2 mb10">제목</label>
                <input
                  type="text"
                  class="full-input"
                  v-model="popup['popupTtl']"
                  ref="popupTtl"
                  disabled
                />
              </div>
            </td>
            <td>
              <div class="gd-12">
                <label for="" class="form-title point-font2 mb10">게시일</label>
                <div class="flex justify-start align-center no-gutters">
                  <div class="gd-3">
                    <input
                      type="datetime"
                      class="full-input"
                      v-model="popup['popupBgngDt']"
                      ref="popupBgngDt"
                      disabled
                    />
                  </div>
                  <div class="pd10">-</div>
                  <div class="gd-3">
                    <input
                      type="datetime"
                      class="full-input"
                      v-model="popup['popupEndDt']"
                      ref="popupEndDt"
                      disabled
                    />
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="gd-12 pr0">
                <label for="" class="form-title point-font2 mb10">
                  팝업크기
                </label>
                <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>
            </td>
            <td>
              <div class="gd-12 pl0">
                <label for="" class="form-title point-font2 mb10">
                  업로드 형식
                </label>
                <div class="flex align-center no-gutters">
                  <div class="gd-5">
                    <input
                      type="radio"
                      id="image"
                      class="mr5"
                      v-model="popup['popupTypeCd']"
                      value="image"
                      disabled
                    />
                    <label for="image">이미지</label>
                  </div>
                  <div class="gd-5">
                    <input
                      type="radio"
                      id="video"
                      class="mr5"
                      v-model="popup['popupTypeCd']"
                      value="video"
                      disabled
                    />
                    <label for="video">영상</label>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <template v-if="popup['popupTypeCd'] == 'image'">
            <tr>
              <td colspan="2">
                <div class="gd-12 pr0">
                  <label for="" class="form-title point-font2 mb10">
                    이미지 첨부파일
                  </label>
                  <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>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="gd-12">
                  <label for="" class="form-title point-font2 mb10">
                    링크 URL
                  </label>
                  <input
                    type="text"
                    class="full-input"
                    v-model="popup['linkUrlAddr']"
                    ref="linkUrlAddr"
                    disabled
                  />
                </div>
              </td>
            </tr>
          </template>
          <tr v-if="popup['popupTypeCd'] == 'video'">
            <td colspan="2">
              <div class="gd-12">
                <label for="" class="form-title point-font2 mb10">
                  동영상 URL
                </label>
                <input
                  type="text"
                  class="full-input"
                  v-model="popup['vdoUrlAddr']"
                  ref="vdoUrlAddr"
                  disabled
                />
              </div>
            </td>
          </tr>
          <tr>      
            <td>
              <div class="gd-12">
                <label for="" class="form-title point-font2 mb10">순서</label>
                <select
                  class="full-input"
                  v-model="popup['popupSeq']"
                  ref="popupSeq"
                  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>
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </details>
    <div class="flex justify-end align-center no-gutters">
      <div class="gd-1 mr10">
        <button class="large-btn gray-btn" @click="fnList">목록</button>
      </div>
      <div class="gd-1 mr10">
        <button
          class="large-btn blue-btn"
          @click="fnUpdate"
          v-if="pageAuth.mdfcnAuthrtYn == 'Y'"
        >
          수정
        </button>
      </div>
      <div class="gd-1">
        <button
          class="large-btn red-border-btn"
          @click="fnDelete"
          v-if="pageAuth.delAuthrtYn == 'Y'"
        >
          삭제
        </button>
      </div>
    </div>
  </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(this.$getCmmnMessage("cnf002"));
      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시스템관리자에게 문의하세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },
    // 삭제
    async axiosDelete(data) {
      try {
        const response = await deleteProc(data);
        alert(response.data.message);
        if (response.status == 200) {
          this.fnList();
        }
      } catch (error) {
        // alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },
    //─────axios─────┘
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>
