<template>
    <div class="card shadow-none border mt-6">
        <div class="card-body">
            <!-- 댓글 입력 섹션 -->
            <div class="d-flex justify-content-start align-items-top">
                <!-- 프로필섹션 -->
                <!-- <div class="avatar-wrapper">
                    <div v-if="!unknown" class="avatar me-4">
                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
                    </div>
                </div> -->
                <!-- 텍스트박스 -->
                <div class="w-100">
                    <textarea
                        class="form-control"
                        placeholder="댓글 달기"
                        rows="3"
                        v-model="comment"
                    ></textarea>
                    <span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
                </div>
            </div>

            <!-- 옵션 및 버튼 섹션 -->
            <div class="d-flex justify-content-between flex-wrap mt-4">
                <div class="d-flex flex-wrap align-items-center">
                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
                    <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="inlineCheckbox1"
                            v-model="isCheck"
                        />
                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
                    </div>

                    <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
                    <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
                        <label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
                        <input
                            type="password"
                            id="basic-default-password"
                            class="form-control flex-grow-1"
                            v-model="password"
                            placeholder="비밀번호 입력"
                        />
                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
                    </div>
                </div>

                <!-- 답변 쓰기 버튼 -->
                <div class="ms-auto mt-3 mt-md-0">
                    <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed, watch } from 'vue';
import SaveBtn from '../button/SaveBtn.vue';

const props = defineProps({
    unknown: {
        type: Boolean,
        default: true,
    },
    parentId: {
        type: Number,
        default: 0
    },
    passwordAlert: {
        type: String,
        default: false
    },
    commentAlert: {
        type: String,
        default: false
    }
});

const comment = ref('');
const password = ref('');
const isCheck = ref(props.unknown);

const emit = defineEmits(['submitComment']);
const LOCBRDTYP = isCheck.value ? '300102' : null;
function handleCommentSubmit() {
    emit('submitComment', {
        comment: comment.value,
        password: isCheck.value ? password.value : '',
        isCheck: isCheck.value,
        LOCBRDTYP,  // 익명일 경우 '300102' 설정
    });
}

watch(() => props.passwordAlert, () => {
    if (!props.passwordAlert) {
        comment.value = '';
        password.value = '';
    }
});


</script>
