<template>
	<view class="page">
		<u-tabs :list="tabs" @click="sectionChange" style="background-color: #fff;" :current=current
			:itemStyle="{'width':'375rpx','padding':'24rpx'}" lineHeight="2px" lineWidth="30px"></u-tabs>
		<view class="contain" v-show="cdshow==true">
			<view class="nodata" v-if="nodata==true">
				暂无数据
			</view>
			<template v-if="nodata==false">
				<!-- <view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view> -->
				<view class="paisong" style="margin-top: 16rpx;" v-for="(item,index) in billLists">
					<u-icon name="arrow-up" @click="item.showMore=false" class="iconBtn" size="20px"
						v-if="item.showMore" color="#999"></u-icon>
					<u-icon name="arrow-down" @click="item.showMore=true" class="iconBtn" size="22px" color="#999"
						v-else></u-icon>
					<view class="title">
						{{item.costType | getDictLab(that)}}: <span>￥{{item.amount}}
							<text class="status s1" v-if='item.status==1'>
								已支付
							</text>
							<text class="status s2" v-if='item.status==2'>
								待支付
							</text>
							<text class="status s3" v-if='item.status==3'>
								支付失败
							</text></span>

					</view>
					<template v-if="item.showMore">
						<view class="subtit" style="margin-top: 16rpx;" v-for="subItem in item.billLists"
							:key="subItem.id">
							<template v-if="item.costType!='PropertyFee'">
								{{subItem.equipName}}:{{subItem.amount}}
							</template>
							<template v-else>
								{{subItem.costType| getDictLab2(that)}}:{{subItem.amount}}
							</template>
						</view>
					</template>
				</view>
			</template>
		</view>
		<!-- 缴费记录 -->
		<view class="contain" v-show="cdshow==false">
			<view class="topbilledit" @click="typechange">
				<view class="changetime1">
					{{expensedata}}
				</view>
				<view class="changetime2">
					<u-icon name="arrow-down-fill" color="#999" size="20"></u-icon>
				</view>
			</view>
			<!-- 	列表 -->
			<view class="nodata" v-if="jfnodata==true">
				暂无数据
			</view>
			<view class="u-listdata" v-if="jfnodata==false">
				<view style="padding:16rpx 0 16rpx 32rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>
				<u-list @scrolltolower="scrolltolower" :pagingEnabled='true'
					style="height:400px;flex:1;padding-bottom: 49px;">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="paisong2">
							<view class="status" v-if="item.type=='Subsidy'">
								补助
							</view>
							<view class="status s2" v-if="item.type=='PreStorage'">
								预存
							</view>
							<view class="status s3" v-if="item.type=='Refund'">
								退费
							</view>
							<view class="status s4" v-if="item.type=='Water'">
								水费
							</view>
							<view class="status s4" v-if="item.type=='Elec'">
								电费
							</view>
							<view class="status s4" v-if="item.type=='PropertyFee'">
								物业费
							</view>
							<view class="title">{{item.tenantInfo.name}}</view>
							<view class="subtit">
								扣缴金额: <span>￥{{item.amount}}</span>
							</view>
							<view class="subtit">
								账户余额: {{item.surplus}}
							</view>
							<view class="subtit">
								租户电话:￥{{item.tenantInfo.tel}}
							</view>
							<view class="subtit">
								操作人: {{item.creator}}
							</view>
							<view class="subtit">
								扣缴时间: {{item.createDate}}
							</view>
						</view>
					</u-list-item>
				</u-list>

			</view>
		</view>
		<view class="Predeposit">
			<span @click="prestore('预存')">预存</span>
			<span @click="prestore('补助')">补助</span>
		</view>
		<u-picker :show="showtype" :itemHeight="80" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype"
			@cancel='canceltype'> </u-picker>
		<u-popup :show="showpayjine" @close="closepay1" mode="bottom" :round="10" :closeable=true
			:closeOnClickOverlay=true>
			<view class="paytall1" style="padding-bottom: 20rpx;">
				<view class="hejitop">
					{{prestorename}}
				</view>
				<view class="zhifufs">
					<u--form labelWidth="30" labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="¥" prop="userInfo.amount" ref="item1">
							<u--input v-model="model1.userInfo.amount" border="none" placeholder="点击输入金额"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view style="margin:0 32rpx">
					<u-button type="primary" text="确认支付" @click="Confirmationpaymentjine"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="canys" v-if="zhifucanvas">
			<h4>请用微信扫码二维码</h4>
			<canvas class="zhifucanvas" canvas-id='canvas'></canvas>
			<view class="guanbi">
				<u-button type="primary" :plain="true" style="border:none" text="关闭" @click="guanbi"></u-button>
			</view>
		</view>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	import qs from 'qs'
	var QRCode = require('@/utils/qrcode.js');
	const BaseApi = require("@/http/baseApi.js");

	export default {
		data() {
			return {
				that: this,
				billstype: [],
				columnstype: [],
				PropertyTypedata: [],
				billLists: [],
				tabs: [{
					name: '账单明细',
				}, {
					name: '扣缴记录'
				}],
				zhifucanvas: false,
				prestorename: '',
				model1: {
					userInfo: {
						amount: '',
					},
				},
				rules: {
					'userInfo.amount': {
						type: 'string',
						required: true,
						message: '请填写预存金额',
						trigger: ['blur', 'change']
					},
				},
				showpayjine: false,
				totalnumber: 0,
				jfnodata: false,
				showtype: false,
				cdshow: true,
				fatherparameter: {},
				expensedata: '全部',
				list: ['账单明细', '缴费记录', ],
				current: 0,
				dataForm: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				zddata: {
					amount: '',
					dtf: '',
					ktf: '',
					glf: '',
				},
				nodata: true,
				pd: true,
				jfpost: {
					tenantId: "",
					costCycle: "",
					type: "",
					page: 1,
					limit: 10,
				},

			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) {
			//option为object类型，会序列化上个页面传递的参数
			this.fatherparameter = JSON.parse(decodeURIComponent(options.para));
			uni.setNavigationBarTitle({
				title: this.fatherparameter.name
			})
			this.dataForm.tenantId = this.fatherparameter.id;
			this.dataForm.costCycle = this.fatherparameter.cycle;
			this.dataForm.page = 1;
			this.jfpost.tenantId = this.fatherparameter.id;
			this.jfpost.costCycle = this.fatherparameter.cycle;
			this.jfpost.page = 1;
			this.getalldata();
			var getDictDataList = uni.getStorageSync('getDictDataList');
			this.billstype = getDictDataList.filter((item) => item.dictType == 'PayType');
			this.columnstype = [this.billstype[0].dataList];
			this.PropertyTypedata = getDictDataList.filter((item) => item.dictType == 'PropertyType');
			console.log(this.columnstype)
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},
		filters: {
			getDictLab(v, that) {
				let val = that.billstype[0].dataList.filter((item) => item.dictValue == v);
				if (val && val[0]) {
					return val[0].dictLabel;
				}
			},
			getDictLab2(v, that) {
				let val = that.PropertyTypedata[0].dataList.filter((item) => item.dictValue == v);
				if (val && val[0]) {
					return val[0].dictLabel || '11';
				}
			}
		},
		methods: {
			// 创建订单
			createOrder(postdata, type) {
				uni.request({
					url: BaseApi.BaseApi + '/pay/createOrder',
					method: "POST",
					data: postdata,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						"token": uni.getStorageSync('tokendata'),
					},
					success: (res) => {
						if (type) {
							let qrcode = new QRCode('canvas', {
								text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
								width: 213,
								height: 213,
								colorDark: "black",
								colorLight: "white",
								correctLevel: QRCode.CorrectLevel.H,
							});
							if (this.prestorename == '补助') {

							} else {

							}
						}
					}
				});
			},
			//预存和补助按钮点击
			prestore(e) {
				this.showpayjine = true;
				this.prestorename = e;
			},
			//确认支付预存和补助
			Confirmationpaymentjine() {
				this.$refs.uForm.validate().then(res => {
					this.showpayjine = false;
					if (this.prestorename == '预存') {
						this.prestoredata(this.model1.userInfo.amount)
					} else if (this.prestorename == '补助') {
						this.subsidydata(this.model1.userInfo.amount)
					}

				}).catch(errors => {
					uni.$u.toast('校验失败');

				})
			},
			//预存
			prestoredata(e) {
				this.zhifucanvas = true;
				this.showpayjine = false;
				let postdata = {
					totalFee: e,
					tenantId: this.dataForm.tenantId,
					tradeType: 'NATIVE',
					billIds: ''
				}
				this.createOrder(postdata, 1);
			},
			//补助
			subsidydata(e) {
				this.zhifucanvas = true;
				this.showpayjine = false;
				let postdata = {
					totalFee: e,
					tenantId: this.fatherparameter.id,
					tradeType: 'NATIVE',
					billIds: ''
				}
				this.createOrder(postdata, 1);
			},
			closepay1() {
				this.showpayjine = false
			},
			//微信二维码关闭
			guanbi() {
				this.zhifucanvas = false;
				this.getjfdata();
			},
			//取消预存
			canceltype() {
				this.showtype = false;
			},
			//类型查询确定
			confirmtype(e) {
				this.showtype = false;
				this.expensedata = e.value[0].dictLabel;
				if (e.value[0].dictLabel == '全部') {
					this.jfpost.type = '';
				} else {
					this.jfpost.type = e.value[0].dictValue;
				}
				this.indexList = [];
				this.jfpost.page = 1;
				this.getjfdata();
			},
			//类型查询
			typechange() {
				this.showtype = true;
			},
			//tab 切换
			sectionChange(val) {
				this.current = val.index;
				if (val.index == 0) {
					this.cdshow = true;
				} else if (val.index == 1) {
					this.cdshow = false;
					this.indexList = [];
					this.jfpost.page = 1;
					this.getjfdata();
				}

			},
			//加载更多
			scrolltolower() {
				if (this.pd) {
					this.getjfdata();
				} else {
					return
				}
			},
			//扣缴记录
			getjfdata() {
				this.$api.get('/payrecord/page', this.jfpost)
					.then(res => {
						this.totalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
							this.jfpost.page = this.jfpost.page + 1;
							this.pd = true;
							this.jfnodata = false;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}

					})
			},
			//账单明细
			getalldata() {
				this.$api.post('/billinfo/billDetail', this.dataForm)
					.then(res => {
						this.totalnumber = res.data.data.total;
						this.zddata = {};
						if (res.data.data.length == 0) {
							this.nodata = true;
						} else {
							for (let i = 0; i < res.data.data.length; i++) {
								res.data.data[i].showMore = false;
							}
							this.nodata = false;
							this.billLists = res.data.data;
						}
					})
			},

		}
	}
</script>

<style lang="scss">
	.Predeposit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 98rpx;
		z-index: 2;
		line-height: 98rpx;
		width: 750rpx;
		background-color: #fff;
		text-align: center;
		color: #2E69EB;
		box-shadow: 0 -6px 12px 0 rgba(153, 153, 153, 0.10);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.nodata {
		text-align: center;
		padding-top: 400rpx;
	}

	.zhifucanvas {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.canys {
		width: 500rpx;
		height: 600rpx;
		position: fixed;
		top: 30%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #e6e6e6;

		h4 {
			width: 500rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.guanbi {
		margin-top: 50rpx;
	}

	.zhifufs {
		padding: 10rpx 60rpx 30px;

		::v-deep .u-radio-label--right {
			margin-top: 30rpx;
		}

		::v-deep .uni-input-placeholder {
			text-align: left
		}

		::v-deep .u-radio__icon-wrap {
			width: 40rpx !important;
			height: 40rpx !important;
		}

		::v-deep .u-radio__text {
			font-size: 32rpx !important;
		}
	}

	.hejitop {
		text-align: center;
		border-bottom: 1px solid #eee;
		padding: 48rpx 0 24rpx;
		font-size: 32rpx;
	}

	.paytall {
		padding: 12px 0;
	}

	.heji span {
		color: #ED3A25;
	}

	.likezhifu {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.zhifu {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 98rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.zhifuright {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.page {
		height: 100%;
		overflow: hidden;

		.contain {
			height: calc(100% - 44px);
			padding: 0;
			display: flex;
			flex-direction: column;

			.u-listdata {
				height: 400px;
				flex: 1;
				display: flex;
				flex-direction: column;

			}
		}
	}

	.paisong,
	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px 12px 34px;
		border-radius: 4px;
		position: relative;

		.iconBtn {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			z-index: 1;
		}

		.title {
			font-size: 32rpx;
			color: #0C1935;
			margin-bottom: 16rpx;

			span {
				color: #FA5555;
				font-weight: 600;
				position: relative;

				.status {
					width: 50px;
					padding: 3px 3px 10px 3px;
					text-align: center;
					font-size: 13px;
					color: #fff;
					background-color: #09C700;
					border-radius: 11px;
					position: absolute;
					right: -50px;
					top: -10px;
					transform: scale(0.8);

					&.s1 {
						background: url('@/static/imgs/paySuccess.png') no-repeat;
						background-size: 100%;
					}

					&.s2 {
						background: url('@/static/imgs/payerror.png') no-repeat;
						background-size: 100%;
					}
				}
			}
		}

		.subtit {
			color: #9DA0AC;
			margin-bottom: 6rpx;
		}

		.check {
			position: absolute;
			left: 20rpx;
			top: 32rpx;
			z-index: 1;
			font-size: 0;
			transform: scale(.7)
		}
	}

	.paisong2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		margin: 0 16px 24rpx;
		padding: 12px 16px;
		border-radius: 4px;
		position: relative;

		.status {
			position: absolute;
			width: 96rpx;
			height: 48rpx;
			border-radius: 0 8rpx 0 20rpx;
			right: 0;
			line-height: 48rpx;
			text-align: center;
			top: 0;
			z-index: 1;
			font-size: 22rpx;
			background-color: #30D3A2;
			color: #fff;

			&.s2 {
				background-color: #09C700;
			}

			&.s3 {
				background-color: #FA5555;
			}

			&.s4 {
				background-color: #FF9C27;
			}
		}
	}

	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 88rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}
</style>