<template>
    <div class="content">
        <div :class="{ 'top-banner banner  guide-banner': true, [bannerId]: true }"
            v-if="this.$route.path.startsWith('/aidt')">
            <div class="flex-column align-center justify-center content">
                <h1 class="banner-title text-ct white" aria-live="assertive">{{ $getMenuInfo().menuNm }}</h1>
                <p class="box-title text-ct white">{{ $getMenuInfo().menuCn }}</p>
            </div>
        </div>
        <PageNavigationBar />
        <div class="pt100 pb100">
            <div class="w1280">
                <ProgressBar :steps="step" :pageNumber="PageNumber" />
                <div class="consulting-zone">
                    <p class="content-title2 mb20">상담신청내용</p>
                    <Inquiry :propsType="'Q'" :propsData="discussion" :propsFiles="fileList" />
                    <div v-if="discussion.dscsnSttsNm === 'inquireComplete'" class="mt60">
                        <div class="inquiry-title flex justify-between align-center mb20">
                            <h2 class="content-title2 ">상담답변내역</h2>
                            <p>총 <span style="font-weight:700; color:'#009944'">{{ answerList.length }}</span> 개의 답변이
                                있습니다.</p>
                        </div>
                        <div v-for="(answer, idx) in answerList" :key="idx">
                            <Inquiry :propsType="'A'" :propsData="answer" />
                        </div>
                    </div>
                    <div class="flex justify-between align-center no-gutters btn-zone">
                        <div class="gd-1 pl0">
                            <button class="large-btn darkg-border-btn" title="목록" @click="discussionListPage()">목록</button>
                        </div>
                        <div class="gd-6 flex justify-end align-center">
                            <div class="gd-2 pl0">
                                <button class="large-btn red-border-btn" title="삭제"
                                    v-if="discussion.dscsnSttsNm === 'inquireRequest' && pageAuth.delAuthrtYn === 'Y'"
                                    @click="discussionDelete()">삭제</button>
                            </div>
                            <div class="gd-2 pl0 pr0">
                                <button class="large-btn blue-border-btn" title="수정"
                                    v-if="discussion.dscsnSttsNm === 'inquireRequest' && pageAuth.mdfcnAuthrtYn === 'Y'"
                                    @click="discussionUpdate()">수정</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageNavigationBar from '../../../../component/pagenavigationbar/PageNavigationBar.vue'
import Inquiry from '../../../../component/inquiry/Inquiry.vue';
import ProgressBar from '../../../../component/progressbar/ProgressBar.vue';
import { findByDscsn, dscsnDelete } from "../../../../../resources/api/inquiry";

export default {
    data() {
        return {
            // 페이지 권한 객체
            pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

            // id
            pageId: this.$route.query.pageId,

            step: ["접수중", "처리중", "답변완료"],
            discussion: {},
            demand: {},
            fileList: [],
            answerList: [],

            isEditorOpen: false,
            oEditors: [],
            initializedEditors: false,
            answer: {},
            PageNumber: null,
            bannerId: 'guide-banner'
        }
    },
    created() {
        this.findByDscsn();
    },
    methods: {
        editorOpen() {
            this.isEditorOpen = true;

            if (this.initializedEditors) {
                return;
            }

            const oEditors = this.oEditors;
            nhn.husky.EZCreator.createInIFrame({
                oAppRef: oEditors,
                elPlaceHolder: "smart1",
                sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
                htParams: {
                    bUseToolbar: true,	// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
                    bSkipXssFilter: true,
                    bUseVerticalResizer: true,
                    bUseModeChanger: true
                },
                fCreator: "createSEditor2"
            });

            this.initializedEditors = true;
        },

        editorClose() {
            this.isEditorOpen = false;

        },

        //상담 상세 조회
        async findByDscsn() {
            try {
                const data = { dscsnId: this.pageId }

                const response = await findByDscsn(data);

                if (response.status == 200) {
                    this.discussion = response.data.data.discussion;
                    this.demand = response.data.data.demand;
                    this.answerList = response.data.data.ansList;

                    if (response.data.data.fileList.length != 0) {
                        this.fileList = response.data.data.fileList;
                    }
                }
            } catch (error) {
                console.log(error)
                const errorData = error.response.data;
                if (errorData.message != null && errorData.message != "") {
                    alert(error.response.data.message);
                } else {
                    // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                    alert(this.$getCmmnMessage('err005'));
                }
            }
        },

        //수정 페이지로 이동
        discussionUpdate: function () {
            this.$router.push({ name: 'EntInquiryUpdate', query: { 'pageId': this.discussion.dscsnId } });
        },

        discussionListPage: function () {
            this.$router.push({ name: 'EntInquirySelectList' });
        },

        async discussionDelete() {
            const vm = this;
            if (!confirm(this.$getCmmnMessage("cnf002","해당 문의를 "))) return;

            vm.$store.commit('setLoading', true);
            try {
                const response = await dscsnDelete(vm.discussion);

                if (response.status == 200) {
                    alert("해당 문의를 삭제하였습니다.")
                    vm.discussionListPage();
                }
            } catch (error) {
                const errorData = error.response.data;
                if (errorData.message != null && errorData.message != "") {
                    alert(error.response.data.message);
                } else {
                    // alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                    alert(vm.$getCmmnMessage('err005'));
                }
            } finally {
                vm.$store.commit('setLoading', false);
            }
        },
    },
    watch: {
        'discussion.dscsnSttsNm': function (newV, oldV) {
            if (newV === 'inquireRequest') {
                this.PageNumber = 1
            } else if (newV === 'inquireComplete') {
                this.PageNumber = 3
            } else {
                this.PageNumber = 2
            }
        },
        // 'pageNumber':function(newV,oldV){
        //     this.pageNumber
        // }
    },
    computed: {

    },
    components: {
        'PageNavigationBar': PageNavigationBar,
        'Inquiry': Inquiry,
        'ProgressBar': ProgressBar
    },
    mounted() {
    },

}
</script>

<style scoped>
.viewer {
    user-select: text;
}
</style>
