<script setup lang="ts" name="PullList">
// import { showFailToast } from 'vant'
import { ref, reactive, computed, onMounted, useAttrs } from 'vue'

const emit = defineEmits<{
  load: []
  refresh: [isRefresh?: boolean]
}>()
const props = defineProps<{
  requestMethod:(query: any, flag?: boolean) => Promise<{rows: any[], total: number}>
  isFixed?: boolean
  zHeight?: string
}>()
const attrs = useAttrs()

interface QueryParams {
  pageNum: number
  pageSize: number
  [key: string]: any
}
const queryParams = defineModel<QueryParams>('queryString', { default: { pageNum: 1, pageSize: 5 } })

const list = ref<any[]>([])
const pagingRef:any = ref(null)
function queryList (pageNo, pageSize) {
  console.log('queryList')
  queryParams.value.pageNum = pageNo
  queryParams.value.pageSize = pageSize
  props.requestMethod(queryParams.value).then((res: { rows: any[], total: number }) => {
  pagingRef.value.complete(res.rows);

  }).catch((err) => {
    pagingRef.value.complete(false);
  })

}
 function refresh() {
  queryList(1, queryParams.value.pageSize)
 }


function ReLoad () {
  pagingRef.value.reload(true);
}


defineExpose({
  ReLoad,
  refresh
})
</script>

<template>
  <z-paging :fixed="props.isFixed" :paging-style="{ height: props.zHeight || '95vh' }"  ref="pagingRef" v-model="list" @query="queryList" @onRefresh="refresh">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <slot :item="item" :index="index" />
      </div>
      <template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<custom-nomore />
			</template>
      
      <template #empty>
				 <van-empty v-if="!list.length" description="暂无数据" />
			</template>
	</z-paging>

</template>

<style lang="less" scoped>
.van-pull-refresh {
  flex: 1;
  overflow: visible;
  // height: 100%;
}
:deep(.van-pull-refresh__head) {
  pointer-events: none;
}
.list-item {
  margin-top: 30rpx;
  
  &:first-child {
    margin-top: 0;

  }
}

</style>
