thainnv-dev: Nhúng

components/article/immerse/Poll.vue

@@ -0,0 +1,56 @@
+<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>