<template>
    <div v-if="!isRandom && !randomResultNum">
        <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
        <!-- 중복된 1위 리스트 -->
        <vote-result-random-list
        v-for="(item,index) in data"
        :key="index"
        :data="item"
        :randomResultNum="randomResultNum"/>
    </div>
    <div v-if="isRandom === false && randomResultNum">
        <vote-result-card  :randomResultNum="randomResultNum"/>
    </div>
    <button v-if="isRandom" class="btn btn-primary" type="button" disabled="">
        <span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
        random..
    </button>
    <div class="d-grid w-100 mt-6"  v-if="userStore.user.id === locvotreg">
        <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
    </div>
</template>

<script setup>
import voteResultRandomList from "@c/voteboard/voteResultRandomList.vue"
import voteResultCard from '@c/voteboard/voteResultCard.vue';
import { ref, watch } from "vue";
import { useUserInfoStore } from "@s/useUserInfoStore";
const emit = defineEmits(['randomList']);
const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    randomResultNum: {
        type: String,
        required: false,
    },
    locvotreg: {
        type: Number,
        required: false,
    },
});
const userStore = useUserInfoStore();
const isRandom = ref(false);
const randomList = () =>{
    isRandom.value = true;
    emit('randomList', props.data);
}

watch(() => props.randomResultNum, (newVal) => {
    if (newVal) {
        setTimeout(() => {
            isRandom.value = false;
        }, 2000);
    }
});
</script>

<style>

</style>
