<template>
	<view class="pages">
		<view class="title">
			<image src="https://api.ccttiot.com/smartmeter/img/static/us3fy7PWk14FUljNypKh" mode=""
				style="width: 52rpx;height: 52rpx;margin-right: 10rpx;vertical-align: bottom;vertical-align: bottom;"
				@click="btnshouye"></image>
			<text style="width: 80%;text-align: center;display: inline-block;">扫码床垫</text>
			<view class="wz" @click="call" style="text-align: right;padding-right: 20rpx;"
				v-if="obj.storeContactMobile == null">
				<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
					src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
				<!-- <text>客服</text> -->
			</view>
			<view class="wz" @click="call"
				style="text-align: right;padding-right: 20rpx;display: flex;align-items: center;" v-else>
				<image style="width: 48rpx;height: 50rpx;vertical-align: middle;"
					src="https://api.ccttiot.com/smartmeter/img/static/u9bYsfyXGAMwKMFfQAmL" mode=""></image>
				<!-- <text>客服</text> -->
			</view>
		</view>

		<!-- 套餐 -->
		<view class="list">
			<view class="list_item" :class="activeindex == item.suitId ? 'active' : ''" v-for="(item,index) in list" :key="index"
				@click="btnactive(item)">
				<view class="tit">
					<text class="tc" :class="activeindex == item.suitId ? 'active' : ''">{{item.name}}</text> <text class="yh"
						:class="activeindex == item.suitId ? 'actives' : ''">{{item.usePoint}}%用户选择</text>
				</view>
				<view class="bot">
					<view class="price" :class="activeindex == item.suitId ? 'active' : ''">
						￥{{item.price}}
					</view>
					<view class="time" :class="activeindex == item.suitId ? 'active' : ''">
						可使用{{item.value}}小时
					</view>
				</view>
			</view>
		</view>
		<!-- 说明 -->
		<view class="shuom">
			<view class="shuomtit">
				设备规格
			</view>
			<view class="shuomwz">
				尺寸：{{obj.size == undefined ? '--' : obj.size}}
			</view>
			<view class="shuomwz">
				面料：{{obj.fabric == undefined ? '--' : obj.fabric}}
			</view>
			<view class="shuomwz">
				填充物：{{obj.fill == undefined ? '--' : obj.fill}}
			</view>
			<view class="shuomwz">
				所属房间：{{obj.room == undefined ? '--' : obj.room}}
			</view>
		</view>


		<!-- 支付 -->
		<view class="tongyi">
			<u-checkbox-group>
				<u-checkbox v-model="checked" @change="checkboxChange" active-color="#8883F0 ">我已同意
				</u-checkbox><text>《用户服务协议》</text>
			</u-checkbox-group>
			<view class="zf" @click="btnzhifu" v-if="zhifuflag">
				立即支付
			</view>
			<view class="zf" v-else>
				立即支付
			</view>
		</view>
		<!-- 背景 -->
		<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
			<image style="width: 100%;height: 100vh;"
				src="https://api.ccttiot.com/smartmeter/img/static/uOiCQSDjukktdvbx5oPw" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					// backgroundColor: "#8883f0",
				},
				checked: false,
				zhifuflag: true,
				activeindex: -1,
				id: '',
				list: [],
				obj:{},
				orderno:'',
				payNo:'',
				prices:'',
				sytime:'',
				zfobj:{},
				suitTimeUnit:'',
				suitPrice:'',
				suitGearAmount:'',
				suitGearTime:'',
				suitFeeMode:'',
				suitFeeType:'',
			}
		},
		onLoad(option) {
			if (option.q) {
				function getQueryParam(url, paramName) {
					let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
					let results = regex.exec(url);
					return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
				}
				this.sceneValue = option.q
				let decodedValue = decodeURIComponent(this.sceneValue);
				this.id = getQueryParam(decodedValue, 's')
				this.$u.get(`/app/user/userInfo`).then(res => {
					if(res.code == 200){
				        this.getlist()
					}else if(res.code == 401){
						uni.navigateTo({
							url:'/pages/login/login?id=' + this.id
						})
					}
				})
			} else {
				this.id = option.id
				this.$u.get(`/app/user/userInfo`).then(res => {
					if(res.code == 200){
				        this.getlist()
					}else if(res.code == 401){
						uni.navigateTo({
							url:'/pages/login/login?id=' + this.id
						})
					}
				})
			}


		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 获取设备套餐列表
			getlist() {
				this.$u.get(`app/device/${this.id}/withSuitList`).then((res) => {
					if (res.code == 200) {
						this.list = res.data.suitList
						this.obj = res.data
					}else if(res.code == 401){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			// 点击支付	
			btnzhifu() {
				if(this.checked == false){
					uni.showToast({
						title: '请勾选用户服务协议 !',
						icon: 'none',
						duration: 1000
					})
				}else if(this.activeindex == -1){
					uni.showToast({
						title: '请选择套餐 !',
						icon: 'none',
						duration: 1000
					})
				}else{
					// 不允许一直点击支付
					this.zhifuflag = false
					let that = this
					let data = {
						deviceNo: that.id,
						suitId: that.zfobj.suitId,
						money: that.zfobj.price,
						suitTime: that.zfobj.value,
						suitTimeUnit:that.suitTimeUnit,
						suitFeeMode:that.suitFeeMode,
						suitFeeType:that.suitFeeType,
						suitGearAmount:that.suitGearAmount,
						suitGearTime:that.suitGearTime,
						suitPrice:that.suitPrice
					}
					that.$u.post('/app/bill/recharge', data).then(res => {
						if(res.code == 200){
							that.orderno = res.data
							let data = {
								billNo:that.orderno,
								channelId:1
							}
							that.$u.get(`app/pay/wx/${that.orderno}`).then(res => {
								if(res.code == 200){
									that.payNo = res.data.payBill.payNo
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.payParams.timeStamp,
										nonceStr: res.data.payParams.nonceStr,
										package: res.data.payParams.packageVal,
										signType: res.data.payParams.signType,
										paySign: res.data.payParams.paySign,
										success: (res) => {
											that.zhifuflag = true
											that.$u.put(`/app/bill/${that.payNo}/refreshPayResult`).then(res => {})
											// 支付成功逻辑
											uni.reLaunch({
												// url:'/page_user/mydetail?id=' + that.orderno
												url:'/pages/index/index'
											})
										},
										fail(err) {
											that.zhifuflag = true
											// 支付失败逻辑
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
									setTimeout(()=>{
										this.zhifuflag = true
									},2000)
								}
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
							setTimeout(()=>{
								this.zhifuflag = true
							},2000)
						}
					})
					
				}
			},



			btnactive(item) {
				this.activeindex = item.suitId
				this.prices = item.price
				this.sytime = item.value
				this.zfobj = item
				this.suitTimeUnit = item.timeUnit
				this.suitPrice = item.price
				this.suitGearAmount = item.gearAmount
				this.suitGearTime = item.gearTime
				this.suitFeeMode = item.feeMode
				this.suitFeeType = item.feeType
			},

			btnshouye() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			checkboxChange(e) {
				this.checked = e.value
			},
			// 联系客服
			call() {
				let phoneNumber = ''
				if (this.obj.storeContactMobile == null) {
					phoneNumber = this.obj.userMobile
				} else {
					phoneNumber = this.obj.storeContactMobile
				}
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #918CFF !important;
		color: #fff !important;
	}

	.actives {
		background-color: #fff !important;
		// color: #fff !important;
	}

	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	// /deep/ .u-icon__icon {
	// 	padding-bottom: 15rpx;
	// }

	page {
		background-color: #F7FAFE;
		overflow: hidden;
	}

	.pages {
		width: 750rpx;
		box-sizing: border-box;

		.shuom {
			width: 650rpx;
			height: 332rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			filter: blur(0px);
			margin: auto;
			margin-top: 98rpx;
			border-radius: 20rpx;
			padding-top: 32rpx;
			padding-left: 36rpx;
			box-sizing: border-box;

			.shuomtit {
				font-weight: 700;
				font-size: 34rpx;
				color: #383838;
			}

			.shuomwz {
				font-size: 28rpx;
				color: #383838;
				margin-top: 16rpx;
			}
		}

		.list {
			width: 648rpx;
			margin: auto;
			height: 42vh;
			overflow: scroll;

			.list_item {
				width: 648rpx;
				height: 192rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				filter: blur(0px);
				border-radius: 20rpx;
				margin-top: 30rpx;
				padding-left: 36rpx;
				box-sizing: border-box;
				overflow: hidden;

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

					.tc {
						font-weight: 600;
						font-size: 34rpx;
						color: #3D3D3D;
						padding-top: 26rpx;
						box-sizing: border-box;
					}

					.yh {
						width: 213rpx;
						height: 67rpx;
						background: #DCDBFF;
						border-radius: 0 0 0 20rpx;
						font-size: 28rpx;
						color: #918CFF;
						text-align: center;
						line-height: 67rpx;
					}
				}

				.bot {
					margin-top: 40rpx;
					display: flex;

					.price {
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-right: 46rpx;
					}

					.time {
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}
			}
		}

		.tongyi {
			width: 590rpx;
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);

			text {
				color: #638DFF;
				height: 50rpx;
				line-height: 50rpx;
			}

			.zf {
				width: 590rpx;
				height: 84rpx;
				background: #8883F0;
				filter: blur(0px);
				border-radius: 50rpx;
				text-align: center;
				line-height: 84rpx;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}

		.title {
			margin-top: 40rpx;
			padding-left: 32rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #3D3D3D;
			margin-top: 110rpx;
			height: 126rpx;

			.wz {
				font-weight: 400;
				font-size: 32rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>