<template>
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between">
            <div class="card-title mb-0">
                <h5 class="mb-1 me-2">투표진행</h5>
            </div>
        </div>
        <div class="card-body">
            <ul class="p-0 m-0">
                <li class="d-flex  mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                        <div class="me-2 mb-3">
                            <small class="card-subtitle">{{ item.localVote.formatted_LOCVOTEDT }}</small>
                            <div class="d-flex flex-wrap align-items-center">
                                <div class="avatar flex-shrink-0 me-1">
                                    <img
                                        style="cursor: auto;"
                                        class="rounded-circle user-avatar"
                                        :src="getProfileImage(item.localVote.MEMBERPRF)"
                                        alt="최초 작성자"
                                        :style="{ borderColor: item.localVote.usercolor }"
                                        @error="setDefaultImage"
                                    />
                                </div>
                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" >
                                    <div class="timeline-header ">
                                        <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
                                    </div>
                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning  me-1">
                                    </span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 모달 푸터: 더보기 버튼 오른쪽 정렬 -->
        <div class="modal-foote d-flex">
            <router-link
            to="/voteboard"
            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
            >
            more
            </router-link>
        </div>
    </div>
</div>
</template>

<script setup>
import router from '@/router';
import $api from '@api';
import { onMounted, ref } from 'vue';

// 프로필 이미지
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const defaultProfile = "/img/icons/icon.png";
const getProfileImage = (profilePath) => {
    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
const setDefaultImage = (event) => {
    event.target.src = defaultProfile;
};

const currentPage = ref(1);
const voteset = ref(0);
const voteList= ref([]);
onMounted(() => {
    getvoteList();
});

//투표목록
const getvoteList = () => {
    $api.get('vote/getVoteList',{
            //목록조회시 파라미터 전달
            params:
            {
                page: 1
                ,voteset:'2' //투표중
                ,myVote:'2' //내가한 투표표
            }
        }).then(res => {
            voteList.value = res.data.data.list;
            voteList.value = res.data.data.list.slice(0, 5);
        })
    };

// 제목이 14글자 넘어가면 ... 처리하는 함수
const truncateTitle = title => {
return title.length > 10 ? title.slice(0, 10) + '...' : title;
};

//투표이동
const goVoteList = () =>{
    router.push({
        path: '/voteboard',
        query: {
            voteset: '2',
        }
    });
}
//종료 ㅇㅇ 일 전
const getDaysAgo = (dateString) => {
    const inputDate = new Date(dateString); // 문자열을 Date 객체로 변환
    const today = new Date(); // 현재 날짜 가져오기

    // 날짜 차이 계산 (밀리초 기준)
    const timeDiff = today - inputDate;
    const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))+1; // 일 단위 변환

    // 오늘 날짜인 경우 "오늘" 반환
    if (dayDiff === 0) return "금일 종료";

    return `종료 ${Math.abs(dayDiff)}일 전`;
};
</script>

<style scoped>
.user-avatar {
    border: 3px solid;
    padding: 0.1px;
}
</style>
