+<template>
    <div class="comment-item" v-for="comment in comments" :key="comment.id">
        <div class="pd10">
            <div class="flex align-center mb5">
                <h4 class="comment-user">{{ comment.rgtrNm }}</h4>
                <span class="comment-date ml5">{{ comment.regDt }}</span>
            </div>
            <input v-if="'isUpdate' in comment && comment.isUpdate" class="comment-text mb10" v-model="comment.cmntCn">
            <p v-else class="comment-text mb10" >{{ comment.useYn == 'Y' ? comment.cmntCn : '[ 삭제된 댓글입니다. ]' }}</p>
            <div v-if="showReplyInput[comment.cmntId]" class="flex align-center mb10">
                <div class="gd-10">
                    <input v-model="comment.replyText" class="full-input" />
                </div>

                <div class="gd-2">
                    <button class="large-btn blue-btn" @click="fnInsertCmnt(comment)">등록</button>
                </div>
            </div>
            <div class="flex justify-end align-center">
                <button  @click="toggleReplyInput(comment.cmntId)" class="ml5 comment-item-btn darkg-border-btn radius pd5">
                    {{ showReplyInput[comment.cmntId] ? '취소' : '답글 달기' }}
                </button>
                <button v-if="roles[0].authority == 'ROLE_ADMIN' || mbrId == comment.rgtr" @click="fnUpdate(comment)" class="ml5 comment-item-btn darkg-border-btn radius pd5">
                    수정
                </button>
                <button v-if="roles[0].authority == 'ROLE_ADMIN' || mbrId == comment.rgtr" @click="fnDeleteCmnt(comment.cmntId)" class="ml5 comment-item-btn red-border-btn radius pd5">
                    삭제
                </button>
            </div>
            <CommentItem v-if="comment.children" :comments="comment.children" :pageId="pageId" @isReply="isReply"/>
        </div>
        
    </div>
</template>

<script>
import queryParams from '../../../resources/js/queryParams';
import { saveCmnt, updateCmnt, deleteCmnt } from '../../../resources/api/cmnt.js'

export default {
    mixins: [queryParams],
    name: 'CommentItem',
    props: {
        comments: {
            type: Array,
            required: true
        },
        onDelete: {
            type: Function,
            required: true
        },
        pageId: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            roles : this.$store.state.roles,
            mbrId: this.$store.state.mbrId,

            upCmntId: null,

            showReplyInput: {},
            replyText: ""
        }
    },
    methods: {
        toggleReplyInput(commentId) {
            this.showReplyInput = { ...this.showReplyInput, [commentId]: !this.showReplyInput[commentId] };
            if (!this.showReplyInput[commentId]) {
                this.replyText = { ...this.replyText, [commentId]: '' };
            }
        },
        handleReply(commentId) {           
            // this.onReply(commentId, this.replyText);
            this.showReplyInput = { ...this.showReplyInput, [commentId]: false };

        },
        async fnUpdate(comment) {
            const vm = this;
            if('isUpdate' in comment && comment.isUpdate){
                 //수정 로직             
                try {
                    const params = {
                        'cmntId' : comment.cmntId,
                        'cmntCn' : comment.cmntCn
                    }
                    const res = await updateCmnt(params);
                    if (res.status == 200) {
                        alert('수정되었습니다.');
                        comment.isUpdate = false;
                    }

                } catch (error) {

                    // alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
                    alert(vm.$getCmmnMessage('err005'));
                }
                
            } else {
                comment.isUpdate = true;
            }
            

        },
        // 댓글 등록 로직
        async fnInsertCmnt(comment) {           
            const vm = this;
            // 유효성 검사
            if (comment.replyText.trim() == '' || comment.replyText == null) {
                alert('댓글을 입력해주세요.');
                return;
            }
            try {
                const params = {
                    'bbsId' : this.pageId,
                    'cmntCn' : comment.replyText,
                    'upCmntId' : comment.cmntId,
                }             
                const res = await saveCmnt(params);
                if (res.status == 200) {
                    alert('댓글이 등록되었습니다.');
                    this.replyText = '';
                    this.upCmntId = null;
                    this.$emit('isReply', true);
                }
            } catch (error) {
                // alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
                alert(vm.$getCmmnMessage('err005'));
            }

        },

        isReply(isReply) {
            this.$emit('isReply', isReply);
        },
        // 댓글 삭제 로직
        async fnDeleteCmnt(cmntId) {
            const vm = this;
            try {
                const params = {
                    'cmntId' : cmntId,
                }                
                const res = await deleteCmnt(params);
                if (res.status == 200) {
                    alert('댓글이 삭제되었습니다.');
                    this.$emit('isReply', true);
                }
            } catch (error) {
                // alert('에러가 발생했습니다.\n시스템관리자에게 문의하세요.');
                alert(vm.$getCmmnMessage('err005'));
            }
        }
    },
    watch: {
    },
    computed: {

    },
    mounted() {
     
    }
}
</script>