<template>
<div class="d-flex align-items-start mt-3">
    <!--투표한 사람 목록 -->
    <div class="d-flex align-items-center gap-2 flex-wrap">
        <i class='bx bxs-user-check link-info fa-3x'></i>
        <vote-complete-user-list
        v-for="(item, index) in voetedUsers"
        :key="index"
        :data="item"
        />
    </div>
    <!-- 투표안한 사람 목록 -->
    <div class="d-flex align-items-center gap-2 ms-auto flex-wrap">
        <i class='bx bxs-user-x link-danger fa-3x'></i>
        <vote-in-complete-user-list
        v-for="(item, index) in noVoetedUsers"
        :key="index"
        :data="item"/>
    </div>
</div>
</template>

<script setup>
import voteCompleteUserList from '@c/voteboard/voteCompleteUserList.vue';
import voteInCompleteUserList from '@c/voteboard/voteInCompleteUserList.vue';
import { computed } from 'vue';

const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
});
const voetedUsers = computed(()=>{
    return props.data.filter(user => user.voted === 1);
})
const noVoetedUsers = computed(()=>{
    return props.data.filter(user => user.voted === 0);
})
</script>

<style scoped>
/* 스타일 정의 */
</style>
