<template>
	<view class="tainer">
		<view class="headerImg">
			<view style="width: 686rpx;height: 60rpx;margin: 0 auto;padding-top: 44rpx;">
				<image style="width: 686rpx;height: 60rpx;" :src="ImgUrl+'StudentPayment/bg3.png'" mode='widthFix'>
				</image>
			</view>
			<view class="cardInfo">
				<view class="title">
					交费详情单
				</view>
				<!-- 	<view class="title2">
					<van-notice-bar :scrollable="ChargeProDetail.descInfo.length>20?true:false" background="#ffffff"
						color="#333333" style="padding: 0;" :text="ChargeProDetail.descInfo||''" />
				</view> -->
				<view style="position: relative;">
					<image style="width: 124rpx;height: 106rpx;position: absolute;top: -110rpx;right: 0;"
						:src="ImgUrl+'StudentPayment/yijiaona.png'" mode='widthFix'>
					</image>
				</view>
				<van-divider dashed />
				<view class="botto">
					<view class="rowInfo">
						<text class="name">订单编号：</text>
						<text class="value">{{ChargeProDetail.tradeId||""}}</text>
					</view>
					<view class="rowInfo">
						<text class="name">交纳时间：</text>
						<text class="value">{{ChargeProDetail.payTime||""}}</text>
					</view>
					<view class="rowInfo">
						<text class="name">学生姓名：</text>
						<text class="value">{{ChargeProDetail.userName||""}}</text>
					</view>
					<view class="rowInfo">
						<text class="name">年级班级：</text>
						<text class="value">{{ChargeProDetail.userGrade||""}} {{ChargeProDetail.userClass||""}}班</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收费项目 -->
		<view class="PayProject">
			<view style="padding-top: 20rpx;padding-left: 30rpx;">
				<view style="font-size: 32rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">
					{{ChargeProDetail.chargeName||""}}
				</view>
				<van-notice-bar :scrollable="ChargeProDetail.descInfo.length>20?true:false" background="#ffffff"
					color="#333333" style="padding: 0; font-family: PingFang SC;font-weight: 500;color: #999999;"
					:text="ChargeProDetail.descInfo||''" />
			</view>
			<!-- 备注 -->
			<view class="remarks" style="height: auto;">
				<text class="remarksTxt" style="font-size: 32rpx;">
					交费信息
				</text>
			</view>
			<view class="tabNames" style="background: #F8F8F8;">
				<view>
					收费子项
				</view>
				<view>
					收费类型
				</view>
				<view>
					金额（元）
				</view>
			</view>
			<!-- Project -->
			<view class="ProjectBox">
				<view class="ProjectItem" style="border: none;" v-for="(item,index) in ChargeProDetail.items"
					:key="index" v-if="!(item.itemAmount==0&&item.mustFlag==0)">
					<view class="tabNames">
						<view class="ProjectName">
							<image v-if="SPayProject(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.itemName}}</text>
						</view>
						<view class="ProjectType">
							{{['选交项目','必交项目'][item.mustFlag]}}
						</view>
						<view class="money">
							{{itemAmount(item.itemAmount)}}
						</view>
					</view>
				</view>
			</view>
			<!-- .......................... -->
			<!-- 备注 -->
			<view class="remarks" style="height: auto;">
				<text class="remarksTxt" style="font-size: 32rpx;">
					支付信息
				</text>
			</view>
			<view class="tabNames" style="background: #F8F8F8;">
				<view>
					支付方式
				</view>
				<view>
					支付单号
				</view>
				<view>
					支付金额
				</view>
			</view>
			<!-- Project -->
			<view class="ProjectBox" style="border: none;">
				<view class="ProjectItem" style="border: none;background-color: white;"
					v-for="(item,index) in ChargeProDetail.payInfos" :key="index">
					<view class="tabNames">
						<view class="ProjectName">
							<text>微信</text>
						</view>
						<view class="ProjectType"
							style=" overflow: hidden;word-break: break-all; white-space: nowrap;text-overflow: ellipsis;">
							{{item.transactionId}}
						</view>
						<view class="money">
							{{itemAmount(item.amount)}}
						</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="remarks">
					<text class="remarksTxt">
						备注
					</text>
					<view class="remarksTextarea">
						{{ChargeProDetail.notesTips||''}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 对象转拼接字符串
	 * @param {*} res   Object    需要转换的数据对象
	 */
	function OforS(res) {
		var resL = 0;
		var outS = "";
		for (var i in res) {
			if (resL == 0) {
				outS += "" + i + "=" + res[i];
			} else {
				outS += "&" + i + "=" + res[i];
			}
			resL++;
		}
		return outS;
	}
	let orderApi = window.location.origin
	// 时间处理模块
	import dayjs from 'dayjs'
	export default {
		name: "PayProjectHistoryDetails",
		data() {
			return {
				ImgUrl: this.$ImgUrl,
				payMoney: "0.00",
				// 选择收费子项目
				selectPayProject: [],
				// 选择收费子项目
				selectPayProjectObj: {},
				selectCount: 0,
				dialogShow: false,
				PaymentRsults: -1,
				allData: {},
				// 交费项目详情信息
				ChargeProDetail: {
					descInfo: ''
				},
				// 备注信息
				remarks: "",
				remarksType: ["备注", "邮箱", "手机号码", "身份证"],
				// 费用id
				chargeItemIds: []
			}
		},
		onLoad: function(options) {
			let this_ = this;
			let personalInfo = uni.getStorageSync("personalInfo")
			let PayOrderDetails = uni.getStorageSync("PayOrderDetails")
			this.allData = Object.assign(options, personalInfo, {
				chargeId: PayOrderDetails.id
			})
			this.queryChargeHistoryDetail()
		},
		onShow: function() {

		},
		computed: {
			itemAmount() {
				return function(Amount) {
					if (Amount) {
						return (Amount / 100).toFixed(2)
					} else {
						return "0.00"
					}
				}
			},
			SPayProject() {
				return function(index) {
					if (index == 0 || index > 0) {
						return this.selectPayProject.includes(index)
					} else {
						return false
					}
				}
			}
		},
		methods: {
			// 查询交费订单明细信息
			async queryChargeHistoryDetail() {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/app/charge/project/queryChargeHistoryDetail'
					}, {
						"chargeId": this.allData.chargeId,
						"schoolId": this.allData.schoolId,
						"userId": this.allData.userId
					})
					if (data.code != 200 || !data.data) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					this.ChargeProDetail = data.data;
					this.ChargeProDetail.payTime = dayjs(data.data.payTime).format("YYYY-MM-DD HH:mm:ss");
					// 收费类型必缴项目默认选择
					for (let i = 0; i < data.data.items.length; i++) {
						if (data.data.items[i].mustFlag == 1) {
							this.selectProject(data.data.items[i], i)
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 选择支付的项目
			async selectProject(data, index) {
				try {
					if (!this.selectPayProject.includes(index)) {
						this.selectPayProject.push(index)
						this.selectPayProjectObj[index + ''] = data
					} else {
						let indexOf = this.selectPayProject.indexOf(index)
						this.selectPayProject.splice(indexOf, 1)
						delete this.selectPayProjectObj[index + '']
					}
					// 计算金额
					let payMoney = 0,
						// 选择的项目数
						selectCount = 0,
						// 费用id
						chargeItemIds = [];
					for (let key in this.selectPayProjectObj) {
						selectCount++
						payMoney += this.selectPayProjectObj[key].itemAmount;
						chargeItemIds.push(this.selectPayProjectObj[key].id)
					}
					this.selectCount = selectCount;
					this.payMoney = (payMoney / 100).toFixed(2);
					this.chargeItemIds = chargeItemIds;
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
		}
	}
</script>

<style lang="scss">
	page,
	.tainer {
		background: #F3F5F6;
		height: 100vh;
	}

	.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: 646rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
	}

	.PayProject {
		height: auto;
		margin-top: 20rpx;

		.ProjectBox {
			height: auto;
			// 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 {
				width: 120rpx;
				// 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%;
			padding-left: 30rpx;
		}

		.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: 576rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 auto;
		}
	}

	.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: 646rpx;
		height: 444rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		margin: 0 auto;
		top: -32rpx;
		overflow: hidden;
		font-family: PingFang SC;

		background: linear-gradient(180deg, #E2FBF1 1%, #FFFFFF 20%);

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

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