<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="nav">
			<view class="tab_box f-row aic jca">
				<view :class="{'active':i==currentIndex}" v-for="item,i in tabArr" :key="i" @click="change(i)">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="tasklist">
			<tasklistCom @jump="jump" :taskArr="taskArr" :currentIndex="currentIndex"></tasklistCom>
		</view>



	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import tasklistCom from '../../component/tasklistCom.vue';
	import { toast } from '../../utils';
	import {
		taskListApi,
		taskGroupListApi,
		taskHistoryListApi
	} from '@/network/api.js';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		beforeJump
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	let processDefinitionName = ''
	onLoad((options) => {
		currentIndex.value = +options.id
		processDefinitionName = options.title
	})
	onShow(() => {
		taskArr.value = []
		pageNo = 1
		pageSize = 10
		loading = false
		taskList()
	})
	const tabArr = ref([{
		text: '我的任务',
		id: 0
	}, {
		text: '组任务',
		id: 1
	}, {
		text: '历史任务',
		id: 2
	}])
	const date = ref('')
	const currentIndex = ref(0)
	let pageNo = 1
	let pageSize = 10
	let loading = false
	const taskArr = ref([])
	const taskList = () => {
		loading = true
		uni.showLoading({
			title: '加载中...'
		})
		let getlist = currentIndex.value == 0 ? taskListApi : currentIndex.value == 1 ? taskGroupListApi :
			taskHistoryListApi
		getlist({
			// createTime: date.value ? date.value + ' 00:00:00' : '',
			pageNo,
			pageSize,
			_t: new Date().getTime(),
			processDefinitionName
		}).then((res) => {
			if (res.success) {
				if (!res.result.records.length) return toast('没有更多了~')
				taskArr.value = [...taskArr.value, ...(res?.result?.records || [])]
				loading = false
			}
		}).catch((err) => {
			console.log(err);
		})
	}



	const change = (i) => {
		taskArr.value = []
		pageNo = 1
		pageSize = 10
		loading = false
		currentIndex.value = i
		taskList()
	}
	const chooseTime = () => {
		taskArr.value = []
		taskList()
	}
	onReachBottom(() => {
		if (loading) return
		pageNo++
		taskList()
	})
	onPullDownRefresh(() => {
		pageNo = 1
		pageSize = 10
		loading = false
		taskArr.value = []
		taskList()
		uni.stopPullDownRefresh()
	})
	const jump = (url) => {
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.tasklist {
		padding-top: 100rpx;
	}

	.nav {
		background-color: #fff;
		// height: 200rpx;
		height: 100rpx;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.tab_box {
			padding: 24rpx 0;

			view {
				position: relative;
				font-size: 28rpx;
				color: #666666;
			}

			.active {
				font-size: 28rpx;
				color: #01508B;

				&::after {
					position: absolute;
					width: 230rpx;
					height: 2rpx;
					background: #01508B;
					content: ' ';
					bottom: -22rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.time_box {
			padding: 20rpx 0;

			.time {
				padding: 0 30rpx;
				width: 630rpx;
				height: 72rpx;
				background: #F8F8F8;
				border-radius: 8rpx;

				image {
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
</style>