<template>
  <!-- 这边统一设置z-paging，在页面中使用时就不用重复写 -->
  <z-paging
    ref="paging"
    v-model="list"
    fixed
    auto-show-back-to-top
    refresher-threshold="160rpx"
    @query="queryList"
    :useVirtualList="useVirtualList"
    :useInnerList="useInnerList"
    :cellKeyName="cellKeyName"
    :innerListStyle="innerListStyle"
    :preloadPage="preloadPage"
    :cellHeightMode="cellHeightMode"
    :virtualScrollFps="virtualScrollFps"
    :safe-area-inset-bottom="true"
    v-bind="options"
  >
    <template #top>
      <slot name="top"></slot>
    </template>

    <template #bottom>
      <slot name="bottom"></slot>
    </template>

    <!-- <template #empty v-if="$slots.empty">
      <slot name="empty"></slot>
    </template> -->

    <!-- 这里接收页面传进来的普通slot，如列表数据等 -->
    <slot></slot>
  </z-paging>
</template>

<script setup>
import { ref, watch } from 'vue'

const emits = defineEmits(['input', 'query', 'update:modelValue'])

const props = defineProps({
  // 用于接收父组件v-model所绑定的list的值
  value: {
    type: Array,
    default: function () {
      return []
    },
  },
  // 是否使用虚拟列表，默认为否
  useVirtualList: {
    type: Boolean,
    default: false,
  },
  // 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
  useInnerList: {
    type: Boolean,
    default: false,
  },
  // 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
  cellKeyName: {
    type: String,
    default: '',
  },
  // innerList样式
  innerListStyle: {
    type: Object,
    default: function () {
      return {}
    },
  },
  // 预加载的列表可视范围(列表高度)页数，默认为7，即预加载当前页及上下各7页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
  preloadPage: {
    type: [Number, String],
    default: 7,
  },
  // 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
  cellHeightMode: {
    type: String,
    default: 'fixed',
  },
  // 虚拟列表scroll取样帧率，默认为60，过高可能出现卡顿等问题
  virtualScrollFps: {
    type: [Number, String],
    default: 60,
  },
  // 配置项
  options: {
    type: Object,
    default: function () {
      return {}
    },
  },
})

const paging = ref(null)
let list = ref([])

watch(
  () => props.modelValue,
  (newVal) => {
    list.value = newVal
  },
)

watch(
  () => list.value,
  (newVal) => {
    emits('input', newVal)
    emits('update:modelValue', newVal)
  },
)

// 监听z-paging的@query事件，通过emit传递给页面
const queryList = (pageNo, pageSize) => {
  emits('query', pageNo, pageSize)
}

// 接收页面触发的reload方法，传给z-paging
const reload = (data) => {
  paging.value.reload(data)
}

// 接收页面触发的complete方法，传给z-paging
const complete = (data) => {
  paging.value.complete(data)
}

defineExpose({ reload, complete })
</script>

<style></style>
