<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <th:block th:include="/include/daterangepicker.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/notice.css}">
    <script th:src="@{/js/naverEditor/js/HuskyEZCreator.js}" charset="UTF-8"></script>
</head>
<body id="body">
<th:block th:include="/include/admin-header.html"></th:block>
<div class="noticeWrap">
    <div class="container view">
        <h2 class="admin-header">팝업공지</h2>
        <div class="content admin-view">
            <div class="button-box">
                <div class="bl-button" onclick="movePath('/phits/popup-list')">목록</div>
                <div style="display: flex;">
                    <div class="bl-button edit-btn" onclick="edit()">편집</div>
                    <div class="bl-button off save-btn" onclick="save()">저장</div>
                    <div class="wt-button del-btn" onclick="delEvent()">삭제</div>
                    <div class="wt-button off x-btn" onclick="cancel()">취소</div>
                </div>
            </div>
            <div class="view-box">
                <div>
                    <input class="title" name="b_subject" th:value="${popup.getTitle()}" readonly>
                    <div id="p_content" class="b_content"></div>
                    <textarea id="content" class="b_content" style="display: none;" rows="15" readonly></textarea>
                    <div class="post-box">
                        <div>공지 기간</div>
                        <input type="text" id="post" class="post_from" name="post_from" disabled="disabled">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>
<script th:inline="javascript">
    const $delete     = $('.del-btn');
    const $save       = $('.save-btn');
    const $edit       = $('.edit-btn');
    const $cancel     = $('.x-btn');
    const $title      = $('.title');
    const $content    = $('#content');
    const $pContent   = $('#p_content');
    const $attach     = $('.attach');
    const $attachBtn  = $('.attach-btn');
    const $attachFile = $('#attach-file');
    const popup       = [[${popup}]];
    const popupId     = popup.popupid;
    const popupTitle  = popup.title;
    const $post       = $('#post');
    $pContent.html(popup.pcontent);
    let boardAArr = $('#p_content a');
    if (boardAArr.length > 0) {
        boardAArr.attr({target : '_blank', rel : 'noreferrer noopener'});
    }

    const post = $post.daterangepicker({
        timePicker: false,
        startDate: new Date(popup.post_from),
        endDate: new Date(popup.post_to),
        locale: {
            format: 'YYYY-MM-DD',
            separator: " ~ ",
            applyLabel: "확인",
            cancelLabel : "취소",
            daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"],
            monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        },
        disabled : true,
        autoApply: true,
        opens: 'center',
        drops: 'up',
    });

    let object = [];

    /**
     * 첨부파일 다운로드
     * @param attachFileId 다운로드 파일 ID
     * @param fileName 다운로드 파일 명
     */
    function attachFileDownload(attachFileId, fileName) {
        const param = {
            imgId : attachFileId,
            imgName : fileName,
        }
        getDataAsync('/api/popup/attach', 'POST', param, null, (jsonData)=>{
            const attachFile = jsonData.attach_file;

            if (attachFile && attachFile.length > 0) {
                const file = b64ToBlob(attachFile);
                const link = document.createElement('a');
                link.href = file;
                link.download = fileName;
                link.click();
            }
            else {
                alert(jsonData.message);
            }

        }, null);
    }

    /**
     * Byte Array -> Blob Data
     * @param byteData 변환 데이터
     * @returns {string} Blob URL
     */
    const b64ToBlob = (byteData) => {
        const byteCharacters = atob(byteData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray]);
        return window.URL.createObjectURL(blob);
    };

    /**
     * Input 파일 대체 버튼 클릭
     */
    function attachFile() {
        $attachFile.click();
    }

    /**
     * 첨부파일 변경 이벤트
     */
    $attachFile.on("change", function() {
        const changeFile = $(this)[0].files[0];
        if (changeFile) {
            const fileName = changeFile.name;
            $attach.html('<div><span class="attach-delete" title="첨부파일 제거" onclick="deleteAttach()"></span>' + fileName + '</div>');
        }
    })

    /**
     *  편집 모드
     */
    function edit() {
        $content.css('display', 'block');
        $pContent.css('display', 'none');
        initEditEditor();
        $delete.addClass('off');
        $edit.addClass('off');
        $save.removeClass('off');
        $cancel.removeClass('off');
        $title.addClass('modify');
        $content.addClass('modify');
        $attach.addClass('modify');
        $attachBtn.removeClass('off');
        $post.prop("disabled", false);
        $title.attr('readonly', false);
        $content.attr('readonly', false);
        $title.prop('placeholder', '팝업 제목을 입력해주세요.');
        $post.addClass("modify");

        const fileName = $attach.children().eq(0).text();
        if (fileName !== '첨부파일 없음') {
            $attach.html('<div><span class="attach-delete" title="첨부파일 제거" onclick="deleteAttach()"></span>' + fileName + '</div>')
        }


    }

    /**
     * 첨부파일 제거
     */
    function deleteAttach() {
        $attachFile.val("");
        $attach.html("<div>첨부파일 없음</div>")
    }

    /**
     * 삭제 이벤트
     */
    function delEvent() {
        if (confirm( "번호 : " + popupId + "\n제목 : " + popupTitle + '\n게시물을 삭제하시겠습니까?')) {
            getDataAsync('/api/popup/deletePopup', 'POST', {popupId : popupId}, null, (jsonData)=>{
                if (jsonData) {
                    alert(jsonData.message);
                    if (jsonData.success === "S") {
                        window.location.href = '/phits/popup-list';
                    }
                }
            }, (error)=>{
                console.log(error);
            });
        }
    }

    /**
     * 저장 이벤트
     */
    function save() {
        object.getById["content"].exec("UPDATE_CONTENTS_FIELD", []);
        // const file     = $attachFile[0].files[0];
        const title    = $title.val();
        const pcontent = $content.val();
        // const attachNm = popup.img_name;
        const postVal  = $post.val();
        let postFrom   = "";
        let postTo     = "";

        //첨부파일 기간값 유효성 체크
        if (!isNull(postVal)) {
            const postArray = postVal.split(" ~ "); // separator " ~ " 를 이용해 post_from, post_to 값을 구분
            if (postArray.length === 2) {
                postFrom = postArray[0];
                postTo   = postArray[1];
            }
            else {
                $post.focus();
                return alert('공지기간 값을 입력해주세요');
            }
        }

        if (popup.title === title && popup.pcontent === pcontent && $post.post_from === postFrom && $post.post_to === postTo) {
            // if (file) {
            //    if (file.name === attachNm) {
            //        return alert("수정하신 내용이 없습니다. 내용을 확인 해 주세요");
            //    }
            // }
            // else {
            //     const attachFileName = $attach.children().eq(0).text();
            //     if ( (attachFileName === "첨부파일 없음" && attachNm === "") || attachFileName === attachNm) {
            return alert("수정하신 내용이 없습니다. 내용을 확인 해 주세요");
                // }
            // }
        }

        const formData = new FormData();
        formData.append("popupId", popupId);
        formData.append("title", title);
        formData.append("pcontent", pcontent);
        formData.append("attachFile", null);
        formData.append("postFrom", postFrom);
        formData.append("postTo", postTo);
        formData.append("url", null);
        $.ajax({
            url: '/api/popup/modifyPopup',
            processData : false,
            contentType: false,
            data: formData,
            type: 'POST',
            success: function(jsonData) {
                if (jsonData) {
                    alert(jsonData.message);
                    if (jsonData.success === "S") {
                        window.location.href = "/phits/popup-view/" + popupId;
                    }
                }
            },
            error: function(error) {
                alert(error.responseJSON.message);
            }
        });

    }

    function cancel() {
        $content.css('display', 'none');
        $pContent.css('display', 'block');
        $('iframe').remove();
        $delete.removeClass('off');
        $edit.removeClass('off');
        $save.addClass('off');
        $cancel.addClass('off');
        $title.removeClass('modify');
        $attach.removeClass('modify');
        $attachBtn.addClass('off');
        $title.attr('readonly', true);
        $content.attr('readonly', true);
        $title.prop('placeholder', '');
        $content.prop('placeholder', '');
        $post.prop("disabled", true);
        $post.removeClass("modify");

        const attachFileName = popup.img_name;

        let attachText = "첨부파일 없음";
        if (attachFileName) {
            attachText = `<div class="attach-file" title="${attachFileName} 다운로드"
                            onclick="attachFileDownload('${popup.img_id}','${attachFileName}')">
                            ${attachFileName}
                         </div>`;
            $attach.html(attachText);
        }
    }

    function initEditEditor() {
        object = [];
        nhn.husky.EZCreator.createInIFrame({
            oAppRef: object,
            elPlaceHolder: "content",
            sSkinURI: "/js/naverEditor/SmartEditor2Skin.html",
            fCreator: "createSEditor2",
            htParams: {
                // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseToolbar: true,
                // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
                bUseVerticalResizer: true,
                // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
                bUseModeChanger: true
            },
            fOnAppLoad: function () {
                //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
                let content = popup.pcontent;
                console.log(content);
                if (content === null) {
                    content = "";
                }
                object.getById["content"].exec("PASTE_HTML", [content]);
            }
        });
        //SE2M_Configuration.js
        //nhn.husky.SE2M_Configuration.SE2M_Hyperlink -> bAutolink : true // 자동링크 생성 여부
    }
</script>