<template>
  <Nav title="全部专栏"> </Nav>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      v-model:error="loadError"
      :finished="finished"
      error-text="加载错误，请点击重新加载"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list-wrap">
        <ColumnItem v-for="(item, index) in list" :key="index" :item="item" />
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref } from "vue";
import Nav from "@/components/NavBar.vue";
import ColumnItem from "@/components/ColumnItem.vue";
import { queryColumnList } from "@/api/index";
const list = ref([]);
const loading = ref(false);
const loadError = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const current = ref(1);

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

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const onLoad = async () => {
  // 异步更新数据
  let ret = await queryColumnList({
    type: 2,
    size: 10,
    current: current.value,
  });
  if (ret.code === 0) {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    current.value++;
    list.value = list.value.concat(ret.data);
    finished.value = !ret.data.hasNext;
  } else {
    loadError.value = true
  }
  loading.value = false;
};
</script>
<style scoped lang="scss">
.van-pull-refresh {
  min-height: 100%;
}
::v-deep .van-list {
  background: #f5f6f7;
  .van-list__finished-text,
  .van-loading {
    background: #fff;
  }
}
.list-wrap {
  padding: 0 32px 0 40px;
  border-radius: 16px 16px 0 0;
  background: #fff;
}
</style>
