<template>
  <section class="flex flex-col gap-6 w-96">
    <div class="flex flex-col gap-2 items-center self-center">
      <Avatar :image="data.product.image" class="w-full h-40" />
      <h2 class="text-xl">{{ data.product.name }}</h2>
    </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">
          <span>{{ data.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">
          <span>{{ data.product._id }}</span>
        </div>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("تعداد ویدیو ها") }}</strong>
        <span>{{ data.product.countOfVideos }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("createdAt") }}</strong>
        <span>{{ jDate(data.product.createdAt) }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("updatedAt") }}</strong>
        <span>{{ jDate(data.product.updatedAt) }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("زمان دوره") }}</strong>
        <span>{{ data.product.duration }} ساعت</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("زبان") }}</strong>
        <span>{{ data.product.language }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("price") }}</strong>
        <span>{{ numberFormat(data.product.price) }} تومان</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("تعداد دانشجو ها") }}</strong>
        <span>{{ data.product.studentsCount }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("مدرس دوره") }}</strong>
        <span>{{ data.product.teacher.name }}</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("حجم دوره") }}</strong>
        <span>{{ data.product.totalFileSize }} گیگابایت</span>
      </li>
      <li class="flex items-center justify-between">
        <strong>{{ $t("امتیاز دانشجویان") }}</strong>
        <span>{{ data.product.averageRating }}</span>
      </li>
    </ul>
  </section>
</template>

<script setup>
import { inject, reactive } from "vue";
import { jDate } from "@/utils/jDate";
import { numberFormat } from "@/utils/numberFormat";
const dialog = inject("dialogRef");
const data = reactive(Object.assign({}, dialog.value.data));

</script>

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