<template>
    <div class="notice-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/popup.png" alt="팝업 아이콘" class="title-icon">
                    <h2 class="main-title">팝업관리</h2>
                </div>
            </div>
            <div class="content-wrap">
                <table class="selectone-table">
                    <colgroup>
                        <col width="10%" />
                         <col width="90%" />
                    </colgroup>
                    <tbody>
                        <tr>
                            <td class="title-zone" colspan="2">
                                <p class="flex"><span class="post-title">{{ popup.popup_title }}</span></p>
                                <p class="flex-end write-info"><span class="writer">작성자</span><span>{{ popup.rgtr_id}}</span></p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="border-bottom: 1px solid #007aff;">
                                <img :src="'http://localhost:8080' + file.file_path + '/' + file.file_nm + '.' + file.file_extn_nm" style="max-width:100%; height:auto;"  alt="">
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 10%;">첨부파일명</th>
                            <td class="file-list-zone">
                                <div v-if="file.file_id == null">
                                    <label>첨부된 파일이 없습니다.</label>
                                </div>
                                <ul v-else>
                                    <li @click="downloadFile(file)">
                                    {{ file.real_file_nm }}
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="article-list">
                    <ul>
                        <li><span class="next">다음글</span>
                            <span>
                                <span v-if="nextPopup" @click="movePost(nextPopup)" class="sub-content-title">
                                    {{ nextPopup.popup_title }}
                                </span>
                                <span v-else class="sub-content-title">다음글이 없습니다.</span>
                            </span>
                        </li>
                        <li><span class="prev">이전글</span>
                            <span>
                                <span v-if="prevPopup" @click="movePost(prevPopup)" class="sub-content-title">
                                    {{ prevPopup.popup_title }}
                                </span>
                                <span v-else class="sub-content-title">이전글이 없습니다.</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="btn-wrap">
                    <button class="red-btn" @click="popupDelete()">삭제</button>
                    <button class="dark-gray-btn" @click="popupSelectListPage()">목록</button>
                    <button class="blue-btn" @click="popupUpdatePage()">수정</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useRoute } from 'vue-router';
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';
import * as FileSaver from 'file-saver';


export default {

    data() {
        return {
            popup: {
                post_id: null,
                popup_width: null,
                post_height: null,
                start_dt: null,
                end_dt: null,
                popup_title: null,
                reg_dt: null,
                mdfcn_dt: null,
                file_id: null,
                shortcuts_yn: null,
                shortcuts_url: null,
                rgtr_id: null,
                mdfr_id: null,
                notice_yn: 'N',
            },
            prevPopup: {
                post_id: null,
                popup_title: null,
                file_id: null,
            },
            nextPopup: {
                post_id: null,
                popup_title: null,
                file_id: null,
            },
            file: {},
            route: useRoute(),
        };
    },
    methods: {

        popupSelectOne: function () {
            const vm = this;
            axios({
                url: '/popup/popupSelectOne.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {
                    'post_id': vm.route.query.post_id,
                    'file_id': vm.route.query.file_id
                }
            }).then(function (response) {
                vm.prevPopup = response.data.popupSelectOne.prevPopup;
                vm.popup = response.data.popupSelectOne.post;
                vm.nextPopup = response.data.popupSelectOne.nextPopup;
                vm.file = response.data.selectFileList[0];
                console.log("vm.file",vm.file)
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
            })
        },

        downloadFile: function (item) {
            const vm = this;
            let path = item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;

            axios({
                url: '/file/downloadFile.json',
                method: 'post',
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                responseType: 'blob',
                data: `file_path=${encodeURIComponent(path)}`
            }).then((response) => {
                const blob = new Blob([response.data]);

                const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

                if (isSafari) {
                    FileSaver.saveAs(blob, item.real_file_nm);
                } else {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = item.real_file_nm;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                }

                this.$router.go(0);

            }).catch(function (error) {
                console.log('error - ', error)
                alert('에러발생');
            });
        },

        popupDelete: function () {
            const vm = this;

            axios({
                url: "/popup/popupDelete.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: vm.popup
            }).then(function (response) {
                console.log("postDelete - response : ", response.data);
                let result = response.data;
                if (result > 0) {
                    alert("삭제가 완료 되었습니다.");
                    vm.popupSelectListPage();
                } else {
                    alert("삭제실패, 다시 시도 해주세요.");
                }
            }).catch(function (error) {
                console.log("postDelete - error : ", error);
                alert("삭제 오류, 관리자에게 문의해주세요.");
            });
        },

        popupSelectListPage: function () {
            this.$router.push({ path: '/adm/popupSelectList.page' });
        },

        popupUpdatePage: function () {
            this.$router.push({ path: '/adm/popupUpdate.page', query: { 'post_id': this.popup.post_id, 'file_id': this.popup.file_id } });
        },

        movePost: function (post1) {
            const vm = this;

            axios({
                url: '/popup/popupSelectOne.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {
                    'post_id': post1.post_id,
                    'file_id': post1.file_id
                }
            }).then(function (response) {
                vm.prevPopup = response.data.popupSelectOne.prevPopup;
                vm.popup = response.data.popupSelectOne.post;
                vm.nextPopup = response.data.popupSelectOne.nextPopup;
                vm.file = response.data.selectFileList[0];
                console.log("vm.file",vm.file)
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
            })
        }

    },
    watch: {},
    computed: {},
    components: {},
    mounted() {
        this.popupSelectOne();
    }
};
</script>
