<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"
                        >
                            <template v-slot:append>
                                <delete-btn @click="removeItem(index)" />
                            </template>
                        </form-input>
                        <link-input v-model="item.url"  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)" :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 LinkInput from "@/components/voteboard/voteLinkInput.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);
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());
});
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) =>{
    const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
    emit('addContents',filteredItemList,voteId);
    itemList.value = [{ content: "", url: "" }];
}

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



</script>

<style >

</style>
