<template>
	<view class="container">
		<view class="property">
			<view class="address-title">
				{{pageInfo.platformName}} {{pageInfo.buildingName}} {{pageInfo.unitName}} {{pageInfo.roomName}} {{pageInfo.userName}}
			</view>
			<view class="details">
				<view class="title">
					<view class="name">
						<view class="cost">{{pageInfo.totalAmount}}</view>元
					</view>
					<view class="tag">费用期间：{{pageInfo.createTime}}</view>
				</view>
				<view class="content">
					<view class="text">使用积分：</view>
					<view class="input-box">
						<input v-model="currentUse" :disabled="ownerIntegral === 0" :cursor-spacing="10" placeholder-class="input-placeholder" class="integral-input" type="number" placeholder="请输入使用积分数量（可不输入）" />
						<button :disabled="ownerIntegral === 0" class="mini-btn" type="primary" size="mini" @click="onUseAll">使用全部</button>
					</view>
					<view class="text illustrate">当前可用{{ownerIntegral}}积分，可抵扣￥{{deductionIntegral}}元</view>
				</view>
				<view class="content flex">
					<view class="text">缴费方式：</view>
					<!-- <radio-group class="radio-group">
						<label class="radio" v-for="item in radioList" :key="item.value">
							<radio disabled style="transform:scale(0.7)" color="#6A59F2" :value="item.value" :checked="pageInfo.chargeCycle === item.value" />
							{{item.label}}
						</label>
					</radio-group> -->
					<view class="text">{{chargeCycleName}}</view>
				</view>
			</view>
		</view>
		<view class="form-submit" @click="onSubmit">支付</view>
	</view>
</template>

<script>
	import {
		queryIntegralByOwnerIdApi,
		payPropertyFeeApi
	} from '@/config/api.js'
	export default {
		data() {
			return {
				pageInfo: {
					id: '',
					ownerId: '',
					userName: '',
					userPhone: '',
					platformName: '',
					buildingName: '',
					unitName: '',
					roomName: '',
					roomId: '',
					createTime: '',
					totalAmount: '',
					chargeCycle: ''
				},
				currentUse: '',
				payUsePoints: 1,
				ownerIntegral: 0,
				deductionIntegral: 0
			}
		},
		computed: {
			chargeCycleName() {
				let chargeCycleList = [
					{label: '每月', value: '1'},
					{label: '每季度', value: '2'},
					{label: '每年', value: '3'},
					{label: '一次性付清', value: '4'},
					{label: '预付', value: '5'},
				]
				let row = chargeCycleList.find(item=>item.value === this.pageInfo.chargeCycle)
				return row ? row.label : ''
			}
		},
		methods: {
			onUseAll() {
				this.currentUse = this.ownerIntegral
			},
			async onSubmit() {
				// uni.requestPayment({
				// 	provider: 'alipay',
				// 	orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				// 	success: function (res) {
				// 		console.log('success:' + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log('fail:' + JSON.stringify(err));
				// 	}
				// });
				let payAmount = Number(this.pageInfo.totalAmount)
				let deductionAmount = 0
				if(this.currentUse) {
					deductionAmount = (Number(this.currentUse) / this.payUsePoints).toFixed(2)
					payAmount = (payAmount - Number(deductionAmount)).toFixed(2)
				}
				let res = await payPropertyFeeApi({
					paymentId: this.pageInfo.id,
					ownerId: this.pageInfo.ownerId,
					ownerPhone: this.pageInfo.userPhone,
					deductionAmount,
					payAmount,
					useIntegral: this.currentUse || 0,
					platformName: this.pageInfo.platformName,
					residentName: this.pageInfo.userName,
				})
				if(res.success) {
					var pages = getCurrentPages();
					var page = pages[pages.length - 2];
					page.$vm.getList()
					setTimeout(()=> {
						uni.showToast({
							title: '支付成功！',
							icon: 'none'
						});
						setTimeout(()=> {
							uni.navigateBack()
						}, 1500)
					}, 30)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			async getMessage(ownerId) {
				let res = await queryIntegralByOwnerIdApi({ownerId})
				this.payUsePoints = res.result.payUsePoints
				this.ownerIntegral = res.result.ownerIntegral
				this.deductionIntegral = res.result.deductionIntegral
			}
		},
		onLoad(options) {
			let info = JSON.parse(options.params)
			this.pageInfo = {
				id: info.id,
				ownerId: info.ownerId,
				userName: uni.getStorageSync('user_name'),
				userPhone: uni.getStorageSync('user_phone'),
				platformName: uni.getStorageSync('platform_name'),
				buildingName: info.buildingName,
				unitName: info.unitName,
				roomName: info.roomName,
				roomId: info.roomId,
				createTime: info.createTime,
				totalAmount: info.totalAmount,
				chargeCycle: info.chargeCycle
			}
			this.getMessage(info.ownerId)
		}
	}
</script>
<style>
	page {
		background-color: #F8F6F9;
	}
	.input-placeholder {
		font-size: 14px;
		color: #CECED3;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		
		.form-submit {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #6A59F2;
			border-radius: 80rpx;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 60rpx;
		}
	}

	.property {
		box-shadow: 0 0 25rpx 0 rgba(81,89,234,0.06);
		border-radius: 16rpx;
		overflow: hidden;
		.address-title {
			width: 100%;
			height: 70rpx;
			background-color: #E8E5FF;
			line-height: 70rpx;
			text-align: center;
			font-size: 32rpx;
			color: #6A59F2;
		}
		.details {
			background-color: #ffffff;
			padding:60rpx 30rpx 0 30rpx;

			.title {
				margin-bottom: 60rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;

				.name {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #6A59F2;
					display: flex;

					.cost {
						font-size: 60rpx;
						color: #6A59F2;
						font-weight: bold;
						margin-right: 20rpx;
					}

				}

				.tag {
					margin-top: 30rpx;
					font-size: 12px;
					color: #B6B6BA;
				}
			}

			.content {
				border-top: 1px solid #F0F0F2;
				padding: 20rpx 0;
				&.flex {
					display: flex;
					justify-content: space-between;
				}
				.text {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #373737;
					&.illustrate {
						color: #F1BD4D;
					}
				}
				.integral-input {
					box-sizing: border-box;
					padding: 0 10px;
					color: #373737;
					height: 88rpx;
					border: 1px solid #F0F0F2;
					border-radius: 10rpx;
				}
				// .radio-group {
				// 	margin-top: 20rpx;
				// 	margin-left: -4px;
				// 	.radio {
				// 		font-size: 28rpx;
				// 		color: #373737;
				// 		&:not(:last-child) {
				// 			margin-right: 5px;
				// 		}
				// 	}
				// }
			}
		}
	}
</style>