<template>
	<z-paging-x ref="pagingX" v-model="dataList" @query="queryList">
		<template #top>
			<common-tabs :list="tabList" @change="tabChange" />
		</template>
		<list-item v-for="(item, index) in dataList" :key="index">
			<view class="list-item">
				<text class="list-item-title">{{item.title}}</text>
				<text class="list-item-type">{{item.detail}}</text>
			</view>
		</list-item>
	</z-paging-x>
</template>

<script lang="uts">
	import { requestList, ListItem } from '@/http/request.uts'
	export default {
		data() {
			return {
				tabList: ['测试1','测试2','测试3','测试4'] as Array<string>,
				tabIndex: 0,
				dataList: [] as Array<ListItem>
			}
		},
		methods: {
			tabChange(index: number) {
				this.tabIndex = index;
				// 刷新列表数据
				(this.$refs['pagingX'] as ZPagingXComponentPublicInstance).reload();
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用(this.$refs['pagingX'] as ZPagingXComponentPublicInstance).reload()即可
			queryList(pageNo: number, pageSize: number) {
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex + 1
				}
				// 此处请求仅为演示，请替换为自己项目中的请求
				requestList(params).then((res: UTSJSONObject) => {
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
					(this.$refs['pagingX'] as ZPagingXComponentPublicInstance).complete(res['data'] as any[]);
				})
			}
		}
	}
</script>