<template>
    <section class="flex flex-col gap-6 w-96">
        <ul class="flex flex-col gap-5">
  
            <li class="flex items-center justify-between">
                <video :src="videoUrl.data.url" autoplay></video>
               </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('عنوان') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <!-- <i v-if="user.confirmEmail" class="pi pi-verified text-green-600"></i> -->
                    <span>{{ head.product.headline }}</span>
                </div>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('توضیحات') }}</strong>
                <span>{{ head.product.description }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تعداد نظرات') }}</strong>
                <span>{{ head.product.Comment.length }}</span>
            </li>
            <!--
            <li class="flex items-center justify-between">
                <strong>{{ $t('createdAt') }}</strong>
                <span>{{ jDate(user.product.createdAt) }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('updatedAt') }}</strong>
                <span>{{ jDate(user.product.updatedAt) }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('زمان دوره') }}</strong>
                <span>{{ user.product.duration }} ساعت</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('زبان') }}</strong>
                <span>{{ user.product.language }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('price') }}</strong>
                <span>{{ numberFormat(user.product.price) }} تومان</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تعداد دانشجو ها') }}</strong>
                <span>{{ user.product.studentsCount }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('مدرس دوره') }}</strong>
                <span>{{ user.product.teacher.name }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('حجم دوره') }}</strong>
                <span>{{ user.product.totalFileSize }} گیگابایت</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('امتیاز دانشجویان') }}</strong>
                <span>{{ user.product.averageRating }}</span>
            </li> -->
        </ul>
    </section>

</template>

<script setup>
import { inject, reactive, watchEffect } from 'vue';
import { jDate } from '@/utils/jDate';
import { numberFormat } from '@/utils/numberFormat';
import { useUploaderStore } from "@/stores/uploader"

import { ref } from 'vue';
    const store = useUploaderStore()
    const tabs = ref([
        { title: 'Tab 1', content: 'Tab 1 Content', value: '0' },
        { title: 'Tab 2', content: 'Tab 2 Content', value: '1' },
        { title: 'Tab 3', content: 'Tab 3 Content', value: '2' }
    ]);
const dialog = inject('dialogRef')
const videoUrl  = ref()
const head = reactive(Object.assign({}, dialog.value.data))
console.log('head', );
watchEffect(async() =>{
     videoUrl.value  = await store.getUrl(head.product.videoUrl)
    console.log(videoUrl);
})
// const confirmToSales = (value) => {
//     dialog.value.data.confirm(user, value)
// }
</script>

<style lang="scss" scoped></style>