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

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

const {
  data: userAvatarList,
} = 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],
  },
)
</script>

<template>
  <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="ghost"
            @click="data_layout = data_layout === 'grid' ? 'list' : '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]">
          <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>
      </div>
      <div v-else>
        <div class="flex flex-col gap-4">
          <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
            class="flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
            <NuxtImg :src="avatar.avatar" class="w-16 h-16 rounded-lg" />
            <div class="flex flex-col gap-1">
              <UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
              <UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.model_id }}</UBadge>
            </div>
          </div>
        </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>
</template>

<style scoped></style>
