<template>
	<view class="approval">
		<!-- 选项卡切换 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab == index }"
				@tap="handleChange(index)">
				{{ tab }}
			</view>
		</view>
		<view class="content" v-if="processes.length!==0">
			<view class="list">
				<view class="item" v-for="(process,index) in processes" :key="index">
					<view class="top">
						<view>
							流程名称: {{process.procDefName}}
						</view>
						<view>
							当前节点: {{process.taskName}}
						</view>
						<view>
							<text v-if="currentTab==0">
								办理人: {{process.assigneeName}}
								<text class="dept">{{process.assigneeDeptName}}</text>
							</text>
							<text v-else>
								流程发起人: {{process.startUserName}}
								<text class="dept">{{process.startDeptName}}</text>
							</text>
						</view>
						<view>
							流程状态: <text
								:class="process.finishTime==null?'proceed-status':'finish-status'">{{process.finishTime==null?'进行中':'已完成'}}</text>
						</view>
						<view>
							提交时间: {{process.createTime}}
						</view>
					</view>
					<view class="bottom">
						<button class="primary" @click="toDetails(process)"
							v-show="currentTab==0||currentTab==2">详情</button>
						<button class="warn" v-if="currentTab==1" @tap="toDetails(process)">处理任务</button>
					</view>
				</view>
			</view>
			<view class="loading-more" v-if="currentPage<totalPages">
				<uni-load-more status="loading" />
			</view>
			<view class="loading-more" v-else>
				没有更多数据了~~~
			</view>
		</view>
		<view class="empty" v-else-if="processes.length==0&&topLoading==false">
			<image src="@/static/empty.png" mode="widthFix"></image>
			暂时没有数据
		</view>
		<view class="loading-more-top" v-if="topLoading">
			<uni-load-more style="padding-top: 90px;" status="loading" />
		</view>
	</view>
</template>
<script>
	import {
		myProcess,
		todoList,
		finishedList,
		stopProcess
	} from "@/api/task.js";
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中的标签索引
				tabs: ['我发起的', '待办任务', '已办任务'], // 标签列表
				processes: [],
				totalPages: 0,
				currentPage: 1,
				loading: false, // 加载状态标志
				topLoading: true,
				role: uni.getStorageSync("roles")
			};
		},
		onLoad(option) {
			if (option.tab) {
				this.currentTab = option.tab;
			}
			this.getList();
		},
		onPageScroll(e) {
			if (this.loading) {
				return;
			}
			const scrollTop = e.scrollTop;
			let windowHeight;
			if (uni.getSystemInfoSync) {
				windowHeight = uni.getSystemInfoSync().windowHeight;
			} else {
				windowHeight = window.innerHeight;
			}
			let scrollHeight;
			if (uni.getSystemInfoSync) {
				scrollHeight = windowHeight * 2;
			} else {
				scrollHeight = Math.max(
					document.body.scrollHeight,
					document.documentElement.scrollHeight,
					document.documentElement.offsetHeight
				);
			}
			if (scrollHeight - scrollTop - windowHeight <= 0) {
				if (this.currentPage == this.totalPages) {

				} else {
					this.currentPage++;
					this.getList();
				}
			}
		},
		methods: {
			//销假
			toComplete(procInsId, taskId) {
				uni.navigateTo({
					url: "/pages/applyleave/cancellationLeave?procInsId=" + procInsId + "&taskId=" + taskId
				})
			},
			// 标签切换时触发
			handleChange(index) {
				if (this.topLoading) return; // 如果正在加载数据，则不执行任何操作
				this.processes = [];
				this.currentTab = index;
				this.currentPage = 1;
				this.topLoading = true;
				this.getList();
			},
			getList() {
				this.loading = true;
				let sdata = {
					pageNum: this.currentPage,
					pageSize: 10
				};
				console.log(this.processes);
				if (this.currentTab == 0) {
					myProcess(sdata).then(res => {
						if (this.currentPage == 1) {
							this.processes = res.data.records; // 如果是第一页，直接显示新数据
						} else {
							this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
						}
						// this.processes = this.processes.concat(res.data.records);
						this.totalPages = res.data.pages;
						this.loading = false;
						this.topLoading = false;
					})
				} else if (this.currentTab == 1) {
					console.log(1);
					todoList(sdata).then(res => {
						// this.processes = res.data.records
						// this.processes = this.processes.concat(res.data.records);
						if (this.currentPage == 1) {
							this.processes = res.data.records; // 如果是第一页，直接显示新数据
						} else {
							this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
						}
						this.totalPages = res.data.pages;
						this.loading = false;
						this.topLoading = false;
					})
				} else {
					console.log(2);
					finishedList(sdata).then(res => {
						// this.processes = res.data.records;
						// this.processes = this.processes.concat(res.data.records);
						if (this.currentPage == 1) {
							this.processes = res.data.records; // 如果是第一页，直接显示新数据
						} else {
							this.processes = this.processes.concat(res.data.records); // 否则追加新数据到列表中
						}
						this.totalPages = res.data.pages;
						this.loading = false;
						this.topLoading = false;
					})
				}
			},
			cancelApply(procInsId) {
				let sdata = {
					instanceId: procInsId
				}
				uni.showModal({
					confirmText: "确定",
					cancelText: "放弃",
					confirmColor: "#aa0000",
					title: "确定取消吗?",
					success: res => {
						if (res.confirm) {
							stopProcess(sdata).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功',
										duration: 2000,
										success: res => {
											this.getList();
										}
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
						}
					}
				})

			},
			toDetails(process) {
				let query = {
					procInsId: process.procInsId,
					executionId: process.executionId,
					deployId: process.deployId,
					taskId: process.taskId,
					taskName: process.taskName,
					startUser: process.startUserName + '-' + process.startDeptName,
					category: process.category,
					tag: this.currentTab
				}
				console.log(process);
				//休学申请
				if (process.category == 'quitSchool') {
					uni.navigateTo({
						url: `/pages/Approval/handleTask/rtStuQuitSchool/detail?query=${JSON.stringify(query)}`
					})
				}
				//退学申请
				else if (process.category == 'dropOut') {
					uni.navigateTo({
						url: `/pages/Approval/handleTask/rtStuDropOutSchool/detail?query=${JSON.stringify(query)}`
					})
				} 
				// 给予退学申请
				else if (process.category == 'disqualification') {
					uni.navigateTo({
						url: `/pages/Approval/handleTask/disqualifiCationIndex/detail?query=${JSON.stringify(query)}`,
					})
				} 
				//复学申请
				else if (process.category == 'reentry') {
					console.log(this.currentTab);
					uni.navigateTo({
						url: `/pages/Approval/handleTask/rtStuReentrySchool/detail?query=${JSON.stringify(query)}`,
					})
				} 
				else if (process.category == 'leave' && process.taskName == '提交请假申请'&&this.currentTab==1) {
					console.log(this.currentTab);
					uni.navigateTo({
						url: `/pages/applyleave/editLeave?id=${process.procInsId}&type=task&taskId=${process.taskId}`,
					})
				} 
				else {
					uni.navigateTo({
						url: `/pages/details/details?query=${JSON.stringify(query)}`,
					})
				}
				// if (this.currentTab == 0 || this.currentTab == 2) {

				// } else {
				// 	if (process.category == 'quitSchool') {
				// 		uni.navigateTo({
				// 			url: `/pages/Approval/handleTask/rtStuQuitSchool/detail??query=${JSON.stringify(query)}`
				// 		})
				// 		return;
				// 	} else if (process.category == 'dropOut') {
				// 		uni.navigateTo({
				// 			url: `/pages/Approval/handleTask/rtStuDropOutSchool/detail??query=${JSON.stringify(query)}`
				// 		})
				// 		return;
				// 	}
				// 	uni.navigateTo({
				// 		url: `/pages/details/details?query=${JSON.stringify(query)}`,
				// 	})
				// }
			},
			editLeave(procInsId, taskId) {
				uni.navigateTo({
					url: "/pages/applyleave/editLeave?id=" + procInsId + "&type=task" + "&taskId=" + taskId
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.loading-more-top {
		/* #ifdef MP-WEIXIN */
		padding-top: 80px;
		/* #endif */
	}

	.approval {
		.tab-bar {
			position: fixed;
			z-index: 999;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			background-color: #ffffff;
			padding: 10px 10px;
			background-color: white;

			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 16px;
				color: #333;
				padding: 10px;

				&.active {
					color: #007aff;
					border-bottom: 2px solid #007aff;
				}
			}
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 200rpx;
			color: #9E9E9E;
			font-size: 36rpx;

			image {
				width: 250rpx;
				margin-bottom: 50rpx;
			}
		}

		.content {
			padding-top: 58px;

			.list {
				.item {
					padding: 20px 10px;
					border-bottom: 1px solid #EDEDED;

					.top {
						view {
							margin-bottom: 10px;

							.dept {
								background-color: #f4f4f5;
								padding: 3px;
								border-radius: 4px;
								color: #909399;
								margin-left: 5px;
							}

							.proceed-status {
								background-color: #1890ff;
								color: white;
								padding: 2px 3px;
								border-radius: 5px;
								margin-left: 8px;
							}

							.finish-status {
								background-color: #4CD964;
								color: white;
								padding: 2px 3px;
								border-radius: 5px;
								margin-left: 8px;
							}
						}

						view:first-child {
							font-size: 40rpx;
							color: black;
						}

						view:not(:first-child) {
							color: #555555;
							font-size: 30rpx;
						}
					}

					.bottom {
						display: flex;
						justify-content: flex-end;
						margin-top: 25px;

						button {
							margin: 0;
							background-color: transparent;
							margin-right: 10px;
							padding: 0px 10px;
							height: 32px;
							line-height: 32px;
							font-size: 28rpx;

							&.primary {
								border: 1px solid #007aff;
								color: #007aff;
							}

							&.warn {
								border: 1px solid #ff0000;
								color: #ff0000;
							}

							&.success {
								border: 1px solid #4CD964;
								color: #4CD964;
							}
						}
					}
				}
			}

			.loading-more {
				text-align: center;
				padding: 20px;
				color: #999;
			}
		}
	}
</style>