<script setup lang="ts">
  import { Image, List, ListItem, ListItemMeta, TypographyParagraph } from '@arco-design/web-vue';
  import AudioPlayer from '@/components/audio-player/index.vue';
  import { onMounted, ref } from 'vue';
  import usePagination from '@/hooks/pagination';
  import { UserAudioDynamics } from '@/utils/model';
  import useLoading from '@/hooks/loading';
  import useUserApi from '@/http/user';

  const props = defineProps<{ userKey: number }>();

  const { loading, setLoading } = useLoading(false);
  const { pagination, setPage, setTotal } = usePagination({ pageSize: 5, size: 'mini', showPageSize: false });
  const source = ref<UserAudioDynamics[]>([]);

  const onQuery = () => {
    setLoading(true);
    useUserApi
      .dynamics(props.userKey, {
        type: 'audio',
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
        sortBy: 'is_top',
        sortType: 'desc',
      })
      .then(({ data, meta }) => {
        source.value = data as UserAudioDynamics[];
        setPage(meta.current);
        setTotal(meta.total);
      })
      .finally(() => setLoading(false));
  };

  onMounted(() => onQuery());
</script>

<template>
  <List
    :loading="loading"
    :data="source"
    :bordered="false"
    :scrollbar="true"
    :max-height="460"
    :pagination-props="pagination"
    @page-change="(page:number) => setPage(page) && onQuery()"
  >
    <template #item="{ item }">
      <ListItem :key="item.id" style="padding: 4px 16px">
        <ListItemMeta>
          <template #avatar>
            <Image :src="item.properties.cover.url" :width="60" :height="60" fit="fill" />
          </template>
          <template #title>
            <TypographyParagraph :ellipsis="{ rows: 1, showTooltip: true }" style="margin-bottom: 10px; margin-top: 10px">
              {{ item.intro }}
            </TypographyParagraph>
          </template>
          <template #description>
            <AudioPlayer :url="item.properties.url" style="width: 410px; height: 20px" />
          </template>
        </ListItemMeta>
      </ListItem>
    </template>
  </List>
</template>

<style scoped lang="less">
  :deep(.arco-list-pagination) {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
</style>