<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 useLoading from '@/hooks/loading';
import useProjectApi from '@/api/project';

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

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

const onQuery = () => {
  setLoading(true);
  useProjectApi
    .dynamics(props.projectKey, {
      type: 'audio',
      page: pagination.value.current,
      pageSize: pagination.value.pageSize,
      setSort: '-is_top',
    })
    .then(({ data, meta }) => {
      source.value = data as [];
      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) => setPage(page) && onQuery()"
  >
    <template #item="{ item }">
      <ListItem :key="item.id" style="padding: 4px 16px; height: 60px">
        <ListItemMeta style="height: 60px; text-align: center; overflow: hidden">
          <template #avatar>
            <Image :src="`${item.properties.cover.url}?x-oss-process=image/format,webp`" :width="60" :height="60" fit="fill" />
          </template>
          <template #title>
            <TypographyParagraph :ellipsis="{ rows: 1, showTooltip: true }" style="margin-bottom: 10px; margin-top: 10px; text-align: left">
              {{ item.intro }}
            </TypographyParagraph>
          </template>
          <template #description>
            <AudioPlayer :url="item.properties.url" style="width: 410px; height: 20px" name="" />
          </template>
        </ListItemMeta>
      </ListItem>
    </template>
  </List>
</template>

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