<template>
  <component :is="props.canRefresh?'q-pull-to-refresh':'div'"
    class="vlist-wrapper"
    :disable="!props.refresh"
    @refresh="props.refresh"
    color="red"
    bg-color="white"
  >
    <div v-if="props.loading" class="absolute-full" style="background: rgba(255,255,255,.7); z-index: 1;">
      <div v-if="props.loading === true || props.loading === 'true'" class="row justify-center q-my-md">
          <q-spinner-dots color="grey" size="24px" />
        </div>
        <div
          class="q-py-lg column items-center"
          v-else-if="props.loading"
          @click.stop="props.refresh"
        >
          <!-- 第一屏数据加载失败 -->
          <img
            v-if="props.loading?.code == -1"
            src="statics/networkErrorimg.png"
            width="100"
          />
          <img
            v-else
            src="~assets/sorry.png"
            width="60"
          />
          <span class="text-caption text-grey q-mt-sm text-center ellipsis-3.-lines"
            >{{ props.loading.message || props.loading }}<br />
            {{ props.loading.code == -1 ? "点击重新加载" : "" }}</span
          >
        </div>
      </div>
      <slot v-else></slot>
  </component>
</template>
<script setup>
const props = defineProps({
  loading: [Boolean,String,Object],
  refresh: {
    type: Function
  },
  canRefresh: Boolean
})
</script>
