<script setup lang="ts">
  import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
  import usePagination from '@/hooks/pagination';
  import { onMounted, ref } from 'vue';
  import useUserApi from '@/http/user';
  import { UserImageDynamics } from '@/utils/model';

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

  const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
  const source = ref<UserImageDynamics[]>([]);

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

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

<template>
  <ImagePreviewGroup>
    <Grid :cols="6" :col-gap="12" :row-gap="16">
      <GridItem v-for="item in source" :key="item.id">
        <Image :src="item.properties.url" :width="120" :height="120" fit="scale-down" :show-loader="true" />
      </GridItem>
    </Grid>
  </ImagePreviewGroup>
  <Pagination
    size="mini"
    style="justify-content: flex-end; margin-top: 10px"
    :current="pagination.current"
    :total="pagination.total"
    :page-size="pagination.pageSize"
    :hide-on-single-page="true"
    @change="(current:number) => setPage(current) && onQuery()"
  />
</template>

<style scoped lang="less"></style>