<template>
	<z-paging
		ref="pagingRef"
		v-model="data_list"
		@query="queryList"
		:fixed="false"
		class="scroll_div"
		:auto="false"
		empty-view-text="暂无学习任务"
	>
		<view class="scroll-Y">
			<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
		</view>
	</z-paging>
</template>

<script setup>
	import itemVue from './content-item.vue';
	import { ref, onMounted, watch, computed, nextTick } from 'vue';
	import useZpaging from '@/composables/useZpaging.js';
	import { queryAllTraTaskInfoByUserId } from '@/api/learningTasks.js';
	
	const fetchFunction = (params) => queryAllTraTaskInfoByUserId({ state: props.state, ...params });
	const {pagingRef, queryList, data_list, reload, search, total, clear } = useZpaging({
		fetchFunction,
		searchKey: 'taskName'
	});

	const props = defineProps({
		state: {
			type: String,
			required: true
		},
		tabIndex: {
			type: Number,
			default: function () {
				return 0;
			}
		},
		currentIndex: {
			type: Number,
			default: function () {
				return 0;
			}
		}
	});
	const updateData = (item) => {
		if(props.tabIndex !== 0 && item.isFinish === '02') {
			reload()
		} else{
			const index = data_list.value.findIndex((res) => res.taskId === item.taskId);
			if (index !== -1) {
				data_list.value[index] = item;
			}
		}
	};

	onMounted(() => {
		watch(
			() => props.currentIndex,
			(newVal) => {
				if (newVal === props.tabIndex && total.value === -1) {
					reload();
				}
			},
			{
				immediate: true
			}
		);
	});

	defineExpose({ reload, search, updateData });
</script>
<style scoped lang="scss">
	.scroll_div {
	}

	.scroll-Y {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 12rpx 0 22rpx;
	}
</style>
