<template>
    <div class="news-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/info-logo.png" alt="공지사항 아이콘" class="title-icon">
                    <h2 class="main-title">홍보 / news</h2>
                </div>
            </div>
            <div class="content-wrap NewsInsert">
                <table class="insert-table">
                    <tbody>
                        <tr>
                            <th>제목</th>
                            <td><input type="text" name="" id="newsTitle" maxlength="15" v-model="post.post_title"
                                    placeholder="제목을 15자 내외로 적어주세요"></td>
                        </tr>
                        <tr>
                            <th>내용</th>
                            <td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
                        </tr>
                        <!-- <tr>
                            <th>썸네일</th>
                            <td>
                                <div class="btn-upload" @click="openFileInput">파일 업로드</div>
                                <input type="file" name="file" id="file" ref="fileInput" style="display: none"
                                    @change="fileUpload()">
                                <ul v-for="(file, idx) in fileList" :key="idx">
                                    <li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <th>첨부파일</th>
                            <td>
                                <div class="btn-upload" @click="openFileInput">파일 업로드</div>
                                <input type="file" name="file" id="file" ref="fileInput" style="display: none"
                                    @change="fileUpload()">
                                <ul v-for="(file, idx) in fileList" :key="idx">
                                    <li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
                                </ul>
                            </td>
                        </tr> -->
                        <tr>
                            <th>썸네일</th>
                            <td>
                                <div class="join-sub-input join-imgbox"
                                    @click="openFileInput('thumbnail', 'thumbnailInput')">
                                    <p>375 X 251</p>
                                    <img v-if="thumbnailPreview" :src="thumbnailPreview" />
                                    <input type="file" name="file" id="file" ref="thumbnailInput" style="display: none"
                                        @change="fileUpload">
                                </div>
                                <p class="text-info">※ 썸네일 크기는 최소크기 1087 x 614 픽셀 이상 등록 가능합니다.</p>

                            </td>
                        </tr>
                        <tr>
                            <th>첨부파일</th>
                            <td>
                                <div class="btn-upload" @click="openFileInput('attach', 'attachInput')">파일 업로드</div>
                                <input type="file" name="file" id="file" ref="attachInput" style="display: none"
                                    @change="fileUpload">
                                <ul class="file-list"
                                    v-for="(file, idx) in fileList.filter(file => file.file_ty === 'attach')" :key="idx">
                                    <li> {{ file.file.name }} <button @click="fileRemove(idx)" class="aclose-btn">X</button>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="btn-wrap">
                    <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
                    <button class="blue-btn" @click="postInsertCheck()">등록</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';

export default {
    data() {
        return {
            post: {
                bbs_id: '1',
                post_title: null,
                post_content: null,
                // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
                ctgry_nm: null,
                notice_yn: 'N',
            },
            fileList: [],
            filecount: 0,
            oEditors: [], // oEditors는 스마트에디터용
            //
            fileInputRef: null,
            thumbnailPreview: null,
        };
    },
    methods: {
        //게시글 및 첨부파일 등록
        // postInsert: function () {
        //     const vm = this;
        //     let formData = new FormData();

        //     if (vm.fileList.length > 0) {
        //         for (let i = 0; i < vm.fileList.length; i++) {
        //             formData.append('file', vm.fileList[i]);
        //             console.log(formData.get('file'));
        //         }
        //         formData.append("post", JSON.stringify(vm.post));

        //         axios({
        //             url: '/post/postFileInsert.file',
        //             method: 'post',
        //             headers: {
        //                 'Content-Type': 'multipart/form-data',
        //             },
        //             data: formData
        //         }).then(function (response) {
        //             console.log("qnaInsert - response : ", response);
        //             let result = response.data;
        //             if (result > 0) {
        //                 alert("등록을 완료하였습니다.");
        //                 vm.postSelectListPage()
        //             } else {
        //                 alert("등록 실패, 관리자에게 문의해주세요.");
        //             }
        //         }).catch(function (error) {
        //             console.log("qnaInsert - error : ", error);
        //             alert("등록 오류, 관리자에게 문의해주세요.");
        //         });
        //     } else {

        //         axios({
        //             url: '/post/postInsert.json',
        //             method: 'post',
        //             headers: {
        //                 'Content-Type': "application/json; charset=UTF-8",
        //             },
        //             data: vm.post
        //         }).then(function (response) {
        //             console.log("noticeInsert - response : ", response);
        //             let result = response.data;
        //             if (result > 0) {
        //                 alert("등록을 완료하였습니다.");
        //                 vm.postSelectListPage()
        //             } else {
        //                 alert("등록 실패, 관리자에게 문의해주세요.");
        //             }
        //         }).catch(function (error) {
        //             console.log("noticeInsert - error : ", error);
        //             alert("등록 오류, 관리자에게 문의해주세요.");
        //         });
        //     }
        // },

        postInsert: function () {
            const vm = this;
            let formData = new FormData();

            if (vm.fileList.length > 0) {
                for (let i = 0; i < vm.fileList.length; i++) {
                    formData.append('file', vm.fileList[i].file);
                    formData.append('file_ty', vm.fileList[i].file_ty);
                }

                formData.append("post", JSON.stringify(vm.post));

                axios({
                    // url: '/post/postFileInsert.file',
                    url: '/post/newsFileInsert.file',
                    method: 'post',
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                    data: formData
                }).then(function (response) {
                    let result = response.data;
                    if (result > 0) {
                        alert("등록을 완료하였습니다.");
                        vm.postSelectListPage()
                    } else {
                        alert("등록 실패, 관리자에게 문의해주세요.");
                    }
                }).catch(function (error) {
                    console.log("postFileInsert - error : ", error);
                    alert("등록 오류, 관리자에게 문의해주세요.");
                });
            } else {
                axios({
                    url: '/post/postInsert.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("noticeInsert - error : ", error);
                    alert("등록 오류, 관리자에게 문의해주세요.");
                });
            }
        },
        //등록 유효성 검사
        postInsertCheck: function () {
            const oEditors = this.oEditors;
            oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
            // 스마트에디터의 iframe에 있는 내용을 textarea로. 
            this.post.post_content = document.getElementById("smart").value;
            const hasThumbnail = this.fileList.some(item => item.file_ty === 'thumbnail');

            if (!hasThumbnail) {
                alert("썸네일을 등록해주세요");
                return false;
            }
            if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
                alert("제목을 입력해주세요.");
                return false;
            }

            if (COMMON_UTIL.isEmpty(this.post.post_content) === false || this.post.post_content === "<p><br></p>") {
                alert("내용을 입력해주세요.");
                return false;
            }

            this.postInsert();
        },

        //파일업로드
        // fileUpload: function () {
        //     this.fileList[this.filecount] = this.$refs.fileInput.files[0]

        //     this.filecount += 1
        //     console.log("file", this.fileList);
        // },
        fileUpload: function () {
            const MIN_WIDTH = 375;
            const MIN_HEIGHT = 251;

            const file = this.$refs[this.fileInputRef].files[0];
            const fileItem = { file, file_ty: this.file_ty };

            if (this.file_ty === 'thumbnail') {
                const thumbnailIndex = this.fileList.findIndex(file => file.file_ty === 'thumbnail');
                if (thumbnailIndex !== -1) {
                    this.fileList.splice(thumbnailIndex, 1);
                }
                let reader = new FileReader();
                reader.onload = (e) => {
                    this.thumbnailPreview = e.target.result;

                    // 이미지크기 확인
                    const img = new Image();
                    img.src = this.thumbnailPreview;
                    img.onload = () => {
                        if (img.width < MIN_WIDTH || img.height < MIN_HEIGHT) {
                            alert("썸네일 이미지 크기는 최소 " + MIN_WIDTH + "픽셀" + "x" + MIN_HEIGHT + "픽셀" + "입니다.");
                            this.thumbnailPreview = null;
                            this.$refs.thumbnailInput.value = ''
                        }
                        // // Continue adding the thumbnail to the fileList
                        // this.fileList.push(fileItem);
                        // this.filecount += 1;
                        // console.log("file::::", this.fileList);
                    };
                };
                reader.readAsDataURL(file);
            }

            this.fileList.push(fileItem);
            this.filecount += 1;
        },

        //파일업로드 중 업로드 파일 삭제
        fileRemove(idx) {
            this.fileList.splice(idx, 1);
            this.filecount = this.fileList.length;
        },

        //게시글 리스트로 이동
        postSelectListPage: function () {
            this.$router.push({ path: '/adm/newsSelectList.page' });
        },

        // 파일 업로드 커스텀을 위한 함수
        // openFileInput: function () {
        //     this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
        // },
        openFileInput: function (file_ty, inputRef) {
            this.file_ty = file_ty;
            this.fileInputRef = inputRef;
            this.$refs[inputRef].click();
        },

    },
    watch: {},
    computed: {},
    components: {},
    mounted() {
        // 스마트 에디터 적용
        const oEditors = this.oEditors;
        nhn.husky.EZCreator.createInIFrame({
            oAppRef: oEditors,
            elPlaceHolder: "smart",
            sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
            htParams: {
                bUseToolbar: true,				// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                bSkipXssFilter: true,
                bUseVerticalResizer: true,
                bUseModeChanger: true
            },
            fCreator: "createSEditor2"
        });


    }
};
</script>
