<template>
	<scroll-view
		class="table-list"
		scroll-y
		:style="{ '--height': height }"
		@scrolltolower="addNext"
		@refresherrefresh="openRefresh"
		:refresher-enabled="refresh"
		:refresher-triggered="vdata.isRefresh"
	>
		<template v-for="(record, i) in vdata.allData" :key="i">
			<slot name="tableBody" :record="record" :index="i" />
		</template>
		<view class="list-null" v-if="!vdata.apiResData.hasNext && showListNull">暂无更多数据</view>
	</scroll-view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';

// 定义传入属性
const props = defineProps({
	reqTableDataFunc: { type: Function, default: () => {} },
	searchData: { type: Object, default: () => {} }, // 搜索条件参数
	pageSize: { type: Number, default: 10 }, // 默认每页条数
	initData: { type: Boolean, default: true }, // 初始化列表数据， 默认true
	showListNull: { type: Boolean, default: true }, //是否显示缺省 默认显示
	height: { type: String, default: '88rpx' }, // 高度 这里的高度 为 外部使用高度  scroll-view  高度 为 100vh - 传入高度
	refresh: { type: Boolean, default: false } //是否开启下拉刷新 默认不开启
});

const vdata = reactive({
	allData: [], // app与web不同， app是每次查询到数据会拼接到后面

	// 接口返回的数据
	apiResData: { total: 0, records: [] },

	// 分页参数
	iPage: { pageNumber: 1, pageSize: props.pageSize },

	// 下拉刷新开启状态
	isRefresh: false
});

onMounted(() => {
	//初始化表数据
	props.initData ? refTable(true) : undefined;
});

// 查询表格数据
function refTable(isToFirst = false) {
	if (isToFirst) {
		// 重新搜索， 第一页。
		vdata.iPage.pageNumber = 1;
		vdata.allData = []; //清空数据
	}

	// 更新检索数据
	return props.reqTableDataFunc(Object.assign({}, vdata.iPage, props.searchData)).then(({ bizData }) => {
		Object.assign(vdata.apiResData, bizData); // 列表数据更新

		if (bizData.records) {
			bizData.records.forEach((r) => vdata.allData.push(r));
		}
	});
}

/** 追加下一页数据 **/
function addNext() {
	// console.log('加载下一页')
	// 包含下一页
	if (vdata.apiResData.hasNext) {
		vdata.iPage.pageNumber++;
		refTable(false);
	}
}

// 下拉刷新
const openRefresh = () => {
	vdata.isRefresh = true;
	refTable(true).then(() => {
		setTimeout(() => {
			vdata.isRefresh = false;
		}, 300);
	});
};

// 将表格事件暴露出去  https://www.jianshu.com/p/39d14c25c987
defineExpose({ refTable, addNext });
</script>

<style lang="scss" scoped>
.table-list {
	height: calc(75vh - var(--height));
}
.list-null {
	position: relative;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 70rpx;
	gap: 20rpx;
	font-size: 26rpx;
	color: #a6a6a6;
	&::after,
	&::before {
		content: '';
		display: block;
		width: 30%;
		height: 2rpx;
		background-color: #ededed;
		transform: translateY(-50%);
	}
}
</style>
