<template>
	<view class="login-page">
		<!-- 顶部渐变区域 -->
		<view class="login-header">
			<image src="/static/banner_c.png" mode="widthFix" class="login-banner"></image>
			<view class="login-welcome">
				<text class="login-title">欢迎回来</text>
				<text class="login-subtitle">登录您的账号以继续</text>
			</view>
		</view>
		<!-- 登录卡片 -->
		<view class="login-card">
			<view class="login-tabs">
				<view class="login-tab" :class="{active: current===0}" @click="onClickItem({currentIndex:0})">密码登录</view>
				<view class="login-tab" :class="{active: current===1}" @click="onClickItem({currentIndex:1})">验证码登录</view>
				<view class="login-tab-indicator" :style="{left: current===0?'0%':'50%'}"></view>
			</view>
			<view class="login-form-wrap">
				<view v-if="current==0">
					<uni-forms ref="form1" :modelValue="formData" label-position="left" :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">
					<uni-forms ref="form2" :modelValue="formData2" label-position="left" :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 class="code-row">
								<view class="code-input">
									<uni-easyinput type="number" v-model="formData2.code" placeholder="请输入验证码" />
								</view>
								<view class="code-btn" @click="getCode">
									<text class="code-btn-text">{{content}}</text>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
			<button class="login-btn" @click="login(current)">登 录</button>
		</view>
		<!-- 下载进度弹窗 -->
		<view v-show="dShow" class="download-mask">
			<view class="download-dialog">
				<view class="download-icon">⬇</view>
				<text class="download-text">下载中 请勿退出</text>
				<view class="download-progress-bar">
					<view class="download-progress-fill" :style="{width: percentVal+'%'}"></view>
				</view>
				<text class="download-percent">{{percentVal}}%</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '/utils/config';
	import { auth } from '@/utils/auth.js'
	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)
								auth.setPermissions(Object.keys(res.perms))
								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)
									auth.setPermissions(Object.keys(res.perms))
									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)
								auth.setPermissions(Object.keys(res.perms))
								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)
								auth.setPermissions(Object.keys(res.perms))
								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 lang="scss" scoped>
.login-page {
	min-height: 100vh;
	background: linear-gradient(180deg, #14694A 0%, #1F8C5E 35%, #F5FAF7 40%);
	padding: 0;
}

.login-header {
	position: relative;
	overflow: hidden;
}

.login-banner {
	width: 100%;
	display: block;
	opacity: 0.08;
}

.login-welcome {
	position: absolute;
	bottom: 60rpx;
	left: 48rpx;
}

.login-title {
	display: block;
	font-size: 48rpx;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: 6rpx;
}

.login-subtitle {
	display: block;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 12rpx;
}

.login-card {
	margin: -40rpx 32rpx 0;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 44rpx 32rpx;
	box-shadow: 0 12rpx 40rpx rgba(25, 27, 35, 0.06);
	position: relative;
	z-index: 2;
}

.login-tabs {
	display: flex;
	position: relative;
	margin-bottom: 40rpx;
	border-bottom: 2rpx solid #C4C6D0;
	padding-bottom: 0;
}

.login-tab {
	flex: 1;
	text-align: center;
	font-size: 30rpx;
	color: #74777F;
	padding-bottom: 20rpx;
	transition: color 0.3s;
	&.active {
		color: #2BA471;
		font-weight: 600;
	}
}

.login-tab-indicator {
	position: absolute;
	bottom: 0;
	width: 50%;
	height: 5rpx;
	background: linear-gradient(90deg, #2BA471, #2BA471);
	border-radius: 4rpx;
	transition: left 0.3s ease;
}

.login-form-wrap {
	margin-bottom: 32rpx;
}

.code-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.code-input {
	flex: 1;
}

.code-btn {
	min-width: 180rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2BA471, #1F8C5E);
	border-radius: 12rpx;
	padding: 0 20rpx;
}

.code-btn-text {
	color: #FFFFFF;
	font-size: 24rpx;
	white-space: nowrap;
}

.login-btn {
	width: 100% !important;
	height: 92rpx;
	line-height: 92rpx;
	background: linear-gradient(135deg, #2BA471, #1F8C5E) !important;
	color: #FFFFFF !important;
	font-size: 33rpx;
	font-weight: 700;
	letter-spacing: 8rpx;
	border: none !important;
	border-radius: 16rpx !important;
	box-shadow: 0 8rpx 24rpx rgba(43, 164, 113, 0.2);
	margin-top: 16rpx;
	&:active {
		opacity: 0.85;
		transform: scale(0.98);
	}
}

.download-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.download-dialog {
	background: #fff;
	border-radius: 24rpx;
	padding: 48rpx 40rpx;
	width: 560rpx;
	text-align: center;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}

.download-icon {
	font-size: 64rpx;
	margin-bottom: 20rpx;
}

.download-text {
	display: block;
	font-size: 30rpx;
	color: #191B23;
	margin-bottom: 24rpx;
}

.download-progress-bar {
	height: 12rpx;
	background: #C4C6D0;
	border-radius: 6rpx;
	overflow: hidden;
	margin-bottom: 16rpx;
}

.download-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #2BA471, #1F8C5E);
	border-radius: 6rpx;
	transition: width 0.3s;
}

.download-percent {
	font-size: 28rpx;
	color: #2BA471;
	font-weight: 600;
}
</style>