<script setup lang="ts">
import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import useProjectApi from '@/api/project';

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

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

const onQuery = () =>
  useProjectApi
    .dynamics(props.projectKey, {
      type: 'image',
      page: pagination.value.current,
      pageSize: pagination.value.pageSize,
      setSort: '-is_top',
    })
    .then(({ data, meta }) => {
      source.value = data as [];
      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}?x-oss-process=image/format,webp`"
          :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>