<template>
  <nav-bar
    title="精彩活动"
    :style="{ background: '#0081F7 !important', color: 'white' }"
    iconColor="white"
  />
  <div class="-mt-5">
    <img src="../../assets/img/activity_bg.png" class="w-full" />
  </div>
  <!-- 活动列表 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    @load="onLoad"
  >
    <div class="px-5">
      <div class="mt-2" v-if="skeLoading"></div>
      <Skeleton :loading="skeLoading" :row="3">
        <card
          v-for="activity in activityList"
          :update_at="activity.update_at"
          :file_name="activity.file_name"
          :key="activity.id"
          @click="
            $router.push({
              name: 'ActivityDetail',
              params: { uuid: activity.uuid },
            })
          "
        />
      </Skeleton>
    </div>
  </van-list>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import Card from "./components/activityCard/index.vue";
import { queryActivityList } from "@/service/ActivityService";
import { ActivityItem } from "@/service/ActivityService/type";

onMounted(() => {
  fetchList();
});

const current = ref(1);
const LIST_SIZE = 4;
const offset = ref(0);
const loading = ref(false);
const finished = ref(false);
const total = ref(0);
const activityList: Ref<ActivityItem[]> = ref([]);
const skeLoading = ref(false);

const onLoad = () => {
  current.value++;
  offset.value = (current.value - 1) * LIST_SIZE;
  if (offset.value >= total.value) {
    finished.value = true;
    return;
  } else {
    finished.value = false;
    fetchList();
  }
};

const fetchList = () => {
  skeLoading.value = true;
  queryActivityList({ limit: 4, offset: offset.value }).then((ret) => {
    if (ret.code === 200) {
      skeLoading.value = false;
      total.value = ret.data.total;
      activityList.value = activityList.value.concat(ret.data.items);
      loading.value = false;
    }
  });
};
</script>

<style scoped>
.title {
  font-size: 18px;
}
</style>
