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

            </div>
        </div>

    </div>
    <button class="btn btn-primary btn-sm" @click="selectVote">투표하기</button>
</template>

<script setup>
import $api from '@api';
import PlusBtn from '@c/button/PlusBtn.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) =>{
    emit('addContents',itemList.value,voteId);
    itemList.value = [{ content: "", url: "" }];
}

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



</script>

<style >

</style>
