<template>
	<view class="contaner">
		<view class="queryBox">
			<view class="search">
				<van-search class="inputSearch" v-model="searchValue" show-action placeholder="请输入姓名查询"
					@search="onSearch">
					<template #action>
						<div class="SearchBtn" @click="onSearch">查询</div>
					</template>
				</van-search>
			</view>
			<van-dropdown-menu active-color="#01CB88">
				<van-dropdown-item v-model="classId" @change="dropItemChange1" :options="option1" />
				<van-dropdown-item v-model="payStatus" @change="dropItemChange2" :options="option2" />
			</van-dropdown-menu>
		</view>
		<!-- 数据列表 -->
		<view class="ChargeUserPageListBox" v-if="ChargeUserPageList.length>0">
			<view class="PageItemList" v-for="(item,index) in ChargeUserPageList" :key="index">
				<view class="hrow">
					<view class="left ">
						<text class="name">{{item.userName||'1111'}}</text>
						<text class="payStatus" v-if="item.payStatus==2"
							:style="{'background':'#FFECE6','color': '#FF3B00'}">未交纳</text>
						<text class="payStatus" v-if="item.payStatus==1"
							:style="{'background':'#E4FBF3','color': '#01CB88'}">已交纳</text>
					</view>
					<view class="right" v-if="item.payStatus==1">
						<text>实交纳：</text>
						<text class="money">{{item.amount/100||""}}</text>
					</view>
				</view>
				<view class="paymentNotice" @tap="paymentNotice(item)" v-if="item.payStatus==2&&allData.active==0">
					催交
				</view>
				<view class="class_name">
					<text>{{item.userClass||'一年级/102班'}}</text>
				</view>
			</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>
</template>

<script>
	// 时间处理模块
	import dayjs from 'dayjs'
	let orderApi = window.location.origin
	export default {
		name: "PayProgressDetails",
		data() {
			return {
				searchValue: "",
				classId: 0,
				payStatus: '',
				option1: [{
						text: '请选择',
						value: 0
					},
					{
						text: '当前教职工管理年级',
						value: 1
					},
					{
						text: '当前选择年级下的班级',
						value: 2
					},
				],
				option2: [{
						text: '请选择',
						value: ''
					},
					{
						text: '已交费',
						value: 1
					},
					{
						text: '未交费',
						value: 2
					},
				],
				ImgUrl: this.$ImgUrl,
				pageCurrent: 1,
				pageSize: 10,
				total: 0,
				// 交费项目用户分页查询
				ChargeUserPageList: [],
			}
		},
		onLoad: function(options) {
			let personalInfo = uni.getStorageSync("personalInfo")
			this.allData = Object.assign(options, personalInfo)
			this.queryChargeUserPage(options.chargeId)
		},
		onReachBottom: function(e) {
			console.log("onReachBottom", e);
			this.pageCurrent = this.pageCurrent + 1
		},
		methods: {
			// 一键催缴
			async paymentNotice(item) {
				try {

					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/paymentNotice'
					}, {
						"chargeId": item.id,
						"schoolId": this.allData.schoolId,
						"userId": this.allData.userId || this.allData.userID
					})
					if (data.code != 200) {
						this.dialogShow = false;
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 下拉选择
			async dropItemChange1(value) {
				try {
					console.warn(value)
					this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			async dropItemChange2(value) {
				try {
					console.warn(value)
					this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 搜索框
			async onSearch(value) {
				try {
					console.warn(value)
					this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 交费项目用户分页查询
			async queryChargeUserPage(chargeId, userName) {
				try {
					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/queryChargeUserPage'
					}, {
						userName,
						chargeId,
						"classId": this.classId,
						"pageCurrent": this.pageCurrent,
						"pageSize": this.pageSize,
						"payStatus": this.payStatus,
						"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.ChargeUserPageList = []
						return
					}

					if (data.data.records && Array.isArray(data.data.records)) {
						let tmp = data.data.records;
						let newArr = []
						//  [1, 2, 3, 4, 5, 6].map(v => {
						// 	return {
						// 		payStatus: parseInt(Math.random() * 2) + 1,
						// 		amount: "100",
						// 		id: 1
						// 	}
						// })
						for (let s of tmp) {
							newArr.push(s)
						}
						if (this.pageCurrent == 1) {
							this.ChargeUserPageList = newArr
							return
						}
						if (this.pageCurrent > 1) {
							this.ChargeUserPageList.push(...newArr)
							return
						}
					} else {
						this.ChargeUserPageList = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
		}
	}
</script>

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

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

		image {
			position: relative;
		}
	}

	.queryBox {
		background: #FFFFFF;
		padding-top: 12rpx;

		.search {
			width: 686rpx;
			height: 70rpx;
			background: #FFFFFF;
			border: 2rpx solid #01CB88;
			border-radius: 35rpx;
			margin: 0 auto;

			.SearchBtn {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #01CB88;
			}

			.inputSearch {
				height: 100%;
				width: 92%;
				margin: 0 auto;
				padding: 0 !important;
			}
		}
	}



	.ChargeUserPageListBox {
		padding-top: 10rpx;



		.PageItemList {
			width: 686rpx;
			height: 170rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;

			position: relative;
		}


		.paymentNotice {
			width: 118rpx;
			height: 60rpx;
			background: #01CB88;
			border-radius: 30rpx;

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

			right: 32rpx;
			bottom: 55rpx;
		}

		.hrow {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				height: 100rpx;

				.name {
					font-size: 42rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.payStatus {
				width: 94rpx;
				height: 34rpx;
				border-radius: 8rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;

				margin-left: 20rpx;


			}

			.right {
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				align-items: center;
			}

			.right text:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

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

		}

		.class_name {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
</style>
