<template>
	<view class="tainer">
		<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="PayProjectList.length>0">
						<view class="container ProjectList" v-for="(item,index) in PayProjectList" :key="index"
							@tap="PayOrderDetails(item)">
							<view class="listitem top">
								<view class="title">
									{{item.chargeName}}
								</view>
								<view class="money">
									{{item.amountMust}}
								</view>
							</view>
							<view class="listitem center">
								<text class="describe">
									{{item.descInfo||""}}
								</text>
							</view>
							<view class="listitem botto" style="align-items: baseline;">
								<van-icon name="clock-o" /> <text class="Tips">{{item.diffTime}}收费结束</text>
							</view>
						</view>
						<view class="bottomtxt">已经到底啦~</view>
					</view>
					<!-- 没有数据 -->
					<view class="noData" v-else>
						<image style="width: 301rpx;height: 258rpx;" :src="ImgUrl+'StudentPayment/NoRecord.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="PayProjectHistory.length>0">
						<view class="container ProjectHistory" v-for="(item,index) in PayProjectHistory" :key="index"
							@tap="PayOrderDetails(item)">
							<view class="listitem top">
								<view class="title">
									2022高一春季收费
								</view>
								<view class="money">
									100.00
								</view>
							</view>
							<view class="listitem center">
								<text class="describe">
									本次收费需要收取高一春季开学相关费用，并根据
									备注输入相关信息。
								</text>
							</view>
							<view class="listitem botto" style="align-items: baseline;">
								<van-icon name="clock-o" /> <text class="Tips">5天后收费结束</text>
							</view>
						</view>
						<view class="bottomtxt">已经到底啦~</view>
					</view>
					<!-- 没有数据 -->
					<view class="noData" v-else>
						<image style="width: 290rpx;height: 242rpx;" :src="ImgUrl+'StudentPayment/development.png'"
							mode='widthFix'></image>
						<view>程序员正在玩命开发</view>
						<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: "PayProject",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				active: 0,
				vanTab: ['收费项目', '交费历史'],
				PayProjectList: [],
				PayProjectHistory: [],
				pageCurrent: 1,
				pageSize: 10,
				total: 0,
				allData: {}
			}
		},
		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.getPayProject()
		},
		onPullDownRefresh: function(e) {
			console.log("onPullDownRefresh", e);
		},
		onReachBottom: function(e) {
			console.log("onReachBottom", e);
			this.pageCurrent = this.pageCurrent + 1
			this.getPayProject()
		},
		methods: {
			// 切换tab
			async PayProjectTab(index) {
				try {
					if (index > 0) {
						return
					}
					this.getPayProject(index)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 交费项目信息分页查询
			async getPayProject(index) {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/app/charge/project/queryChargeProjectPage'
					}, {
						"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.PayProjectList = []
						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 + ' 天后'
							}
							s.amountMust = (s.amountMust / 100).toFixed(2)
							newArr.push(s)
						}
						if (this.pageCurrent == 1) {
							this.PayProjectList = newArr
							return
						}
						if (this.pageCurrent > 1) {
							this.PayProjectList.push(...newArr)
							return
						}
					} else {
						this.PayProjectList = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 收费项目详情
			async PayOrderDetails(data) {
				try {
					console.log(data);
					uni.setStorageSync("PayOrderDetails", data)
					uni.navigateTo({
						url: "../PayOrderDetails/PayOrderDetails?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;


		}
	}

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

		.container {
			width: 686rpx;
			height: 250rpx;
			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;

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

		.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>
