<template>
    <div class="admin-wrap">
        <div class="content-box">
            <div class="title-wrap">
                <div class="flex-start">
                    <img src="../../../../resources/jpg/data-img-text.png" alt="자료집 아이콘" class="title-icon">
                    <h2 class="main-title">전문가 협의체</h2>
                </div>
            </div>
            <div class="content-wrap dataInsert">
                <table class="insert-table">
                    <tbody>
                        <tr>
                            <th style="width:10%">제목</th>
                            <td><input type="text" name="" id="newsTitle" v-model="post.post_title"></td>
                        </tr>
                        <tr>
                            <th style="width:10%">워킹그룹</th>
                            <td>
                                <select name="" id="" v-model="post.ctgry_nm" class="insert-select">
                                    <option value=null>선택해주세요</option>
                                    <option value="WG1">교육과정 표준체계</option>
                                    <option value="WG2">맞춤학습지원 기능</option>
                                    <option value="WG3">접근성/UDL</option>
                                    <option value="WG4">클라우드 보안인증</option>
                                    <option value="WG5">통합인증체계</option>
                                    <option value="WG6">학습이력데이터/통합대시보드</option>
                                    <option value="WG7">AI 트레이닝 데이터</option>
                                    <option value="WG8">국가수준 학습분석</option>
                                    <option value="WG9">학교 인프라</option>
                                    <option value="WG10">서비스 품질관리</option>
                                    <option value="WG11">서비스 정책</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th style="width:10%">내용</th>
                            <td><textarea name="smart" id="smart"></textarea></td>
                        </tr>
                        <tr>
                            <th style="width:10%">첨부파일</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" class="file-list">
                                    <li> {{ 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: '4',
                post_title: null,
                post_content: null,
                link_url: null,
                // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
                ctgry_nm: null,
                notice_yn: 'N',
            },
            fileList: [],
            filecount: 0,
            oEditors: [], // oEditors는 스마트에디터용
        };
    },
    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("등록 오류, 관리자에게 문의해주세요.");
                });
            }
        },

        //등록 유효성 검사
        postInsertCheck: function () {
            const oEditors = this.oEditors;
            oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
            // 스마트에디터의 iframe에 있는 내용을 textarea로. 
            this.post.post_content = document.getElementById("smart").value;

            // if(this.post.ctgry_nm = 'null') {
            //     this.post.ctgry_nm = null;
            // }

            if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
                alert("제목을 입력해주세요.");
                return false;
            }

            if (COMMON_UTIL.isEmpty(this.post.ctgry_nm) === 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);
        },

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

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

        // 파일 업로드 커스텀을 위한 함수
        openFileInput: function () {
            this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
        }
    },
    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>
