<template>
	<view class="content">
		<view class="memberBanner">
			<image mode="widthFix" src="../../static/memberBanner.jpg"></image>
		</view>
		<view class="buyBox">
			<view class="title">请输入您的联系方式</view>
			<view class="formCol">
				<view>宝妈姓名<text style="color:red">*</text></view>
				<view class="formRight"><input type="text" v-model="info.member_name" placeholder="宝妈姓名"></view>
			</view>
			<view class="formCol">
				<view>手机号码<text style="color:red">*</text></view>
				<view class="formRight"><input type="text" v-model="info.phone" placeholder="请输入手机号码"></view>
			</view>
			<view class="formCol">
				<view>宝宝生日/预产期<text style="color:red">*</text></view>
				<view class="formRight">
					<picker mode="date" :value="info.due_date" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input">{{info.due_date}}</view>
					</picker>
				</view>
			</view>
			<view class="formCol">
				<view>所属区域<text style="color:red">*</text></view>
				<view class="formRight">
					<picker :value="rindex" @change="bindRegionChange" :range="arrRegion">
						<view class="uni-input">{{arrRegion[rindex]}}</view>
					</picker>
					<input type="text" v-if="rindex!=0" v-model="info.address" style="margin-top: 10rpx;"
						placeholder="请输入具体街道/地址">
				</view>
			</view>
			<view class="formCol">
				<view>建卡医院</view>
				<view class="formRight">
					<picker :value="hindex" @change="bindHospitalChange" :range="arrHospital">
						<view class="uni-input">{{arrHospital[hindex]}}</view>
					</picker>

					<input type="text" v-if="arrHospital[hindex]=='其他'" v-model="info.hospital"
						style="margin-top: 10rpx;" placeholder="请输入具体建卡医院">
				</view>
			</view>
			<view class="formCol">
				<view>备注信息</view>
				<view class="formRight">
					<u-input v-model="info.member_comment" border="true" type="textarea" placeholder="备注信息" />
				</view>
			</view>
			<!-- <view class="formCol" >
				<view>免费福利</view>
				<view class="formRight">
					<checkbox-group class="checkGroup">
						<label>
							<checkbox value="cb" checked="true" />孕产礼包
						</label>
						<label>
							<checkbox value="cb" />孕妈课堂
						</label>
					</checkbox-group>					
				</view>
			</view>			 -->
		</view>


		<view class="payBtn" @click="pay">立即支付</view>

		<u-popup v-model="showUser" mode="center" closeable="true">
			<view class="userBox" style="padding: 20rpx;">
				<view class="userInfoContent" style="padding: 80rpx;font-size: 28rpx;">
					<text class="">为了更好的提供服务请授权您的微信昵称</text>
				</view>
				<view class="userBoxBottom">
					<button class="userBoxBottomCol btnuserBoxBottomCol" @click="getUserProfile"
						style="border-radius:0;flex:1;">授权</button>
					<button class="userBoxBottomCol" @click="touserInfoClose"
						style="border-radius:0;flex:1;">关闭</button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		weixin
	} from '../../../../utils/weixin.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				showUser: false,
				info: {
					due_date: currentDate,
					token: '',
					phone: '',
					region: '',
					address: '',
					hospital: '',
					product_id: '',
					product_type: 'package',
					member_comment: ""
				},
				token: '',
				openid: '',
				package_id: '',
				arrHospital: ["请选择建卡医院", "市立医院", "苏大附一院", "苏大附二院", "中医院", "第五人民医院", "苏州市第七人民医院", "明基医院", "九龙医院", "娄葑医院",
					"吴中人民医院", "甪直人民医院", "相城人民医院", "相城区第二人民医院", "吴江第一人民医院", "吴江第二人民医院", "盛泽医院", "其他"
				],
				arrRegion: ["请选择区域", "吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],
				rindex: 0,
				hindex: 0
			}
		},
		onLoad(options) {
			let user_info = weixin.getUserInfoCache()
			this.openid = user_info.openid
			this.info.phone = user_info.phone
			this.info.product_id = options.package_id;
			this.info.promotion = uni.getStorageSync("base_promotion_id");
		},
		methods: {
			getUserProfile() {
				var that = this;
				weixin.getUserProfile((res) => {
					console.log(res)
					weixin.request({
						api: '/api/member/update-wechat-info',
						method: 'POST',
						data: {
							nickname: res.nickName,
							avatar: res.avatarUrl
						},
						utilSuccess: function(r) {
							console.log(r)
							if (r.status == 1) {
								weixin.getOpenidInfo(openidInfo => {}, true)
								that.showUser = false;
							} else {
								uni.showToast({
									title: r.data.msg,
									duration: 2000,
									icon: 'none'
								})
							}
						}

					})
				})
			},

			bindRegionChange: function(e) {
				this.rindex = e.target.value;
				this.info.region = this.arrRegion[e.target.value];
			},
			bindHospitalChange: function(e) {
				this.hindex = e.target.value;
				if (this.arrHospital[e.target.value] != '其他') {
					this.info.hospital = this.arrHospital[e.target.value];
				}
			},
			pay() {
				
				let user_info = weixin.getUserInfoCache();
				
				if (weixin.isNull(user_info.user_info.wechat_nickname)||weixin.isNull(user_info.user_info.avatar)) {
					this.showUser = true;
					return false;
					//this.getUserProfile();
				}
				
				
				if (!this.info.member_name) {
					this.alert('请输入宝妈姓名')
					return
				}
				if (!this.info.due_date) {
					this.alert('请选择预产日期')
					return
				}

				if (!this.info.phone) {
					this.alert('请填写手机号')
					return
				}


				if (!this.info.region || this.rindex == 0) {
					this.alert('请填写所属区域')
					return
				}


				if (weixin.isNull(this.info.address)) {
					this.alert('请输入具体街道/地址')
					return
				}

				weixin.request({
					api: '/api/member/order-add',
					method: 'POST',
					data: this.info,
					utilSuccess: r => {
						if (parseFloat(r.data.total) == 0) {
							uni.navigateTo({
								url: '../buyMemberSuccess/buyMemberSuccess?id=' +
									this.info.product_id
							})
						} else {
							weixin.getOpenidInfo(() => {}, true);
							weixin.request({
								api: '/api/member/order-payment',
								method: 'GET',
								data: {
									order_id: r.data.id,
									openid: this.openid
								},
								utilSuccess: res => {
									setTimeout(function() {
										uni.hideLoading();
									}, 100);
									let payParams = JSON.parse(res.jsApiParameters)
									payParams.provider = 'wxpay'
									payParams.success = result => {
										uni.navigateTo({
											url: '../buyMemberSuccess/buyMemberSuccess?id=' +
												this.info.product_id
										})
									}
									payParams.fail = result => {
										console.log(result);
									}
									wx.requestPayment(payParams);
								},
								utilFail: res => {
									console.log(res);
								}
							})
						}
					},
					utilFail: r => {
						weixin.alert(r)
						console.log(r);
					}

				})


			},
			bindDateChange: function(e) {
				this.info.due_date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.userBoxBottom {
		.userBoxBottomCol {
			font-size: 28rpx;
		}

		.btnuserBoxBottomCol {
			background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
		}
	}
	button::after {
		border: none
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.memberBanner {
		display: block;
		width: 100%;

		image {
			display: block;
			width: 100%;
		}
	}

	.buyBox {
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding-bottom: 20rpx;

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

		.formCol {
			font-size: 28rpx;
			color: #666;
			padding: 0 30rpx;
			margin: 20rpx auto;

			.formRight {
				margin: 30rpx 0;

				input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.uni-input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.checkGroup {
		display: flex;
		justify-content: flex-start;
		margin: 20rpx 0;

		label {
			width: 50%;
		}
	}

	.payBtn {
		width: 690rpx;
		height: 100rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 100rpx;
		text-align: center;
		background: #FF578A;
		margin: 0 auto;
		border-radius: 20rpx;
	}
</style>
