<template>
	<view v-if="vdata.dataList.length > 0">
		<view class="bind-title">{{ props.title }}</view>
		<view class="layout" >
			<scroll-view scroll-y="true" :style="{maxHeight: props.maxH}" 
			 @scrolltoupper="reset"	@scrolltolower="refresh"
			>
				<view v-for="(item, index) in vdata.dataList" :key="index">
					<slot :info="item" :index="index"></slot>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>

import { ref, reactive } from 'vue'
import { onShow , onLoad } from '@dcloudio/uni-app'

const props = defineProps({
	title: { type: String, default: '' }, 
	maxH: { type: String, default: '424rpx' }, // 最高高度
	pd: { type: String, default: '30rpx 50rpx' },
	requestFun: { type: Function, default: () => {} },
	params: { type: Object, default: () => ({}) },
	flag: { type: Boolean, default: true },
	isonshow: { type: Boolean, default: true },
	pageSize: { type: Number, default: 10 },
})

const emits = defineEmits(['reset', 'refresh'])

	const vdata = reactive({
		dataList: [], // 数据列表
	})
	
	const listParams = {} // 页面传参对象 getList方法中传的参数

	const queryObj = reactive({
		pageNumber: 1, // 默认是1
		pageSize: props.pageSize, // 默认10条，可传参修改
		isLoad: false, // 是否为上拉加载
		titlePage: '' // 总页数
	})

	const getList = (listParamObj) => {
		// 非下拉刷新才显示加载提示
		if (queryObj.isLoad) {
			uni.showLoading({ title: '加载中' })
		}

		// listParamObj 父组件在函数中携带的请求参数，与页码页数，固定参数，合并到一起，并且当该参数对象在调用时有具体值，会将页码重置为1
		let paramObj // 参数合并

		if (listParamObj) {
			queryObj.pageNumber = 1
			Object.keys(listParamObj).forEach((item) => {
				listParams[item] = listParamObj[item]
			})
			vdata.dataList = []
		}

		paramObj = Object.assign(
			{
				pageNumber: queryObj.pageNumber,
				pageSize: queryObj.pageSize
			},
			props.params,
			listParams
		)

		props.requestFun(paramObj)
			.then(({ bizData }) => {
				uni.hideLoading()

				queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize) // 页码总数

				let data = bizData.records ? bizData.records : bizData

				// 下拉刷新重置数据， 上拉加载新增数据
				if (queryObj.isLoad) {
					vdata.dataList.push(...data)
				} else {
					vdata.dataList = data
				}
			})
			.catch((err) => uni.hideLoading())
	}

	// 只在onshow时调用一次， 请求方法
	const onShowGetList = () => {
		if (!props.flag) return false
		uni.showLoading({ title: '加载中' })
		queryObj.pageNumber = 1 // 页码固定为1
		let paramObj = Object.assign(
			{
				// 合并请求参数
				pageNumber: 1,
				pageSize: queryObj.pageSize
			},
			props.params
		)

		props.requestFun(paramObj)
			.then(({ bizData }) => {
			
				uni.hideLoading()
				queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize)

				let data = bizData.records ? bizData.records : bizData

				vdata.dataList = data // 由于只在onShow 中调用一次，所以数据重新赋值
			})
	}

	onShow(() => {
		if (props.isonshow) {
			onShowGetList()
		}
	})
	onLoad(() => {
		if (!props.isonshow) {
			onShowGetList()
		}
	})

	// 下拉刷新
	const reset = () => {
		queryObj.pageNumber = 1
		queryObj.isLoad = false
		getList()
	}

	// 上拉加载
	const refresh = () => {
		queryObj.pageNumber++
		if (queryObj.pageNumber > queryObj.titlePage) {
			queryObj.pageNumber = queryObj.pageNumber
			return (queryObj.isLoad = false)
		}
		queryObj.isLoad = true
		getList()
	}

</script>
<style scoped lang="scss">
.layout {
	margin: 30rpx 50rpx;
}
.bind-title {
	margin-top: 20rpx;
	color: #fff;
	text-align: center;
}
</style>