<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">
          <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>
    </ul>
  </section>
</template>

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

import { ref } from "vue";
const store = useUploaderStore();

const dialog = inject("dialogRef");
const videoUrl = ref();
const head = reactive(Object.assign({}, dialog.value.data));

watchEffect(async () => {
  videoUrl.value = await store.getUrl(head.product.videoUrl);
  console.log(videoUrl);
});
</script>

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