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

  import vue3videoPlay from 'vue3-video-play';
  import 'vue3-video-play/dist/style.css';
  import useUserApi from '@/http/user';

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

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

  const onQuery = () =>
    useUserApi
      .dynamics(props.userKey, {
        type: 'video',
        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);
      });

  onMounted(() => onQuery());

  const onClick = (item: any) =>
    createModalVNode(
      () => h(vue3videoPlay, { src: item.properties.url, controlBtns: ['volume', 'speedRate', 'pip', 'pageFullScreen', 'fullScreen'] }),
      {
        width: 'auto',
        modalStyle: { padding: '0 !important' },
        simple: true,
        footer: false,
        maskClosable: true,
        escToClose: true,
      }
    );
</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.cover.url"
          :width="120"
          :height="70"
          fit="scale-down"
          :show-loader="true"
          :preview="false"
          @click="onClick(item)"
        />
      </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>