<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 class="dropdownMenu" active-color="#01CB88">
				<van-dropdown-item v-model="classId" :title="dropTitle" @change="dropItemChange1">
					<van-tree-select main-active-class="tree_father" content-active-class="tree_father" :items="items"
						@click-item="treeSelect " :active-id.sync="activeIds" :main-active-index.sync="activeIndex"
						max="1" />
				</van-dropdown-item>
				<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||''}}</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||'')+'/'+(item.userGrade||'')}}</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>
</template>

<script>
	// 时间处理模块
	import dayjs from 'dayjs'
	let orderApi = window.location.origin
	import {
		Dialog
	} from 'vant';
	export default {
		name: "PayProgressDetails",
		data() {
			return {
				searchValue: "",
				classId: '',
				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: [],
				items: [],
				activeIds: [],
				activeIndex: 0,
				dropTitle: "请选择"
			}
		},
		onLoad: function(options) {
			let personalInfo = uni.getStorageSync("personalInfo")
			this.allData = Object.assign(options, personalInfo)
			this.queryChargeUserPage(options.chargeId)
			this.queryTeacherClassList()
		},
		onReachBottom: function(e) {
			console.log("onReachBottom", e);
			this.pageCurrent = this.pageCurrent + 1
			this.queryChargeUserPage(this.allData.chargeId, this.searchValue)
		},
		methods: {
			// 查询教职工管理的年级班级列表
			async queryTeacherClassList() {
				try {

					let data = await this.$http.post({
						url: orderApi + '/order-charge/charge/group/queryTeacherClassList'
					}, {
						"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
					}
					if (data.data && Array.isArray(data.data)) {
						let tmp = data.data;
						let newArr = []
						for (let s of tmp) {
							s.text = s.groupname;
							// 导航节点额外类名
							s.className = 'my-class';
							let tmp2 = []
							for (let i = 0; i < s.classes.length; i++) {
								let s2 = s.classes[i]
								s2.text = s2.groupname;
								tmp2.push(s2)
							}
							s.children = tmp2
							newArr.push(s)
						}
						this.items = newArr
					} else {
						this.items = []
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 一键催缴
			async paymentNotice(item) {
				try {

					let data = await this.$http.post({
						url: orderApi + '/order-charge/teacher/charge/paymentNotice'
					}, {
						"chargeId": item.chargeId || '',
						"schoolId": this.allData.schoolId,
						"userId": item.userId
					})
					if (data.code != 200) {
						this.dialogShow = false;
						uni.showToast({
							icon: "none",
							mask: true,
							title: data.msg
						})
						return
					}
					await Dialog.alert({
						confirmButtonColor: "#01CB88",
						title: '系统提示',
						message: '催缴成功！',
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.showToast({
						icon: "none",
						mask: true,
						title: e.message
					})
				}
			},
			// 下拉选择年纪班级
			async treeSelect(value) {
				try {
					this.classId = value.id
					let children = this.items[this.activeIndex].children
					children = children.filter(v => {
						return this.activeIds[0] == v.id
					}).map(v => {
						return v.text
					}).join()
					this.dropTitle = this.items[this.activeIndex].groupname + "/" + children
					this.pageCurrent = 1
					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 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 {
					this.activeIds = [];
					this.activeIndex = -1;
					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;
	}

	.bottomtxt {
		// height: 21rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 90rpx;
		text-align: center;
	}

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

				.van-search__content {
					background: #FFFFFF;
					height: 90%;
				}
			}
		}
	}


	.my-class::before {
		background-color: #01CB88;
	}

	.van-tree-select__item--active {
		color: #01CB88;
	}



	.ChargeUserPageListBox {
		padding-top: 10rpx;
		width: 686rpx;
		height: 170rpx;
		margin: 0 auto;

		.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 {
			padding-left: 32rpx;
			padding-right: 32rpx;
			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 {
			padding-right: 32rpx;
			padding-left: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
</style>
