<template>
	<view class="tainer">
		<van-dialog v-model="dialogShow" @closed="dialogClosed" :show-confirm-button="false"
			:closeOnClickOverlay="true">
			<view class="PaymentRsults">
				<image v-if="PaymentRsults==1" style="width: 160rpx;height: 160rpx;" mode='widthFix'
					:src="ImgUrl+'StudentPayment/success-icon.png'">
				</image>
				<image v-if="PaymentRsults==2" style="width: 160rpx;height: 160rpx;" mode='widthFix'
					:src="ImgUrl+'StudentPayment/fail-icon.png'">
				</image>
				<view class="PaymentRsultsTxt" @click="dialogClosed" v-if="PaymentRsults==1">
					支付成功
				</view>
				<view class="PaymentRsultsTxt" @click="clickPay" v-if="PaymentRsults==2">
					请重新支付
				</view>
			</view>
		</van-dialog>
		<view class="headerImg">
			<view class="cardInfo">
				<view class="title">
					2022高一春季开学费用
				</view>
				<view class="title2">
					该收费项目主要收取学校的开学学费，根据需要自行选择
					及备注。
				</view>
				<van-divider style="margin-top: 50rpx;" />
				<view class="botto">
					<view class="rowInfo">
						<text class="name">学生姓名：</text>
						<text class="value">张三</text>
					</view>
					<view class="rowInfo">
						<text class="name">年级班级：</text>
						<text class="value">三年级 101班</text>
					</view>
					<view class="rowInfo">
						<text class="name">订单编号：</text>
						<text class="value">2022022800001</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 收费项目 -->
		<view class="PayProject">
			<view class="tabNames">
				<view style="padding-left: 70rpx;">
					收费子项
				</view>
				<view style="padding-left: 70rpx;">
					收费类型
				</view>
				<view style="padding-left: 70rpx;">
					金额（元）
				</view>
			</view>
			<!-- Project -->
			<view class="ProjectBox">
				<view class="ProjectItem" v-for="(item,index) in PayProjectList" :key="index"
					:class="selectPayProject == index?'selectProjectItem':''">
					<view class="tabNames" @click="selectProject(index)">
						<view class="ProjectName">
							<image v-if="selectPayProject==index" style="width: 32rpx;height: 32rpx;"
								:src="ImgUrl+'StudentPayment/gx.png'" mode='widthFix'></image>
							<image v-else style="width: 32rpx;height: 32rpx;" :src="ImgUrl+'StudentPayment/wgx.png'"
								mode='widthFix'></image>
							<text>{{item.name}}</text>
						</view>
						<view class="ProjectType">
							{{item.type}}
						</view>
						<view class="money">
							{{item.money}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 备注 -->
		<view class="remarks">
			<text class="remarksTxt">
				备注
			</text>
			<textarea value="" placeholder="请输入身份证号" :cursor="10" placeholder-class="remarksTextarea" :maxlength="40"
				:auto-height="true" />
		</view>
		<!-- 底部操作按钮 -->
		<view class="bottomOper">
			<view class="buttonContent">
				<view class="left">
					<view class="">
						<text class="zongji">总计：</text>
						<text class="money">
							{{payMoney}}
						</text>
					</view>
					<view class="xieyi">
						<text>点击交费，即表示我已阅读</text>
						<text>《线上缴纳协议》</text>
					</view>
				</view>
				<view class="right" @click="clickPay">
					点击交费
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PayOrderDetails",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				PayProjectList: [{
					name: "春季开学费用",
					type: "必缴项目",
					money: "10.00"
				}, {
					name: "高一春季开...",
					type: "选缴项目",
					money: "100.00"
				}, {
					name: "高一春季开...",
					type: "选缴项目",
					money: "1.00"
				}],
				payMoney: "100.00",
				selectPayProject: 0,
				dialogShow: false,
				PaymentRsults: 1
			}
		},
		onLoad: function(options) {
			let this_ = this;
			uni.showLoading({
				mask: true,
				title: "查询支付结果"
			})
			setTimeout(function() {
				uni.hideLoading()
				this_.dialogShow = true
			}, 1000)
		},
		methods: {
			// 支付结果页面关闭
			async dialogClosed() {
				try {
					console.log("dialogClosed");
					this.dialogShow = false
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 选择支付的项目
			async selectProject(index) {
				try {
					console.log(index)
					this.selectPayProject = index
					return
					if (!this.selectPayProject[index + '']) {
						this.selectPayProject[index + ''] = index
					} else {
						this.selectPayProject[index + ''] = ''
					}
					console.log(this.selectPayProject);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 点击缴费
			async clickPay() {
				try {
					console.log("clickPay", "点击缴费");
					this.dialogClosed()
					uni.showLoading({
						mask: true,
						title: "缴费中..."
					})
					await new Promise((res, rjt) => {
						setTimeout(function() {
							res()
						}, 3000)
					})
					this.PaymentRsults = 2
					this.dialogShow = true
					uni.hideLoading()

				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			}
		}
	}
</script>

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

	.PaymentRsults {
		width: 580rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		text-align: center;
		text-align: center;
		margin: 0 auto;
		font-family: PingFang SC;

		image {
			top: 115rpx;
		}

		.PaymentRsultsTxt {
			height: 34rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin: 0 auto;
			margin-top: 115rpx;
		}
	}

	.PayProject,
	.remarks {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
	}

	.PayProject {
		height: 460rpx;
		margin-top: 192rpx;

		.ProjectBox {
			height: 350rpx;
			overflow: auto;

			.tabNames {
				justify-content: flex-start;
				height: 100%;
			}

			.ProjectItem {
				width: 628rpx;
				height: 100rpx;
				margin: 0 auto;
				border: 2rpx solid #E6E6E6;
				border-radius: 16rpx;
				margin-top: 19rpx;
			}

			.selectProjectItem {
				border: 2rpx solid #01CB88 !important;
				background-color: rgba(1, 203, 136, 0.1);
			}

			.ProjectName {
				margin-left: 25rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				image {
					display: inline-block;
				}

				text {
					display: inline-block;
					width: 176rpx;
					overflow: hidden;
					word-break: break-all;
					margin-left: 16rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.ProjectName,
			.ProjectType {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.ProjectType {
				margin-left: 40rpx;
			}

			.money {
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				color: #01CB88;
				width: 32%;
				text-align: right;
			}

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

		}

		.tabNames {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			justify-content: space-around;
			display: flex;
			align-items: center;

			height: 87rpx;
			line-height: 87rpx;
		}
	}

	.remarks {
		height: 220rpx;
		margin-top: 20rpx;

		textarea {
			width: 100%;
			height: 100%;
		}

		.remarksTxt {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 66rpx;
			position: relative;
		}

		.remarksTxt:before {
			content: " ";
			width: 25rpx;
			height: 25rpx;
			background: #01CB88;
			border-radius: 50%;
			position: absolute;
			z-index: 100;
			top: 10rpx;
			left: -40rpx;
		}

		.remarksTxt:after {
			content: " ";
			width: 25rpx;
			height: 25rpx;
			background: #FFB62D;
			border-radius: 50%;
			position: absolute;
			z-index: 99;
			left: -32rpx;
			top: 10rpx;
		}


		.remarksTextarea {
			width: 222rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #CCCCCC;
			padding-left: 30rpx;
		}
	}

	.bottomOper {
		position: fixed;
		height: 128rpx;
		background: #FFFFFF;
		width: 100%;
		bottom: 68rpx;
		left: 0;
		right: 0;


		.buttonContent {
			display: flex;
			align-items: center;
			height: 100%;
			justify-content: space-around;
			width: 689rpx;
			margin: 0 auto;

			.left {
				.zongji {
					width: 65rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.money {
					width: 125rpx;
					font-size: 36rpx;
					font-family: DIN;
					font-weight: bold;
					color: #01CB88;
					line-height: 36rpx;
				}

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

				.xieyi {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.xieyi text:nth-child(1) {
					color: #999999;
				}

				.xieyi text:nth-child(2) {
					color: #01CB88;
				}



			}

			.right {
				width: 240rpx;
				height: 72rpx;
				background: rgba(1, 203, 136, 1);
				border-radius: 36rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;

				// margin-right: 32rpx;


			}

		}
	}

	.headerImg {
		width: 750rpx;
		height: 480rpx;
		background-image: url(https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/StudentPayment/bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.cardInfo {
		width: 686rpx;
		height: 444rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		margin: 0 auto;
		top: 206rpx;
		overflow: hidden;
		font-family: PingFang SC;

		.title {
			width: 370rpx;
			height: 34rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #333333;
			margin: 0 auto;
			margin-top: 52rpx;
		}

		.title2 {
			width: 599rpx;
			height: 55rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			margin: 0 auto;
			text-align: center;
			margin-top: 24rpx;
		}

		.botto {
			.rowInfo {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				margin-left: 30rpx;
				line-height: 60rpx;
			}

			.name {
				width: 128rpx;
				color: #999999;
			}

			.value {
				width: 58rpx;
				color: #333333;
			}
		}
	}


	.cardInfo:before,
	.cardInfo:after {
		content: " ";
		width: 100%;
		height: 0px;
		position: absolute;
	}

	.cardInfo:before {
		border-top: 16rpx dotted #01CB88;
		left: 16rpx;
		top: -6rpx;

	}
</style>
