<template>
	<view class="tainer">
		<van-dialog v-model="dialogShow" :show-confirm-button="false" :show-cancel-button="false"
			:closeOnClickOverlay="true">
			<view class="OneExpeditingBox">
				<image style="width: 88rpx;height: 88rpx;" mode='widthFix' :src="ImgUrl+'StudentPayment/Tips.png'">
				</image>
				<view class="title1">
					是否发送信息
				</view>
				<view class="title2">
					给未交纳费用的家长发送信息，提醒其
					交纳费用？
				</view>
				<view class="" style="background: #E6E6E6;height: 1rpx;	margin-top: 30rpx;">
				</view>
				<view class="dialogBtnGrou">
					<view class="cancelBtn" @click="dialogShow=false">
						取消
					</view>
					<view class="" style="background: #E6E6E6;width: 1rpx;">
					</view>
					<view class="confirmBtn" @click="OneExpediting(OneExpeditingData)">
						确认
					</view>
				</view>
			</view>
		</van-dialog>
		<van-tabs ref="tabs" title-inactive-color="#999999" title-active-color="#333333" sticky animated
			v-model:active="active" swipeable color="#01CB88" background="#FFFFFF" line-width="30px" line-height="4px"
			@change="PayProjectTab">
			<van-tab :title="vanTab[0]" title-class="PayProjectTab PayProjectList">
				<!-- 收费项目 -->
				<view class="ListBox">
					<view class="" v-if="ChargePaymentPageList.length>0">
						<view class="container ProjectList" v-for="(item,index) in ChargePaymentPageList" :key="index">
							<view class="listitem top" @tap="PayProgressDetails(item)">
								<view class="title">
									{{item.chargeName}}
								</view>
							</view>
							<view class="hairline"
								style="width: 620rpx;height: 1rpx;background-color: #E6E6E6;margin: 0 auto;margin-top: 28rpx;">
							</view>
							<view class="contentTxt" @tap="PayProgressDetails(item)">
								<view class="left">
									<text>未交纳人数：</text>
									<text>{{item.nopayNum}}</text>
								</view>
								<view class="right">
									<text>已交纳人数：</text>
									<text>{{item.paiedNum}}</text>
								</view>
							</view>
							<view class="listitem botto" style="align-items: baseline;">
								<van-icon name="clock-o" /> <text class="Tips"
									@tap="PayProgressDetails(item)">{{item.diffTime}}收费结束</text>
								<view class="OneExpediting" v-if="item.nopayNum>0" @click="OneExpeditingPop(item)">
									一键催交
								</view>
							</view>
						</view>
						<view class="bottomtxt">已经到底啦~</view>
					</view>
					<!-- 没有数据 -->
					<view class="noData" v-else>
						<image style="width: 474rpx;height: 235rpx;" :src="ImgUrl+'xzf/noData-06.png'"
							mode='widthFix'></image>
						<view>暂无数据</view>
					</view>
				</view>
			</van-tab>
			<van-tab :title="vanTab[1]" title-class="PayProjectTab PayProjectHistory">
				<!-- 缴费历史 -->
				<view class="ListBox">
					<view class="" v-if="ChargeEndPageList.length>0">
						<view class="container ProjectHistory" v-for="(item,index) in ChargeEndPageList" :key="index"
							@tap="PayProgressDetails(item)">
							<view class="listitem top">
								<view class="title">
									{{item.chargeName}}
								</view>
							</view>
							<view class="hairline"
								style="width: 620rpx;height: 1rpx;background-color: #E6E6E6;margin: 0 auto;margin-top: 28rpx;">
							</view>
							<view class="contentTxt">
								<view class="left">
									<text>未交纳人数：</text>
									<text>{{item.nopayNum}}</text>
								</view>
								<view class="right">
									<text>已交纳人数：</text>
									<text>{{item.paiedNum}}</text>
								</view>
							</view>
						</view>
						<view class="bottomtxt">已经到底啦~</view>
					</view>
					<!-- 没有数据 -->
					<view class="noData" v-else>
						<image style="width: 474rpx;height: 235rpx;" :src="ImgUrl+'xzf/noData-06.png'"
							mode='widthFix'></image>
						<view class="bottomtxt">暂无数据</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	// 时间处理模块
	import dayjs from 'dayjs'
	let orderApi = window.location.origin
	export default {
		name: "PayProgress",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				active: 0,
				vanTab: ['交费中', '已结束'],
				ChargePaymentPageList: [],
				ChargeEndPageList: [],
				pageCurrent: 1,
				pageSize: 10,
				total: 0,
				allData: {},
				// 弹框
				dialogShow: false,
				// 一键催缴的数据
				OneExpeditingData: {}
			}
		},
		onLoad: function(options) {
			console.log("PayProject", options);
			if (options.seesionID && options.userID && options.schoolId) {
				uni.setStorageSync("personalInfo", {
					userId: options.userID || '',
					seesionID: options.seesionID || '',
					schoolId: options.schoolId || '',
					openId: options.openId
				})
				this.allData = options
			} else {
				let personalInfo = uni.getStorageSync("personalInfo")
				this.allData = Object.assign(options, personalInfo)
			}
			this.queryChargePaymentPage()
		},
		onPullDownRefresh: function(e) {
			console.log("onPullDownRefresh", e);
		},
		onReachBottom: function(e) {
			console.log("onReachBottom", e);
			this.pageCurrent = this.pageCurrent + 1
			if (this.active == 0) {
				this.queryChargePaymentPage()
				return
			}
			this.queryChargeEndPage()
		},
		methods: {
			// 一键催缴弹框
			async OneExpeditingPop(ItemData) {
				try {
					this.dialogShow = true;
					this.OneExpeditingData = ItemData
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 一键催缴
			async OneExpediting() {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/paymentNoticeAll'
					}, {
						"chargeId": this.OneExpeditingData ? this.OneExpeditingData.id : '',
						"schoolId": this.allData.schoolId,
					})
					if (data.code != 200) {
						this.dialogShow = false;
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.dialogShow = false;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 切换tab
			async PayProjectTab(index) {
				try {
					this.pageCurrent = 1
					if (index > 0) {
						this.queryChargeEndPage(index)
						return
					}
					this.queryChargePaymentPage(index)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 交费中项目信息分页查询
			async queryChargePaymentPage(index) {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/queryChargePaymentPage'
					}, {
						"pageCurrent": this.pageCurrent,
						"pageSize": this.pageSize,
						"schoolId": this.allData.schoolId,
						"userId": this.allData.userId || this.allData.userID
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						this.ChargePaymentPageList = []
						return
					}

					if (data.data.records && Array.isArray(data.data.records)) {
						let tmp = data.data.records;
						let newArr = []
						for (let s of tmp) {
							let diffTime = dayjs(s.endTime).diff(new Date(), 'hour');
							if (diffTime > 24) {
								diffTime = dayjs(s.endTime).diff(new Date(), 'day');
								s.diffTime = diffTime + ' 天后'
							} else {
								s.diffTime = 1 + ' 天后'
							}
							newArr.push(s)
						}
						if (this.pageCurrent == 1) {
							this.ChargePaymentPageList = newArr
							return
						}
						if (this.pageCurrent > 1) {
							this.ChargePaymentPageList.push(...newArr)
							return
						}
					} else {
						this.ChargePaymentPageList = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 交费项目已结束信息分页查询
			async queryChargeEndPage(index) {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/queryChargeEndPage'
					}, {
						"pageCurrent": this.pageCurrent,
						"pageSize": this.pageSize,
						"schoolId": this.allData.schoolId,
						"userId": this.allData.userId || this.allData.userID
					})
					if (data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						this.ChargeEndPageList = []
						return
					}

					if (data.data.records && Array.isArray(data.data.records)) {
						let tmp = data.data.records;
						let newArr = []
						for (let s of tmp) {
							newArr.push(s)
						}
						if (this.pageCurrent == 1) {
							this.ChargeEndPageList = newArr
							return
						}
						if (this.pageCurrent > 1) {
							this.ChargeEndPageList.push(...newArr)
							return
						}
					} else {
						this.ChargeEndPageList = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 收费项目详情
			async PayProgressDetails(data) {
				try {
					console.log(data);
					uni.setStorageSync("PayProgressDetails", data)
					uni.navigateTo({
						url: `../PayProgressDetails/PayProgressDetails?active=${this.active}&chargeId=${data.id ||''}`
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F5F6;
	}

	.noData {
		text-align: center;
		margin-top: 316rpx;

		image {
			position: relative;


		}
	}

	.tainer {
		.OneExpeditingBox {
			text-align: center;
			margin-top: 50rpx;
		}

		.title1 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
		}

		.title2 {
			width: 440rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.dialogBtnGrou {

			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: space-around;

			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;

			.cancelBtn {
				width: 100%;
				color: #999999;
			}

			.confirmBtn {
				width: 100%;
				color: #01CB88;
			}
		}
	}

	.ListBox {
		width: 750rpx;
		min-height: 100%;
		background: #F3F5F6;
		padding-top: 12rpx;
		padding-bottom: 100rpx;

		.container {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
		}

		.container {
			font-family: PingFang SC;

			.top {
				.title {
					width: 266rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					line-height: 36rpx;
					padding-left: 31rpx;
					padding-top: 30rpx;

					word-break: break-all;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.money {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #01CB88;
					line-height: 36rpx;
					padding-left: 230rpx;
					padding-top: 30rpx;
				}

				.money::before {
					content: "￥";
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #01CB88;
				}
			}

			.center {
				.describe {
					width: 614rpx;
					height: 63rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					line-height: 36rpx;
					padding-top: 38rpx;
					padding-left: 32rpx;
					overflow-y: auto;
				}
			}

			.botto {
				// padding-top: 30rpx;
				padding-left: 32rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #BABABA;
				height: 95rpx;

				.Tips {
					padding-left: 10rpx;
				}
			}

			.contentTxt {
				width: 620rpx;
				margin: 0 auto;
				display: flex;
				flex-direction: row;

				height: 100rpx;
				line-height: 100rpx;


				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

				.left,
				.right {
					display: flex;
					align-items: center;
				}

				.left text:nth-child(2) {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: 500;
					color: #FF3B00;
				}

				.right {
					padding-left: 79rpx;
				}

				.right text:nth-child(2) {
					font-size: 36rpx;
					font-family: DIN;
					font-weight: 500;
					color: #333333;
				}




			}


			.OneExpediting {
				width: 176rpx;
				height: 60rpx;
				background: #01CB88;
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;


				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;

				position: relative;
				left: 250rpx;
			}
		}

		.ProjectHistory {}

		.listitem {
			display: flex;
			align-items: center;
		}

		.bottomtxt {
			height: 21rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 90rpx;
			text-align: center;
		}

	}

	.van-tabs__content {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		z-index: 999;
		overflow: scroll
	}

	.van-tabs {
		.PayProjectTab {
			height: 200rpx;
		}

	}
</style>
