<template>
    <section class="flex flex-col gap-6 w-96">
        <div class="flex flex-col gap-2 items-center self-center">
            <Avatar :image="user.product.image"  class="w-full h-40" />
            <h2 class="text-xl">{{ user.product.name }}</h2>
            <!-- <Tag :value="$t(user.accountType.toLowerCase())" severity="warning" /> -->
        </div>
        <ul class="flex flex-col gap-5">
            <li class="flex items-center justify-between">
                <strong>{{ $t('category') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <!-- <i v-if="user.confirmNumber" class="pi pi-verified text-green-600"></i> -->
                    <span>{{ user.product.categories[0].name }}</span>
                </div>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('id') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <!-- <i v-if="user.confirmEmail" class="pi pi-verified text-green-600"></i> -->
                    <span>{{ user.product._id }}</span>
                </div>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تعداد ویدیو ها') }}</strong>
                <span>{{ user.product.countOfVideos }}</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 } from 'vue';
import { jDate } from '@/utils/jDate';
import { numberFormat } from '@/utils/numberFormat';
import { ref } from 'vue';
    
    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 user = reactive(Object.assign({}, dialog.value.data))
console.log('der', user.product);
const confirmToSales = (value) => {
    dialog.value.data.confirm(user, value)
}
</script>

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