<template>
    <div class="card mb-6">
        <div class="card-body">
        <h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
            <img
            class="rounded-circle user-avatar border border-3 w-px-40"
            :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
            :style="`border-color: ${data.localVote.usercolor} !important;`"
            alt="user"
            />
            <div class="w-100">
            <div class="d-flex justify-content-between">
                <div class="user-info">
                    <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
                </div>
                <div class="add-btn">
                    <!-- 투표완료시  -->
                    <i class="bx bxs-check-circle link-success"></i>
                    <!-- 투표작성자만 수정/삭제/종료 가능  -->
                    <button
                    v-if="userStore.user.id === data.localVote.LOCVOTREG"
                    type="button" class="bx btn btn-danger">종료</button>
                    <EditBtn />
                    <DeleteBtn />
                </div>
            </div>
            </div>
            </div>
        </h5>
        <h5>{{ data.localVote.LOCVOTTTL }}</h5>
        <div class="mb-1">{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</div>
        <!-- 투표완료시-->
        <button v-if="data.yesVotetotal > 0" class="btn btn-primary btn-sm" >재투표</button>
        <!-- 투표안했을시-->
        <vote-card-check
        v-if="data.yesVotetotal == 0"
        @addContents="addContents"
        @checkedNames="checkedNames"
        :data="data.voteDetails"
        :voteInfo="data.localVote"
        :total="data.voteDetails.length "/>
        <!-- 투표완/미완 인원 -->
        <vote-user-list
        :data="data.voteMembers"/>
        <!-- 투표 결과 -->
        <vote-result-list />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import EditBtn from '@c/button/EditBtn.vue';
import DeleteBtn from '@c/button/DeleteBtn.vue';
import voteUserList from '@c/voteboard/voteUserList.vue';
import voteResultList from '@c/voteboard/voteResultList.vue';
import voteCardCheck from '@c/voteboard/voteCardCheck.vue';
import { useUserInfoStore } from '@s/useUserInfoStore';
import $api from '@api';

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');

const userStore = useUserInfoStore();
const emit = defineEmits(['addContents','checkedNames']);
const addContents = (itemList, voteId) =>{
    emit('addContents',itemList,voteId)
}
const checkedNames = (numList) =>{
    emit('checkedNames',numList);
}
</script>

<style scoped>

</style>
