<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <WaterList :list="list">
        <template #left="{ item }">
          <Item :item="item"></Item>
        </template>
        <template #right="{ item }">
          <Item :item="item"></Item>
        </template>
      </WaterList>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref, defineProps } from "vue";
import WaterList from "@/components/WaterList.vue";
import Item from "./Item.vue";

defineProps({});

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push({
        src: `../static/images/${Math.floor(Math.random() * 3)}.jpeg`,
        text: `Item ${i + 1}`,
      });
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>

<style scoped></style>
