<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">
    <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";
const emit = defineEmits(['randomList']);
const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    randomResultNum: {
        type: String,
        required: false,
    },
});
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>
