<template>
    <div class="card mb-6">
        <div  class="card-body" v-if="!data.localVote.LOCVOTDEL" >
            <h5 class="card-title mb-1">
                <div class="list-unstyled users-list d-flex align-items-center gap-1">
                <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 d-flex align-items-center">
                        <!-- 투표완료시  -->
                        <i v-if="data.yesVotetotal == '1'" class="bx bxs-check-circle link-success"></i>
                        <!-- 투표작성자만 수정/삭제/종료 가능  -->
                        <div v-if="userStore.user.id === data.localVote.LOCVOTREG">
                            <button
                            v-if="!data.localVote.LOCVOTDDT"
                            type="button"
                            class="bx btn btn-danger"
                            @click="endBtn(data.localVote.LOCVOTSEQ)"
                            >종료</button>
                            <DeleteBtn @click="voteDelete(data.localVote.LOCVOTSEQ)" />
                        </div>
                    </div>
                </div>
                </div>
                </div>
            </h5>
            <h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}</h5>
            <small >{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</small>
            <!-- 투표안했을시-->
            <div v-if="data.localVote.LOCVOTDDT && data.voteResult.length == 0">
                <small class="text-primary text-uppercase">투표 결과없음 (😂아무도 투표하지 않았습니다)</small>
            </div>
            <div v-else>
            <vote-card-check
            v-if="data.yesVotetotal == 0"
            @addContents="addContents"
            @checkedNames="checkedNames"
            :data="data.voteDetails"
            :voteInfo="data.localVote"
            :total="data.voteDetails.length "/>

            <!-- 투표 결과 -->
            <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
            <vote-result-list  :data="data.voteResult"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES"/>
            </div>
            <!-- 투표완/미완 인원 -->
            <vote-user-list
            :data="data.voteMembers"/>
            </div>
        </div>
        <div v-else  class="card-body">
            <h5>{{ data.localVote.LOCVOTTTL }}</h5>
            삭제된 투표입니다.
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, 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,
    },
    randomresult: {
        type: Boolean,
        required: false,
    },
});
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const userStore = useUserInfoStore();
const currentDate = new Date();
const voteEndDate = new Date(props.data.localVote.formatted_LOCVOTEDT.replace(' ', 'T'));
voteEndDate.setDate(voteEndDate.getDate() + 1);
// 종료 여부 계산
const isVoteEnded = computed(() => {
    return currentDate > voteEndDate;
});

const emit = defineEmits(['addContents','checkedNames','endVoteId','voteEnded','randomList','voteDelete','updateVote']);
onMounted(() => {
    if (isVoteEnded.value && !props.data.localVote.LOCVOTDDT) {
    emit('voteEnded', { id: props.data.localVote.LOCVOTSEQ });
    }
});
const addContents = (itemList, voteId) =>{
    emit('addContents',itemList,voteId)
}
const checkedNames = (numList) =>{
    emit('checkedNames',numList);
}
const endBtn = (voteid) =>{
    voteEndDate.setTime(currentDate.getTime()); // 현재 날짜로 설정
    emit('endVoteId',voteid);
}
const voteDelete = (voteid) =>{
    emit('voteDelete',voteid);
}
const randomList = (random) =>{
    emit('randomList',random,props.data.localVote.LOCVOTSEQ);
}
const updateVote = (voteid) =>{
    emit('updateVote',voteid);
}
</script>

<style scoped>
.disabled-class {
    pointer-events: none; /* 클릭 방지 */
    opacity: 0.5; /* 흐리게 표시 */
}
</style>
