<template>
    <div class="notice-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/notic-logo-img.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">{{ post.post_title }}</span></p>
                                <p class="flex-end write-info"><span class="writer">작성자</span><span>{{ post.rgtr_id
                                }}</span><span class="view">조회수</span><span>{{ post.view_cnt }}</span></p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="border-bottom: 1px solid #007aff;">
                                <div id="viewer" ref="viewer" class="viewer"></div>
                            </td>
                        </tr>
                        <tr>
                            <th style="width: 10%;">첨부파일명</th>
                            <td class="file-list-zone">
                                <div v-if="fileList.length == 0">
                                    <label>첨부된 파일이 없습니다.</label>
                                </div>
                                <ul v-else v-for="(item, idx) in fileList" :key="idx">
                                    <li @click="downloadFile(item)">{{ item.real_file_nm }}</li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="article-list">
                    <ul>
                        <li><span class="next">다음글</span>
                            <span>
                                <span v-if="nextPost" @click="movePost(nextPost)" class="sub-content-title">
                                    {{ nextPost.post_title }}
                                </span>
                                <span v-else class="sub-content-title">다음글이 없습니다.</span>
                            </span>
                        </li>
                        <li><span class="prev">이전글</span>
                            <span>
                                <span v-if="prevPost" @click="movePost(prevPost)" class="sub-content-title">
                                    {{ prevPost.post_title }}
                                </span>
                                <span v-else class="sub-content-title">이전글이 없습니다.</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="btn-wrap">
                    <button class="red-btn" @click="openDeleteModal()">삭제</button>
                    <button class="dark-gray-btn" @click="postSelectListPage()">목록</button>
                    <button class="blue-btn" @click="postUpdatePage()">수정</button>
                </div>
            </div>
        </div>
        <div v-show="isDeleteModalOpen" class="modal-wrapper">
            <div class="modal-container admin-alert">
                <div class="modal-content-monthly alert-modal">
                <p>해당 공지사항을 삭제하시겠습니까?</p>
            </div>
                <div class="modal-end">
                    <button class="dark-gray-btn  small-btn" @click="closeDeleteModal()">취소</button>
                    <button class="blue-btn  small-btn" @click="postDelete">확인</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 {
            post: {
                post_id: null,
                post_title: null,
                post_content: null,
                notice_yn: null,
                notice_start_dt: null,
                notice_end_dt: null,
                reg_dt: null,
                mdfcn_dt: null,
                link_url: null,
                view_cnt: null,
                file_id: null,
                bbs_id: null,
                rgtr_id: null,
                mdfr_id: null,
                ctgry_nm: null,
            },
            prevPost: {
                post_id: null,
                post_title: null,
                file_id: null,
            },
            nextPost: {
                post_id: null,
                post_title: null,
                file_id: null,
            },
            fileList: [],
            oEditors: [], // oEditors는 스마트에디터용
            route: useRoute(),

            isDeleteModalOpen: false,
        };
    },
    methods: {
        selectList: function () {
            this.$router.push({ path: '/adm/noticeSelectList.page' });
        },
        openDeleteModal: function () {
            this.isDeleteModalOpen = true;
        },

        closeDeleteModal: function () {
            this.isDeleteModalOpen = false;
        },

        postSelectOne: function () {
            const vm = this;
            axios({
                url: '/post/postSelectOne.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,
                    'bbs_id': vm.route.query.bbs_id
                }
            }).then(function (response) {
                vm.prevPost = response.data.postSelectOne.prevPost;
                vm.post = response.data.postSelectOne.post;
                vm.nextPost = response.data.postSelectOne.nextPost;
                if (response.data.selectFileList.length != 0) {
                    vm.fileList = response.data.selectFileList;
                }

                vm.getViewer(vm.post.post_content)
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
            })
        },

        getViewer(data) {
            this.viewer = new Viewer({
                el: this.$refs.viewer,
                initialEditType: 'wysiwyg',
                previewStyle: 'vertical',
                initialValue: data,
                customHTMLRenderer: {
                    htmlBlock: {
                        iframe(node) {
                            return [
                                { type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
                                { type: 'html', content: node.childrenHTML },
                                { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
                            ];
                        },
                    }
                },
            });
        },

        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('에러발생');
            });
        },

        postDelete: function () {
            const vm = this;

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

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

        postUpdatePage: function () {
            this.$router.push({ path: '/adm/noticeUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
        },

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

            axios({
                url: '/post/postSelectOne.json',
                method: 'post',
                hearder: {
                    'Content-Type': "application/json; charset=UTF-8",
                },
                data: {
                    'post_id': post1.post_id,
                    'file_id': post1.file_id,
                    'bbs_id': post1.bbs_id
                }
            }).then(function (response) {
                vm.prevPost = response.data.postSelectOne.prevPost;
                vm.post = response.data.postSelectOne.post;
                vm.nextPost = response.data.postSelectOne.nextPost;
                vm.fileList = response.data.selectFileList;


                vm.getViewer(vm.post.post_content)
            }).catch(function (error) {
                console.log("error - ", error)
                alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
            })
        }

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