<template>
  
    <Panel :header="$t('لیست ویدیو های دوره')">
        <template #icons>
            <Button
              icon="pi pi-plus"
              :label="$t('افزودن ویدیو')"
              severity="success"
              @click="create()"
            />
          </template>
      <DataTable :value="store.items">
 
        <Column class="w-64" field="headline" :header="$t('عنوان ویدیو')" />
        <Column field="description" :header="$t('description')" />
        <Column :header="$t('options')" headerClass="w-32">
            <template #body="{ data }">
                <div class="flex justify-end">
                <Button icon="pi pi-eye" rounded text severity="secondary"
                 @click="show(data)" />
                <Button
        
                  icon="pi pi-pencil"
                  rounded
                  text
                  severity="secondary"
                  @click="edit(data)"
                />
                <Button
                @click="remove(data)"
                  icon="pi pi-trash"
                  rounded
                  text
                  severity="danger"
                  :loading="data.removing"
          
                />
              </div>
            </template>
          </Column>
        <!--   <Column :field="({ price }) => numberFormat(price)" :header="$t('price')" />
              <Column :header="$t('category')" class="whitespace-nowrap">
                  <template #body="{ data: { category } }">
                      <span v-if="category.length > 0">
                          {{ category.slice(-1)[0].name }}
                      </span>
                  </template>
              </Column>
              <Column field="name" :header="$t('reviews')">
                  <template #body="{ data: { name } }">
                      <Rating :modelValue="name" readonly :cancel="false" class="[&_svg]:text-yellow-400" />
                  </template>
              </Column>
              <Column :header="$t('status')">
                  <template #body="{ data: { confirmToShow, _id } }">
                      <Tag v-if="!confirmToShow" value="غیر فعال" severity="danger" @click="accepter(_id,true)"/>
                      <Tag v-if="confirmToShow" value="فعال" severity="success" @click="accepter(_id,false)"/>
                  </template>
                  
              </Column>
              <Column :field="({ createdAt }) => jDate(createdAt)" :header="$t('createdAt')" class="w-28" />
              <Column :field="({ updatedAt }) => jDate(updatedAt)" :header="$t('updatedAt')" class="w-32 text-center" />
              <Column headerClass="w-32">
                  <template #body="{ data }">
                      <div class="flex justify-end">
                          <Button icon="pi pi-eye" rounded text severity="secondary" @click="show(data)" />
                          <Button icon="pi pi-pencil" rounded text severity="secondary" @click="edit(data)" />
                          <Button icon="pi pi-trash" rounded text severity="danger" :loading="data.removing"
                              @click="remove(data)" />
                      </div>
                  </template>
              </Column> -->
        <template #empty>
          <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
        </template>
        <template #footer>
          <Pagination :total="store.total" />
        </template>
      </DataTable>
      <!-- <Galleria
        v-model:visible="galleryVes"
        :value="gallery"
        :numVisible="5"
        containerClass="w-1/2"
        circular
        fullScreen
        showItemNavigators
        :showThumbnailNavigators="false"
      > -->

    </Panel>
  </template>
  

<script setup>
const { toast, dialog, confirm, t } = inject('service')

import { ref, watchEffect, reactive, defineAsyncComponent, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useHeadlinesStore } from "@/stores/Headlines"
const store = useHeadlinesStore()
const route = useRoute()
const videos = reactive({})
const HeadlineDetail = defineAsyncComponent(() => import('../components/HeadlineDetail.vue'));
const AddVideo = defineAsyncComponent(() => import('../components/AddVideo.vue'));
watchEffect(async() => {
     await store.index(route.params.id)
})

const show = (product) => {
    dialog.open(HeadlineDetail, {
        props: { modal: true, closable: true, header: t('پیش نمایش ویدیو') },
        data: {
            product
        }
    });
}
const router = useRouter()
const create = () =>{
    // router.push('/videos/create')
    dialog.open(AddVideo, {
        props: { modal: true, closable: true, header: t('افزودن ویدیو') },
        data: {
            produc : route.params.id
        }
    });
}
const remove = async(data) => {
    confirm.require({
        message: t('Are you sure you want to proceed?'),
        header: t('Danger Zone'),
        icon: 'pi pi-info-circle',
        acceptClass: 'p-button-danger p-button-sm',
        rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
        rejectLabel: t('cancel'),
        acceptLabel: t('beOmitted'),
        defaultFocus: 'reject',
        accept: async () => {
             await store.delete(data.id)
            await store.index(route.params.id)
            // if (status === 200)
            //     toast.add({
            //         severity: 'success', summary: t('successful'), detail: t('destroySuccessfully'), life: 3000
            //     });
            // else
            //     toast.add({
            //         severity: 'error', summary: t('error'), detail: data.msg, life: 3000
            //     });
        },
    });

}

</script>