<template>
    <div>
        <div class="row">
            <div class="col-10">
                <FormSelect
                    name="cate"
                    title="카테고리 선택"
                    :data="dataList"
                    :is-common="true"
                    @update:data="selectCategory = $event"
                    @change="onChange"
                />
            </div>
            <div class="col-2 btn-margin">
                <PlusBtn @click="toggleInput"/>
            </div>
        </div>
        
        <div class="row" v-if="showInput">
            <div class="col-10">
                <FormInput title="카테고리 입력" name="카테고리"  @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
            </div>
            <div class="col-2 btn-margin">
                <button class="btn btn-primary btn-icon" @click="saveInput">
                    <i class="bx bx-check"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="dict-w">
        <FormInput
            title="용어"
            type="text"
            name="word"
            :is-essential="true"
            :is-alert="wordTitleAlert"
            @update:modelValue="wordTitle = $event"
        />
    </div>
    <div>
        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" />
        <div class="text-end mt-5">
            <button class="btn btn-primary" @click="saveWord">
                <i class="bx bx-check"></i>
            </button>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed, ref, defineEmits } from 'vue';

import QEditor from '@/components/editor/QEditor.vue';
import FormInput from '@/components/input/FormInput.vue';
import FormSelect from '@/components/input/FormSelect.vue';
import PlusBtn from '../button/PlusBtn.vue';

const emit = defineEmits(['close','addCategory','addWord']);

//용어제목
const wordTitle = ref('');
const addCategory = ref('');
const content = ref('');
const imageUrls = ref([]);

//용어 Vaildation용
const wordTitleAlert = ref(false);
const wordContentAlert = ref(false);
const addCategoryAlert = ref(false);

//선택 카테고리
const selectCategory = ref('');

const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    }
});

// 데이터 포맷 수정
// const formattedDataList = computed(() =>
//     props.dataList.map(item => ({
//         label: item.CMNCODNAM,
//         value: item.CMNCODVAL
//     }))
// );

// 카테고리 입력 창
const showInput = ref(false);

// 카테고리 입력 토글
const toggleInput = () => {
    showInput.value = !showInput.value;
};

// 카테고리 저장
const saveInput = () => {
    if(addCategory.value == ''){
        addCategoryAlert.value = true;
        return;
    }
    // console.log('입력값 저장됨!',addCategory.value);
    emit('addCategory', addCategory.value);
    showInput.value = false;
};

const onChange = (newValue) => {
    selectCategory.value = newValue.target.value;
};

//용어 등록
const saveWord = () => {
    //validation

    // 용어 체크
    if(wordTitle.value == ''){
        wordTitleAlert.value = true;
        return;
    }

    // 내용 체크
    if(content.value == ''){
        wordContentAlert.value = true;
        return;
    }

    const wordData = {
        title: wordTitle.value,
        category: selectCategory.value,
        content: content.value,
    };

    emit('addWord', wordData);
};
</script>

<style scoped>
.dict-w {
    width: 83%;
}

@media (max-width: 768px) {
    .btn-margin {
        margin-top: 2.5rem
    }
}
</style>