<script lang="ts" setup>
const loginState = useLoginState()

const { data: pptCategories } = useAsyncData('pptCategories', () =>
  useFetchWrapped<
    PagedDataRequest & AuthedRequest,
    BaseResponse<PagedData<PPTCategory>>
  >('App.Digital_PowerPointCat.GetList', {
    token: loginState.token!,
    user_id: loginState.user.id,
    page: 1,
    perpage: 20,
  })
)

const selectedCat = ref<number>(0)
const pagination = reactive({
  page: 1,
  perpage: 18,
})

const { data: pptTemplates } = useAsyncData(
  'pptTemplates',
  () =>
    useFetchWrapped<
      PagedDataRequest & { type: string | number } & AuthedRequest,
      BaseResponse<PagedData<PPTTemplate>>
    >('App.Digital_PowerPoint.GetList', {
      token: loginState.token!,
      user_id: loginState.user.id,
      page: pagination.page,
      perpage: pagination.perpage,
      type: selectedCat.value === 0 ? '' : selectedCat.value,
    }),
  {
    watch: [selectedCat, pagination],
  }
)

const onDownloadClick = (ppt: PPTTemplate) => {
  const { download } = useDownload(ppt.file_url, `${ppt.title}.pptx`)
  download()
}
</script>

<template>
  <div>
    <div class="p-4 pb-0">
      <BubbleTitle
        title="PPT 模板库"
        subtitle="Slide Templates"
      />
      <GradientDivider />
    </div>
    <div class="p-4 pt-0">
      <!-- cat selector -->
      <div class="flex flex-wrap gap-2">
        <div
          v-if="pptTemplates?.data.items.length !== 0"
          v-for="cat in [
            { id: 0, type: '全部' },
            ...(pptCategories?.data.items || []),
          ]"
          @click="selectedCat = cat.id"
          :key="cat.id"
          :class="{
            'bg-primary text-white': selectedCat === cat.id,
            'bg-gray-100 text-gray-500': selectedCat !== cat.id,
          }"
          class="rounded-lg px-4 py-2 text-sm cursor-pointer"
        >
          {{ cat.type }}
        </div>
      </div>

      <div class="space-y-4">
        <div
          v-if="pptTemplates?.data.items.length === 0"
          class="w-full py-20 flex flex-col justify-center items-center gap-2"
        >
          <Icon
            class="text-7xl text-neutral-300 dark:text-neutral-700"
            name="i-tabler-photo-hexagon"
          />
          <p class="text-sm text-neutral-500 dark:text-neutral-400">
            暂时没有可用模板
          </p>
        </div>
        <div
          v-else
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
        >
          <div
            v-for="ppt in pptTemplates?.data.items"
            :key="ppt.id"
            class="relative bg-white rounded-lg shadow-md overflow-hidden"
          >
            <NuxtImg
              :src="ppt.preview_url"
              :alt="ppt.title"
              class="w-full aspect-video object-cover"
            />
            <div
              class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-gradient-to-t from-black/50 to-transparent"
            >
              <div class="space-y-0.5">
                <h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
                <p class="text-xs font-medium text-neutral-400">
                  {{ ppt.description }}
                </p>
              </div>
              <div>
                <UButton
                  label="下载"
                  size="sm"
                  color="primary"
                  icon="tabler:download"
                  @click="onDownloadClick(ppt)"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="w-full flex justify-end">
          <UPagination
            v-if="pptTemplates?.data.total > pagination.perpage"
            :total="pptTemplates?.data.total"
            :page-count="pagination.perpage"
            :max="9"
            v-model="pagination.page"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
