nguyen van thai
56 lines
2.2 KiB
Vue
56 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { usePollStore } from '~/stores/poll'
|
|
import { usePollOptionStore } from '~/stores/poll-option'
|
|
import type { Poll } from '~/server/models/poll';
|
|
const props = defineProps<{ dataId?: string }>();
|
|
|
|
const store = reactive({
|
|
poll: usePollStore(),
|
|
pollOptions: usePollOptionStore()
|
|
})
|
|
|
|
const poll = reactive<Poll>(await store.poll.fetchById((String(props.dataId))))
|
|
const options = ref<any []>(await store.pollOptions.fetchByPollId((String(props.dataId))))
|
|
|
|
const selectedOption = ref<any>(null);
|
|
|
|
function submitVote () {
|
|
console.log(selectedOption, 'id')
|
|
}
|
|
</script>
|
|
<template>
|
|
<span class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5]">
|
|
<span class="block">
|
|
<span class="underline decoration-gray-500 font-bold">
|
|
{{ poll?.title }}
|
|
</span>
|
|
<!-- <button v-if="showResult && canShowResult" type="button" class="underline text-blue-400" @click="toggleResults">
|
|
Câu hỏi
|
|
</button>
|
|
<button class="underline text-blue-400" v-if="!showResult && canShowResult" type="button" @click="toggleResults">
|
|
Kết quả
|
|
</button> -->
|
|
</span>
|
|
|
|
<span class="p-1 block">
|
|
<span v-for="(option, index) in options" :key="index" class="block">
|
|
<label class="flex gap-2 m-2">
|
|
<input type="radio" :value="option.id" v-model="selectedOption" />
|
|
<span class="font-semibold">{{ option?.title }}</span>
|
|
</label>
|
|
</span>
|
|
<button @click="submitVote" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Bình chọn </button>
|
|
</span>
|
|
|
|
<!-- <span v-else class="block">
|
|
<span v-for="(answer, index) in options" :key="index" class="block poll-result relative rounded-3xl overflow-hidden my-3">
|
|
<span class="absolute top-0 start-0 bottom-0 bg-gradient-to-r from-sky-500 to-indigo-500"
|
|
:style="{ width: `${calculatePercentage(answer?.voteCount)}%` }"></span>
|
|
<span class="block relative z-0 ps-1">
|
|
<span>{{ calculatePercentage(answer?.voteCount).toFixed(2) }}%</span>
|
|
<span class="">({{ answer?.voteCount }})</span>
|
|
</span>
|
|
</span>
|
|
</span> -->
|
|
</span>
|
|
</template> |