<template>
	<view class="">
		<public-module></public-module>
		<u-sticky h5-nav-height="0">
			<view class="headers dis a-c j-start">
				<u-icon name="arrow-left" color="#333" size="38" @click="back"></u-icon>
				<text style="margin: auto;">未转入记录</text>
			</view>
			<view class="performance dis f-c ">
				<text>共有 {{total}}元未转入</text>
				<text>您的每一个等级收益需要手动转入钱包中，才可以将收益提现</text>
			</view>
		</u-sticky>
		<!-- 列表数据 -->
		<view class="content">
			<view class="item dis a-c j-s" v-for="(item,index) in transferRecords" :key="index" @click="Records(item)">
				<text>{{item.gradeName}}</text>
				<text class="font-weight">{{item.cashFee}}</text>
				<u-icon class="ml-1" name="arrow-right" color="#999" size="22"></u-icon>
			</view>
		</view>
		<u-loadmore v-if="userlist.length!=0" :status="status" />
		<!-- 钱包转入 -->
		<u-popup v-model="roleCommInShow" mode="center" border-radius="10">
			<view class=" roleCommInClass dis f-c a-c">
				<text class="title font-weight mt-3">佣金转入钱包</text>
				<view class="dis f-c p-3 content">
					<text>您的每一个等级收益需要手动转入钱包中，才可以将收益提现</text>
					<view class="mt-1 ">
						<text>{{Recordsitem.cashFee}}元</text>
						<text class="ml-2" style="color: #2D6DFF;" @click="transferAll">全部转入</text>
					</view>
					<u-input v-model="amount" class="mt-1" type="digit" :border="true" placeholder="输入转入金额" focus />
				</view>

			</view>
			<view class="roleCommInClass-footer dis a-c j-s ">
				<view class="dis a-c j-c" @click="roleCommInShow=false">取消</view>
				<view class="dis a-c j-c" @click="roleCommInconfirm">确认</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import myDatePicker from '../components/todaydate-picker.vue';
	export default {
		components: {
			myDatePicker
		},
		data() {
			return {
				amount: null, //转入佣金
				roleCommInShow: false,
				tablist: [],
				total: "",
				referrerInfo: {}, //个人信息
				userlist: [],
				pageQuery: {
					endTime: "",
					startTime: "",
					grade: "",
					gradeName: "",
					appStatus: '',
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				totalPages: 0,
				parentStatus: "",
				transferRecords: [],
				Recordsitem: {},
				statusFilterShow: false,
				quickOptions: [{
						label: "全部",
						value: null,
					},
					{
						label: "正常",
						value: "0",
					},
					{
						label: "已冻结",
						value: "1",
					},
					{
						label: "已失效",
						value: "2",
					}
				],
			}
		},
		onReachBottom() {
			// if (this.pageQuery.pageNum >= this.totalPages) return;
			// this.status = 'loading';
			// this.pageQuery.pageNum = ++this.pageQuery.pageNum;
			// setTimeout(async () => {
			// 	let res = await this.$http.post('/newAppPartner/selectByIdList', this.pageQuery);
			// 	if (res.code == '200') {
			// 		this.userlist = [...this.userlist, ...res.data.list.records];

			// 	}
			// 	if (this.pageQuery.pageNum >= this.totalPages) this.status = 'nomore';
			// 	else this.status = 'loading';
			// }, 1000)
		},
		onLoad(options) {
			this.pageQuery.grade = options.grade;
			this.querydata();
		},
		computed: {

		},
		methods: {
			Records(item) {
				this.Recordsitem = item;
				this.roleCommInShow = true;
			},
			//全部转入
			transferAll() {
				this.amount = this.Recordsitem.cashFee;
			},
			//角色佣金转入
			async roleCommInconfirm() {
				if (Number(this.amount) > this.Recordsitem.cashFee) {
					return uni.showToast({
						title: '转入金额不能大于可转入金额',
						icon: 'none',
					});
				}
				if (Number(this.amount) <= 0) {
					return uni.showToast({
						title: '转入金额不能为0',
						icon: 'none',
					});
				}
				let res = await this.$http.post('/partnerExtractHistory/extractRecords', {
					grade: this.Recordsitem.grade,
					amount: this.amount,
				});
				if (res.code == 200) {
					this.roleCommInShow = false;
					this.querydata();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
				}

			},
			gradeText(grade) {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[grade] || ''
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			async querydata() {
				let res = await this.$http.get('/partnerExtractHistory/queryExtractRecords')
				if (res.code == 200) {
					this.transferRecords = res.data.list;
					this.total = res.data.total;
				}

			},
			toReacors(id) {
				uni.navigateTo({
					url: "/pages/institutional/accountFreezeRecord?id=" + id + '&&grade=' + this.$route.query
						.grade + '&&type=2'
				})
			},
			//激活时间选择组件
			searchPopup() {
				this.$refs.datePicker.open()
			},
			//日期选择回调
			confirmPickDate(startdate, enddate) {
				this.pageQuery.startTime = startdate;
				this.pageQuery.endTime = enddate;
			},
			statusFilterConfirm(item) {
				console.log(item);
				this.pageQuery.grade = item.grade;
				this.pageQuery.gradeName = item.gradeName;
				this.querydata();
				this.statusFilterShow = false;
			},
		}

	}
</script>

<style lang="scss" scoped>
	.headers {
		width: 100%;
		z-index: 999999;
		padding: 30rpx;
		padding-top: 50px;
		background: linear-gradient(180deg, #D1EFFE 0%, #FFFFFF 100%);
		border-bottom: 1rpx solid #f2f2f2;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}



		.right {
			position: absolute;
			right: 30rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}

			text {
				font-weight: 400;
				color: #000;
				font-size: 24rpx;
			}
		}
	}

	//业绩
	.performance {
		width: 100%;
		background: #EBF4FF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		color: #2B67EF;

		text:first-child {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 1.5;
		}

		text:last-child {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 1.5;
		}
	}

	//时间筛选
	.filterTime {
		width: 100%;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		text:first-child {
			font-size: 26rpx;
			color: #333;
		}

		text:last-child {
			font-size: 19rpx;
			color: #666;
			margin-left: 4rpx;
		}
	}

	.content {
		margin: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			font-size: 30rpx;
			color: #333;
			padding: 24rpx 0 30rpx;
			border-bottom: 1rpx solid #eee;

			text:first-child {
				margin-right: auto;
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.roleCommInClass {
		width: 600rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;

		.title {
			font-size: 32rpx;
			color: #333;
		}

		.content {
			text:nth-child(1) {
				font-size: 28rpx;
				color: #333;
			}

			text:nth-child(2) {
				font-size: 26rpx;
				color: #666;
			}

		}

	}

	.roleCommInClass-footer {
		width: 100%;
		border-top: 1rpx solid #eee;

		view {
			width: 49%;
			padding: 24rpx;
			box-sizing: border-box;

		}

		view:first-child {
			border-right: 1rpx solid #eee;
		}

		view:last-child {
			color: #2D6DFF;
		}
	}
</style>