<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<u-form :model="form" :label-width="140" ref="uForm" :label-align="'left'" :error-type="['message']">
				<u-form-item label="姓名" prop="username" required>
					<u-input v-model="form.username" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="就读班级" prop="course" required>
					<u-input @click="showCourse = true" placeholder="请选择就读班级" v-model="form.course" type="select" />
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile" required>
					<u-input type="number" placeholder="请输入联系方式" v-model="form.mobile" />
				</u-form-item>
				<u-form-item label="公司名称" prop="company_name">
					<u-input v-model="form.company_name" placeholder="请输入公司名称" />
				</u-form-item>
				<u-form-item label="职务" prop="company_position">
					<u-input v-model="form.company_position" type="text" placeholder="请输入职务" /></u-form-item>
				<u-form-item label="我希望捐赠" prop="donate" label-position="top">
					<u-input v-model="form.donate" type="textarea" placeholder="我希望捐赠" /></u-form-item>
			</u-form>
		</view>
		<view class="form-btn">
			<view @click="saveDonates">提交</view>
		</view>
		<u-picker @confirm="selectCourse" v-model="showCourse" :range="courseList" range-key="value"
			mode="selector"></u-picker>

		<!-- 进入后没有手机号的话 绑定 或者 注册 -->
		<view class="modal">
			<u-popup v-model="showRegister" mode="bottom" :mask-close-able='false'>
				<view>
					<view class="modal-tip">提示</view>
					<view class="modal-content">
						<view>如您已是我方校友，请先绑定账号</view>
						<view @click="goBind" class="modal-bind">
							去绑定
						</view>
						<view>如您还不是我方校友，请先注册</view>
						<view @click="toRegister" class="modal-register">
							去注册
						</view>
					</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showRegister: false,
				hasMobile: false,
				showCourse: false,
				isLocked: false,
				form: {
					username: '',
					course: '',
					mobile: '',
					company_name: '',
					company_position: '',
					donate: ''

				},
				courseList: [{
					label: '高研班｜第一期高级科创人才研修班',
					value: '高研班｜第一期高级科创人才研修班'
				}, {
					label: '高研班｜第二期高级科创人才研修班',
					value: '高研班｜第二期高级科创人才研修班'
				}, {
					label: '高研班｜第三期高级科创人才研修班',
					value: '高研班｜第三期高级科创人才研修班'
				}, {
					label: '高研班｜第四期高级科创人才研修班',
					value: '高研班｜第四期高级科创人才研修班'
				}, {
					label: '高研班｜第五期高级科创人才研修班',
					value: '高研班｜第五期高级科创人才研修班'
				}, {
					label: '高研班｜第六期高级科创人才研修班',
					value: '高研班｜第六期高级科创人才研修班'
				}, {
					label: '其他',
					value: '其他'
				}],
				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}],
					course: [{
						required: true,
						message: '请选择就读班级',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						required: true,
						message: '请输入联系方式',
						trigger: ['blur'],
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}],

				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			let token = uni.getStorageSync('stbc1_lifeData') ? uni.getStorageSync('stbc1_lifeData').vuex_token : ''
			if (this.base.isNull(token)) {
				this.getToken()
			} else {
				this.getUserInfo()
			}
		},
		methods: {
			selectCourse(e) {
				this.form.course = this.courseList[e[0]]['value']
			},
			// 日期
			saveDonates() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.isLocked) {
							return
						}
						this.isLocked = true
						this.$u.api.updateDonates(this.form).then(res => {
							this.base.toast('提交成功！感谢您的支持！近期我们将会电话与您联系～', 1500, function() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/me/index'
									})
								}, 1500)
							})
						}).catch(res => {
							this.isLocked = false
						})
					} else {
						console.log('验证失败');
						// this.base.toast("注册失败")
					}
				});

			},
			async getToken() {
				let that = this
				const loginResult = await new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							resolve(res.code);
						},
						fail: (err) => {
							console.error('uni.login失败:', err);
							reject(err);
						}
					});
				});
				const tokenResult = await new Promise((resolve, reject) => {
					this.$u.api.login({
						code: loginResult
					}).then(res1 => {
						console.log("res1", res1)
						uni.setStorageSync("stbc1_lifeData", {
							'vuex_token': res1.token
						})
						resolve(res1.token);
					}).catch(err => {
						reject(err)
						console.log('login-error:', JSON.stringify(err))
					})
				});
				await this.$u.api.user().then(res => {
					uni.setStorageSync("stbc1_lifeData", {
						'vuex_token': tokenResult,
						"vuex_user": res.user
					})
					this.form.username = res.user.username
					this.form.mobile = res.user.mobile
					this.form.company_position = res.user.company_position
					this.form.company_name = res.user.company_name
					if (that.base.isNull(res.user.mobile)) {
						that.showRegister = true
						that.hasMobile = false
					} else {
						that.showRegister = false
						that.hasMobile = true
					}
				})
			},
			getUserInfo() {
				let that = this
				this.$u.api.user().then(res => {
					this.form.username = res.user.username
					this.form.mobile = res.user.mobile
					this.form.company_position = res.user.company_position
					this.form.company_name = res.user.company_name
					this.$u.vuex('vuex_user', res.user)
					if (that.base.isNull(res.user.mobile)) {
						that.showRegister = true
						that.hasMobile = false
					} else {
						that.showRegister = false
						that.hasMobile = true
					}
				})
			},
			
			// 去绑定登录
			goBind() {
				uni.redirectTo({
					url: '/packages/register/login?isDonate=isDonate'
				})
			},
			// 去注册
			toRegister() {
				uni.redirectTo({
					url: '/packages/register/index?isDonate=isDonate'
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		height: 100vh;
		overflow: scroll;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			background: #fff;
			position: relative;
			padding: 35rpx;
			border-radius: 30rpx;
			padding-top: 0;
		}

		.form-btn {
			width: 100%;
			position: relative;
			padding: 60rpx 0;

			&>view {
				width: 70%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
				border-radius: 30rpx;
				padding: 20rpx;
			}
		}
		.modal {
			::v-deep .u-drawer-bottom {
				border-radius: 40rpx;
			}
		
			&-tip {
				text-align: center;
				padding: 30rpx;
				font-size: 32rpx;
			}
		
			&-content {
				height: 450rpx;
				padding: 0 30rpx;
				font-size: 32rpx;
				text-align: center;
		
				&>view {
					margin: 30rpx auto;
				}
			}
		
			&-bind {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #e4cdb4, #c69c6d);
			}
		
			&-register {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
			}
		}

	}
</style>