<template>
    <div class="m-l-10 m-t-25">
        <loading-component style="height: 50px; top: 0;" color="success" v-show="uiStore.isLoading(section)"></loading-component>
        <div v-for="item in queueStore.getSelectableList(section)" :key="item.id">
            <input type="checkbox" :value="item.id" v-model="selectedItems">
            {{ item.text }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useUiStore } from '@/stores/ui';
import { useQueueStore } from '@/stores/queue';

interface Props {
    modelValue?: any[];
    section: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
    (e: 'update:modelValue', value: any[]): void;
}>();

const uiStore = useUiStore();
const queueStore = useQueueStore();

const selectedItems = computed({
    get: () => props.modelValue || [],
    set: (val: any[]) => emit('update:modelValue', val)
});
</script>
