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

const data_layout = ref<'grid' | 'list'>('grid')
const pagination = reactive({
  page: 1,
  pageSize: 15,
})

const {
  data: userAvatarList,
  status: userAvatarStatus,
} = useAsyncData(
  'user-digital-human',
  () => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
    'App.User_UserDigital.GetList',
    {
      token: loginState.token!,
      user_id: loginState.user.id,
      to_user_id: loginState.user.id,
      page: pagination.page,
      perpage: pagination.pageSize,
    },
  ),
  {
    watch: [pagination],
  },
)

const columns = [
  {
    key: 'avatar',
    label: '图片',
  },
  {
    key: 'name',
    label: '名称',
  },
  {
    key: 'model_id',
    label: 'ID',
  },
  {
    key: 'description',
    label: '备注',
  },
  {
    key: 'actions',
  },
]
</script>

<template>
  <LoginNeededContent>
    <div class="h-full">
      <div class="p-4 pb-0">
        <BubbleTitle title="数字讲师管理" subtitle="Avatars">
          <template #action>
            <UButton :icon="data_layout === 'grid' ? 'tabler:layout-list' : 'tabler:layout-grid'" variant="soft"
              color="gray" @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
              :label="data_layout === 'grid' ? '列表视图' : '宫格视图'" />
          </template>
        </BubbleTitle>
        <GradientDivider />
      </div>
      <div class="p-4">
        <div v-if="data_layout === 'grid'" class="grid grid-cols-7 gap-4">
          <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
            class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group">
            <NuxtImg :src="avatar.avatar" class="w-full h-full object-cover" />
            <div class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent">
              <UBadge color="white" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
            </div>
            <div
              class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity">
              <UButtonGroup>
                <UButton color="black" icon="tabler:download" label="下载图片"  @click="() => {
                  const { download } = useDownload(avatar.avatar, `数字人_${avatar.name}.png`)
                  download()
                }"/>
              </UButtonGroup>
              <span class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4">ID: {{ avatar.model_id }}</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="flex flex-col gap-4">
            <UTable :rows="userAvatarList?.data.items" :columns="columns" :loading="userAvatarStatus === 'pending'"
              :progress="{ color: 'amber', animation: 'carousel' }" class="border dark:border-neutral-800 rounded-md">
              <template #avatar-data="{ row }">
                <NuxtImg :src="row.avatar" class="h-16 aspect-[9/16] rounded-lg" />
              </template>
              <template #actions-data="{ row }">
                <div class="flex gap-2">
                  <UButton color="gray" icon="tabler:download" label="下载图片" variant="soft" size="xs" @click="() => {
                    const { download } = useDownload(row.avatar, `数字人_${row.name}.png`)
                    download()
                  }" />
                </div>
              </template>
            </UTable>
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <UPagination v-model="pagination.page" :max="9" :page-count="pagination.pageSize"
            :total="userAvatarList?.data.total || 0" />
        </div>
      </div>
    </div>
  </LoginNeededContent>
</template>

<style scoped></style>
