<template>
	<view class="login-page">
		<!-- 自定义头部 -->
		<view class="header">
			<image class="header-bg" src="./header_bg.png" />
			<view class="header-content">
				<image class="header-logo" src="/static/logo201.png" mode="widthFix" />
				<text class="header-title">欢迎登录楚江销售系统</text>
			</view>
		</view>

		<!-- 表单区 -->
		<view class="form">
			<view class="input-item">
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" placeholder-style="color:#aaa;" maxlength="30" />
			</view>
			<view class="input-item">
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" placeholder-style="color:#aaa;" maxlength="20" />
			</view>
			<view class="input-row" v-if="captchaEnabled">
				<input v-model="loginForm.captcha" type="text" class="input" placeholder="请输入验证码" placeholder-style="color:#aaa;" maxlength="4" />
				<image :src="codeUrl" @click="getCode" class="captcha-img" />
			</view>

			<view class="agree-row">
				<uni-data-checkbox v-model="agreeVal" :localdata="agreeOptions" :multiple="true" />
				<text @click="handleUserAgrement" class="link">《用户协议》</text>
				<text @click="handlePrivacy" class="link">《隐私协议》</text>
			</view>

			<button @click="handleLogin" :disabled="Array.isArray(agreeVal) ? agreeVal.length===0 : !agreeVal" class="login-btn">立即登录</button>

			<view class="reg text-center" v-if="register">
				<text class="text-grey1">没有账号？</text>
				<text @click="handleUserRegister" class="text-blue">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCodeImg } from '@/api/login'
	import config from '@/config'
	export default {
		data() {
			return {
				//获取配置文件对象
				globalConfig: getApp().globalData.config,
				codeUrl: "",
				captchaEnabled: false,
				agreeVal: [],
				agreeOptions: [{ text: '已预览并同意', value: '1' }],
				// 用户注册开关
				register: false,
				//默认登录账号和密码
				loginForm: {
					username: getApp().globalData.config.loginInfo.userName,
					password: getApp().globalData.config.loginInfo.password,
					captcha: "",
					sn: ''
				}
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			// 用户注册
			handleUserRegister() {
				this.$tab.redirectTo('/pages/register')
			},
			// 隐私协议
			handlePrivacy() {
				let site = this.globalConfig.appInfo.agreements[0]
				this.$tab.navigateTo('/pages/common/webview/index?title=' + site.title + '&url=' + site.url)
			},
			// 用户协议
			handleUserAgrement() {
				let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo('/pages/common/webview/index?title=' + site.title + '&url=' + site.url)
			},
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = res.data.image
						this.loginForm.sn = res.data.sn
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else if (this.loginForm.captcha === "" && this.captchaEnabled) {
					this.$modal.msgError("请输入验证码")
				} else {
					this.$modal.loading("登录中，请耐心等待...")
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				this.$tab.reLaunch('/pages/index/index')
			}
		}
	}
</script>

<style scoped lang="scss">
  page { background-color: #fff; }

  .login-page { width: 100%; height: 100%; }

  .header {
    position: relative;
    height: 500rpx;
    overflow: hidden;
	&-bg {
		width: 100%;
		height: 100%;
	}
	&-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 192rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	&-logo {
		width: 298rpx; height: 120rpx;
		margin-bottom: 60rpx;
	}
	&-title {
		height: 60rpx;
		font-weight: 600;
		font-size: 44rpx;
		color: rgba(0,0,0,0.9);
		line-height: 60rpx;
	}
  }

  .form {
    margin: 34rpx auto 0;
    width: 626rpx;
  }
  .input-item {
    margin-bottom: 40rpx;
    background-color: #fff;
    border: 1px solid #F1F1F1;
    height: 96rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
  }
  .input { width: 100%; font-size: 32rpx; padding: 0 24rpx; }
  .input-row {
    margin: 30rpx auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    height: 88rpx;
    border-radius: 18rpx;
  }
  .captcha-img { width: 200rpx; height: 88rpx; border-left: 1px solid #e5e7eb; }

  .agree-row { 
		display: flex; 
		align-items: center; 
		color: rgba(0,0,0,0.9); 
		margin-top: 8rpx; 
		font-size: 28rpx; 
		
		.link {
			color: #3D48A3;
		}
	}

  .login-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 8rpx;
    margin-top: 64rpx;
    background-color: #3D48A3;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
  }
  .login-btn[disabled] { 
		background-color: rgba(61,72,163,0.5);
		color: #fff;
   }

  .reg { margin-top: 20rpx; text-align: center; }
</style>