<template>
  <q-pull-to-refresh
    class="vlist-wrapper"
    ref="refreshRef"
    @refresh="refresh"
    color="red"
    bg-color="white"
  >
    <q-infinite-scroll
      ref="scrollRef"
      :disable="props.disable || disable"
      @load="loadData"
      :debounce="300"
      :offset="250"
    >
      <template v-slot:loading>
        <div class="row justify-center q-my-md">
          <q-spinner-dots color="grey" size="24px" />
        </div>
      </template>
      <slot name="prepend"></slot>
      <!-- <template v-if="!disable.value"> -->
      <!-- <q-virtual-scroll :items="props.list" separator v-slot="{ item, index }"> -->
        <!-- <q-item :key="index" dense> -->
          <template v-for="item,index in props.list" :key="index">
            <slot  :item="item" :index="index"></slot>
          </template>
        <!-- </q-item> -->
      <!-- </q-virtual-scroll> -->
      <!-- </template> -->
      <div
        class="q-pt-lg column items-center"
        v-if="error && !props.list.length"
        @click.stop="reloadData"
      >
        <!-- 第一屏数据加载失败 -->
        <img
        v-if="error.code == -1"
          src="statics/networkErrorimg.png"
          :alt="error.message"
          width="100"
        />
        <img v-else
          src="~assets/sorry.png"
          :alt="error.message"
          width="60"
        />
        <span class="text-caption text-grey q-mt-md text-center"
          >{{ error.message }}<br />
          {{ error.code ==-1 ? "点击重新加载" : "" }}</span
        >
      </div>
      <div
        v-else-if="(noMore && props.list.length) || error"
        class="row justify-center q-my-md text-caption text-grey"
      >
        <!-- 没有更多/当前页加载失败 -->
        <span v-if="error" @click="reloadData"
          >{{ error.message }}
          {{ error.code == -1 ? "，点击重新加载" : "" }}</span
        >
        <slot name="noMore" v-else>{{ props.noMore }}</slot>
      </div>
      <slot name="empty" v-else-if="noMore && !props.list.length">
        <!-- 暂无数据 -->
        <div class="text-center q-pt-lg"><img src="~assets/empty_icon.png" width="60"/></div>
        <div v-if="props.empty" class="row justify-center q-mb-md no-more">{{ props.empty }}</div>
      </slot>
      <slot name="append"></slot>
    </q-infinite-scroll>
  </q-pull-to-refresh>
</template>
<script setup>
import { onActivated, onDeactivated, ref, nextTick } from "vue";

const props = defineProps({
  disable:{
    type: Boolean
  },
  list: {
    type: [Array],
    require: true,
    default() {
      return [];
    }
  },
  load: {
    type: Function,
    require: true,
    default() {
      return Promise.resolve([]);
    }
  },
  empty: {
    type: String,
    default: '暂无数据'
  },
  noMore: {
    type: String,
    default: '没有更多了'
  }
});
const disable = ref(false);
const scrollRef = ref(null);
const refreshRef = ref(null)
onActivated(() => {
  disable.value = false;
  // scrollRef.value?.updateScrollTarget?.()
  // nextTick(()=>{
  //   refreshRef.value?.updateScrollTarget()
  // })
  // scrollRef.value && nextTick(() => {
  //   scrollRef.value.resume();
  // });
});
onDeactivated(() => {
  disable.value = true;
  // scrollRef.value && scrollRef.value.stop();
});

const noMore = ref(false);
const error = ref("");

function refresh(done) {
  noMore.value = false;
  done && done();
  if (scrollRef.value) {
    scrollRef.value.reset();
    scrollRef.value.resume();
    // scrollRef.value.poll();
    scrollRef.value.trigger();
  }
  // return loadData(0, done);
}
function reloadData() {
  if (scrollRef.value) {
    scrollRef.value.resume();
    scrollRef.value.trigger();
  }
}
function loadData(page, done) {
  error.value = "";
  if (noMore.value) {
    done && done(true);
    return;
  }
  props
    .load(page)
    .then((last) => {
      noMore.value = last;
      done && done(last);
    })
    .catch((err) => {
      error.value = {
        code: err.code,
        message: err.message
      };
      done && done(true);
    });
}

defineExpose({
  refresh,
  reload:reloadData
})
</script>
<style lang="scss">
.vlist-wrapper{width:100%;}
.no-more {
  color: #ccc;
  display: flex;
  align-items: center;
  &:before,
  &:after {
    width: 3em;
    height: 1px;
    content: "";
    background: #ccc;
    margin: 0.5em;
  }
}
</style>
