<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">
									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: 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>
	export default {
		name: "PayProject",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				active: 0,
				vanTab: ['收费项目', '交费历史'],
				PayProjectList: [1, 2, 3],
				PayProjectHistory: [1, 2, 3]
			}
		},
		onLoad: function(options) {
			console.log("PayProject");
		},
		onPullDownRefresh: function(e) {
			console.log("onPullDownRefresh", e);
		},
		onReachBottom: function(e) {
			console.log("onReachBottom", e);
			this.PayProjectList.push(Array(7).fill(1))
		},
		methods: {
			// 切换tab
			async PayProjectTab(index) {
				try {
					console.log(index);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 获取收费项目
			async getPayProject(index) {
				try {
					console.log(index);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 收费项目详情
			async PayOrderDetails(data) {
				try {
					console.log(data);
					uni.setStorageSync("PayOrderDetails", data)
					uni.navigateTo({
						url: "../PayOrderDetails/PayOrderDetails"
					})
				} 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 {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					line-height: 36rpx;
					padding-left: 31rpx;
					padding-top: 30rpx;
				}

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

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