<template>
    <div class="page">

        <div class="w1400">
            <div class="tech-view">
                <div class="page-logo flex-start">
                    <img src="../../../../resources/jpg/tech-logo.png" alt="">
                    <h1>기술문서</h1>
                </div>
                <div class="tech-report">
                    <h2>{{ post.post_title }}</h2>
                    <button @click="downloadFile()">기술문서 다운받기</button>

                </div>
                <div class="tech-info">
                    <span class="tech-info-img">
                        <img :src=src alt="기술문서 이미지">
                    </span>
                    <div class="tech-txt-wrap">
                        <table class="tech-table">
                            <tr style="border-top: 2px solid #e5e5e5 ;">
                                <th style="width: 50px;">
                                    <p> 기술문서명</p>
                                </th>
                                <td>{{ post.tech_doc_nm }}</td>
                            </tr>
                            <tr>
                                <th>
                                    <p>버전</p>
                                </th>
                                <td>{{ post.tech_doc_version }}</td>
                            </tr>
                            <tr>
                                <th>
                                    <p>배포날짜</p>
                                </th>
                                <td>{{ post.tech_doc_dt }}</td>
                            </tr>
                            <tr>
                                <th>
                                    <p>주요내용</p>
                                </th>
                                <td>{{ post.tech_doc_main_content }}</td>
                            </tr>
                            <tr>
                                <th>
                                    <p>키워드</p>
                                </th>
                                <td>{{ post.tech_doc_keyword }}</td>
                            </tr>
                        </table>
                    </div>

                </div>
            </div>
            <div>
                <div colspan="2" style="border-bottom: 1px solid #007aff;">
                    <div id="viewer" ref="viewer" class="viewer"></div>
                </div>
            </div>
            <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="tech-btn">
                <button @click="goToPage4">목록</button>
            </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: '3',
                rgtr_id: null,
                mdfr_id: null,
                ctgry_nm: null,
                tech_doc_nm: null,
                tech_doc_version: null,
                tech_doc_main_content: null,
                tech_doc_keyword: null,
                tech_doc_dt: null,
            },
            prevPost: {
                post_id: null,
                post_title: null,
                file_id: null,
                tech_doc_dt: null,
            },
            nextPost: {
                post_id: null,
                post_title: null,
                file_id: null,
                tech_doc_dt: null,
            },
            fileList: [],
            oEditors: [], // oEditors는 스마트에디터용
            route: useRoute(),
            thumbnailFileList: [],
            attachFileList: [],
            src: null,
            item:{}
        }
    },
    methods: {
        goToPage4() {
            this.$router.push('/Technology.page'),
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                })
        },

        postSelectOne: function () {
            const vm = this;
            axios({
                url: '/post/techPostSelectOne.json',
                method: 'post',
                headers: {
                    '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,
                    'tech_doc_dt': vm.route.query.tech_doc_dt
                }
            }).then(function (response) {
                vm.prevPost = response.data.techPostSelectOne.prevPost;
                vm.post = response.data.techPostSelectOne.post;
                vm.nextPost = response.data.techPostSelectOne.nextPost;
                console.log(vm.prevPost, vm.nextPost);

                if (response.data.selectFileList.length != 0) {
                    vm.fileList = response.data.selectFileList;
                    vm.thumbnailFileList = [];
                    vm.attachFileList = [];
                    for (let i = 0; i < vm.fileList.length; i++) {
                        if (vm.fileList[i].file_ty === 'thumbnail') {
                            vm.thumbnailFileList.push(vm.fileList[i]);
                        } else {
                            vm.attachFileList.push(vm.fileList[i]);
                        }
                    }
                    vm.src = 'http://localhost:8080' + vm.thumbnailFileList[0].file_path.replace('C:', '') + '/' + vm.thumbnailFileList[0].file_nm + '.' + vm.thumbnailFileList[0].file_extn_nm
                }
                vm.getViewer(vm.post.post_content)

                axios({
                    url: '/statistics/postLogInsert.json',
                    method: 'post',
                    headers: {
                        'Content-Type': "application/json; charset=UTF-8",
                    },
                    data: vm.post
                })
            }).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 () {
            const vm = this;
            let path = vm.attachFileList[0].file_path.replace('C:', '') + '/' + vm.attachFileList[0].file_nm + '.' + vm.attachFileList[0].file_extn_nm;
            console.log(path);
            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, vm.attachFileList[0].real_file_nm);
                } else {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = vm.attachFileList[0].real_file_nm;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                }

                vm.item = vm.post
                vm.item.file_id = vm.attachFileList[0].file_id;
                vm.item.file_sn = vm.attachFileList[0].file_sn;
                
                axios({
                    url: '/statistics/fileLogInsert.json',
                    method: 'post',
                    hearder: {
                        'Content-Type': "application/json; charset=UTF-8",
                    },
                    data: vm.item
                }).then(function(response){
                    vm.$router.go(0);
                })

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

        movePost: function (post1) {
            const vm = this;
            console.log('------------이동-----------')
            console.log(vm.route)
            axios({
                url: '/post/techPostSelectOne.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,
                    'tech_doc_dt': post1.tech_doc_dt
                }
            }).then(function (response) {
                vm.prevPost = response.data.techPostSelectOne.prevPost;
                vm.post = response.data.techPostSelectOne.post;
                vm.nextPost = response.data.techPostSelectOne.nextPost;
                vm.fileList = response.data.selectFileList;
                vm.thumbnailFileList = []
                vm.attachFileList = []
                for (let i = 0; i < vm.fileList.length; i++) {
                    if (vm.fileList[i].file_ty === 'thumbnail') {
                        vm.thumbnailFileList.push(vm.fileList[i]);
                    } else {
                        vm.attachFileList.push(vm.fileList[i]);
                    }
                }
                vm.src = 'http://localhost:8080' + vm.thumbnailFileList[0].file_path.replace('C:', '') + '/' + vm.thumbnailFileList[0].file_nm + '.' + vm.thumbnailFileList[0].file_extn_nm

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

    },
    computed: {

    },
    mounted() {
        console.log('Technology mounted');
        this.postSelectOne();
    }
}
</script>
