<template>
    <div class="card-text">
            <!-- 투표리스트 -->
            <div  v-for="(item, index) in data" :key="index" class="mt-3">
                <vote-card-check-list
                :data="item"
                :multiIs = voteInfo.LOCVOTMUL
                :selectedValues="checkedNames"
                @update:selectedValues="updateCheckedNames"
                />
                <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1">
                    <div v-for="(item, index) in itemList" :key="index" class=" mt-2">
                        <form-input
                        :title="'항목 ' + (index + data.length + 1)"
                        :name="'content' + index"
                        :is-essential="false"
                        :is-alert="contentAlerts[index]"
                        v-model="item.content"
                        :is-btn="true"
                        @keyup="ValidHandler('content' + (index + 1))"
                        >
                            <template v-slot:append>
                                <delete-btn @click="removeItem(index)" />
                            </template>
                        </form-input>
                        <form-input
                                    :title="'URL ' + (index + data.length + 1)"
                                    :name="'url' + index"
                                    v-model="item.url"
                                    :is-essential="false"
                                    class="mb-1"
                        />
                    </div>
                    <div class="d-flex justify-content align-items-center mt-3">
                        <plus-btn @click="addItem" :disabled=" total >= 10" />
                        <button class="btn btn-primary btn-icon m-1" @click="addContentSave(item.LOCVOTSEQ ,index)" :disabled="isSaveDisabled">
                            <i class="bx bx-check"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="d-flex">
                <save-btn class="mt-2 ms-auto" @click="selectVote"/>
            </div>

    </div>
</template>

<script setup>
import $api from '@api';
import PlusBtn from '@c/button/PlusBtn.vue';
import SaveBtn from '@c/button/SaveBtn.vue'
import FormInput from '@c/input/FormInput.vue';
import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
import { computed, ref } from 'vue';
import { voteCommon } from '@s/voteCommon';
import DeleteBtn from "@c/button/DeleteBtn.vue";
import { useToastStore } from '@s/toastStore';
import router from '@/router';
const toastStore = useToastStore();
const contentAlerts = ref([false, false]);
const titleAlert = ref(false);
const title = ref('');
const rink = ref('');
const { itemList, addItem, removeItem } = voteCommon(true);
const total = computed(() => props.total + itemList.value.length);
const isSaveDisabled = computed(() => {
    return itemList.value.length === 0 || itemList.value.every(item => !item.content.trim() && !item.url.trim());
});
const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    voteInfo: {
        type: Object,
        required: true,
    },
    total: {
        type: Number,
        required: true,
    },
});
const emit = defineEmits(['addContents','checkedNames']);
//항목추가
const addContentSave = (voteId,index) =>{
    let valid = true;
    const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');

    itemList.value.forEach((item, index) => {
        if (!item.content.trim() && item.url.trim()) {
            contentAlerts.value[index] = true;
            valid = false;
        } else {
            contentAlerts.value[index] = false;
        }
    });

    if(valid){
        emit('addContents',filteredItemList,voteId);
        itemList.value = [{ content: "", url: "" }];
        removeItem();
    }
}

const ValidHandler = (field) => {
    if (field.startsWith('content')) {
        const index = parseInt(field.replace('content', '')) - 1;
        if (!isNaN(index)) {
            contentAlerts.value[index] = false;
        }
    }
};

const checkedNames = ref([]); // 선택된 값 저장
const updateCheckedNames = (newValues) => {
    checkedNames.value = newValues;
};
const selectVote = () =>{
    if(checkedNames.value != ''){
        emit('checkedNames',checkedNames.value);
    }
}



</script>

<style >

</style>
