<template>
	<view class="container">
		<image src="/static/banner_c.png" mode="widthFix" style="width:100%"></image>
		<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem">
		</uni-segmented-control>
		<view style="height: 8rpx;"></view>
		<uni-section>
			<view v-if="current==0" style="background-color;:white">
				<uni-forms ref="form1" :modelValue="formData" label-position="left" border :rules="rules1">
					<uni-forms-item required label="用户名" name="username">
						<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item required label="密码" name="password">
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view v-if="current==1" style="background-color;:white">
				<uni-forms ref="form2" :modelValue="formData2" label-position="left" border :rules="rules2">
					<uni-forms-item label="手机号" name="phone" required>
						<uni-easyinput type="number" v-model="formData2.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" required>
						<view style="display: flex;">
							<view style="width: 60%;">
								<uni-easyinput type="number" v-model="formData2.code" placeholder="请输入验证码" />
							</view>
							<view style="width: 40%;display: flex;justify-content: center;align-items: center;">
								<span @click="getCode">{{content}}</span>
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<button style="background-color:#2979ff;color:white" @click="login(current)">登录</button>
		<!-- <view style="text-align: center;margin-top: 20rpx;">
			<uni-icons type="weixin" size="36" color="green" @click="wxmpLogin"></uni-icons>
			<view style="text-align: center;font-size: 32rpx;">微信登陆</view>
		</view> -->
		<view v-show="dShow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);z-index: 999;">
			 <view style="position: absolute;padding: 50rpx;background: #ffffff;display: inline-block;margin: auto;top: 40%;left: 50%;transform: translateX(-50%);">
				下载中 请勿退出 {{percentVal}}%
			 </view>
		</view>
	</view>
</template>

<script>
	import config from '/utils/config';
	export default {
		data() {
			return {
				current: 0,
				items: ['密码登录', '验证码登录'],
				content: '获取验证码',
				formData: {},
				formData2: {},
				timer: null,
				time: 30,
				rules1: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					}
				},
				rules2: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					}
				},
				wxmp_openid: null,
				dShow: false,
				percentVal: 0
			}
		},
		onLoad(options) {
			var that = this
			var autoLoading = options.autoLoading;
			that.checkVersion();
			if (autoLoading != 'no') {
				// #ifdef APP-PLUS || H5
				that.appLogin()
				// #endif
				// #ifdef MP-WEIXIN
				that.wxmpLogin()
				// #endif
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
		},
		methods: {
			checkVersion() {
				let that = this;
				uni.getSystemInfo({
					success(res) {
						uni.setStorageSync("vuex_version", res.appVersion)
						// #ifdef APP-PLUS
						if (res.platform == 'android') {
							that.$api.apkCheck().then(res1 => {
								if (res.appWgtVersion != res1.version) {
									uni.showModal({
										title: "版本更新",
										content: '有新的版本发布, 请下载新版本',
										confirmText: '立即更新',
										cancelText: '稍后进行',
										success: function(res2) {
											if (res2.confirm) {
												let fullurl = res1.file
												if (res1.file.indexOf("http") == -1) {
													fullurl = config.baseUrl + res1.file
												}
												that.dShow =
													true // show变量控制一个下载进度弹框（这个UI样式自己写即可）
												uni.hideTabBar()
												// 创建一个下载任务，并根据后端返回的apk静态资源地址filePath进行下载
												var dtask = plus.downloader.createDownload(
													fullurl, {},
													function(d, status) {
														// 下载完成  
														if (status == 200) {
															that.dShow =
																false // 下载完成再把下载进度弹框关闭即可
															uni.showTabBar();
															plus.runtime.install(plus.io
																.convertLocalFileSystemURL(
																	d
																	.filename), {}, {},
																function(error) {
																	uni.showToast({
																		title: '安装失败',
																		duration: 1500
																	});
																})
														} else {
															uni.showToast({
																title: '更新失败',
																duration: 1500
															});
														}
													});

												function onStateChanged(download, status) {

													if (status == 200) {
														const totalSize = download.totalSize
														let nowSize = download.downloadedSize
														that.percentVal = nowSize / 17700000 *
															100 > 99 ? 99 : (nowSize /
																17700000 * 100).toFixed(0)
													}

												}
												dtask.addEventListener("statechanged",
													onStateChanged, false);
												dtask.start();
											} else {

											}
										}
									});
								}
							})
						}
						// #endif
					}
				})
			},
			wxmpLogin() {
				var that = this;
				uni.showLoading({
					title: '自动登录中...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						that.$api.wxmpLogin({
							code: loginRes.code
						}).then(res => {
							uni.setStorageSync('access', res.access)
							that.$api.getUserInfo().then(res => {
								uni.setStorageSync('userInfo', res)
								uni.reLaunch({
									url: '/pages/index/index'
								})

							})
						}).catch(e => {
							this.wxmp_openid = e.data.wxmp_openid
						})
					},
					complete: function() {
						uni.hideLoading();
					},
				})
			},
			appLogin() {
				var that = this;
				// App自动登录
				uni.showLoading({
					title: '自动登录中...',
					mask: true
				})
				uni.getStorage({
					key: 'mySecret',
					success: function(res) {
						let secret = res.data
						if (secret) {
							that.$api.loginSecret(JSON.parse(secret)).then(res => {
								uni.setStorageSync('access', res.access)
								that.$api.getUserInfo().then(res => {
									uni.setStorageSync('userInfo', res)
									uni.reLaunch({
										url: '/pages/index/index'
									})
								})
							})
						}
					},
					complete: function() {
						uni.hideLoading();
					},

				});
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			countDown() {
				var that = this;
				if (that.time >= 0) {
					that.content = that.time.toString() + '秒';
					--that.time
				} else {
					clearInterval(that.timer)
					that.timer = null
					that.content = '获取验证码'
				}
			},
			getCode() {
				var that = this
				if (that.content == '获取验证码') {
					if (that.$check.mobile(that.formData2.phone)) {
						that.$api.getCode({
							phone: that.formData2.phone
						}).then(res => {
							uni.showToast({
								icon: "none",
								title: '验证码已发送'
							})
							setInterval(that.countDown, 1000)
						})
					} else {
						uni.showToast({
							icon: "none",
							title: '手机号格式有误'
						})
					}
				}
			},
			login() {
				var that = this;
				if (that.current == 1) {
					that.$refs.form2.validate().then(res0 => {
						that.$api.codeLogin(res0).then(res => {
							uni.setStorageSync('access', res.access)
							that.$api.getUserInfo().then(res => {
								uni.setStorageSync('userInfo', res)
								that.bindXX()
								uni.reLaunch({
									url: '/pages/index/index'
								})
							})
						})
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				} else if (that.current == 0) {
					that.$refs.form1.validate().then(res0 => {
						that.$api.login(res0).then(res => {
							uni.setStorageSync('access', res.access)
							that.bindXX()
							that.$api.getUserInfo().then(res => {
								uni.setStorageSync('userInfo', res)
								uni.reLaunch({
									url: '/pages/index/index'
								})
							})
						})
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				}
			},
			ranStr(e) {
				//形参e,需要产生随机字符串的长度   
				//如果没有传参，默认生成32位长度随机字符串
				e = e || 32;
				//模拟随机字符串库
				var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
					a = t.length, //字符串t的长度，随机数生成最大值
					n = "";
				for (let i = 0; i < e; i++) {
					//随机生成长度为e的随机字符串拼接
					n += t.charAt(Math.floor(Math.random() * a));
				}
				//返回随机组合字符串
				return n
			},
			bindXX() {
				let that = this;
				// #ifdef APP-PLUS || H5
				let userInfo = uni.getStorageSync("userInfo")
				let secret = that.ranStr(12)
				let mySecret = {
					'username': userInfo.username,
					'secret': secret
				}
				this.$api.bindSecret({
					secret: secret
				}).then(res => {
					uni.setStorageSync('mySecret', JSON.stringify(mySecret))
				}).catch(e => {})
				// #endif
				// #ifdef MP-WEIXIN
				if (this.wxmp_openid != null) {
					this.$api.bindWxmp({
						"openid": this.wxmp_openid
					}).then(res => {

					})
				}
				// #endif
			}
		}
	}
</script>

<style>
.uni-section-header {
	padding: 0px 0px !important;
}
</style>