<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image class="image" style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			</image>
			<text class="title">MES移动端登录</text>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" @confirm="handleLogin" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" @confirm="handleLogin" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="input-item flex align-center" style="margin: 20px auto 0;" v-if="captchaEnabled">
				<view class="iconfont icon-code icon"></view>
				<input v-model="loginForm.code" @confirm="handleLogin" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
				<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
			</view>
			<!-- <u-cell-group :border="false">
				<u-cell :title="typeTitle" @click="show=!show" :isLink="true" arrow-direction="down"></u-cell>
				<u-picker :show="show" :columns="columns" :closeOnClickOverlay="true" @cancel="typeCancel"
					@confirm="typeConfirm" @close="typeClose"></u-picker>
			</u-cell-group> -->
			<view class="flex align-center">
				<!-- 		<checkbox-group @change="checkboxChange">
			<checkbox  id="chkRem" type="checkbox"  :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>
			记住账号密码
		</checkbox-group> -->
				<uni-data-checkbox multiple v-model="value" :localdata="range"
					@change="checkboxChange"></uni-data-checkbox>
			</view>

			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
		</view>

		<view class="list-cell list-cell-arrow" @click="handleBaseUrl">
			<view class="menu-item-box">
				<view class="iconfont icon-refresh menu-icon"></view>
				<view>配置服务器地址</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
				@confirm="confirm">
				<uni-row>
					<uni-col>
						<uni-easyinput type="text" v-model="baseUrl" placeholder="请输入服务器地址" />
					</uni-col>
					<!-- <uni-col>
					<uni-easyinput type="text" v-model="baseUrl" placeholder="请输入MES服务器地址" />
				</uni-col>
				<uni-col>
					<uni-easyinput type="text" v-model="wmsUrl" placeholder="请输入WMS服务器地址" />
				</uni-col> -->
				</uni-row>
			</uni-popup-dialog>
		</uni-popup>
		<!-- <view class="xieyi text-center">
      <text class="text-grey1">登录即代表同意</text>
      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
    </view> -->
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		<view> <span class="version">版本 {{version}}</span></view>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		getCodeImg
	} from '@/api/login'
	import {
		version
	} from "vue"
	export default {
		data() {
			return {
				typeTitle: '常规功能',
				show: false,
				columns: [
					['常规功能', 'ESOP', 'IPC']
				],
				version: "",
				value: [0],
				range: [{
					"value": 0,
					"text": "记住账号密码"
				}],
				baseUrl: uni.getStorageSync('base_url'),
				// wmsUrl: uni.getStorageSync('wms_url'),
				codeUrl: "",
				captchaEnabled: true,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "",
					password: "",
					code: "",
					uuid: '',
				},
				rememberPsw: true,
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					icon: 'list',
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/images/esop.png',
						selectedIconPath: '/static/images/esop.png',
						text: 'ESOP',
						active: false
					},
					{
						iconPath: '/static/images/ipc.png',
						selectedIconPath: '/static/images/ipc.png',
						text: 'IPC',
						active: false
					}
				]
			}
		},
		mounted() {
			this.version = uni.getAppBaseInfo(version).appVersion;
			//缓存的账号
			const HBusername = uni.getStorageSync('HBusername');
			//缓存的密码
			const HBpassword = uni.getStorageSync('HBpassword');
			// console.log("缓存的账号:" + HBusername)
			// console.log("缓存的密码:" + HBpassword)
			//有缓存就赋值给文本没有就清空
			if (HBusername && HBpassword) {
				this.loginForm.username = HBusername;
				this.loginForm.password = HBpassword;
			} else {
				this.loginForm.username = '';
				this.loginForm.password = '';
			}
		},
		created() {
			this.getCode()
		},
		onLoad() {
			//检测更新
			// const type = uni.getSystemInfoSync().platform
			// console.log(type, '机型')
			// // #ifdef APP-PLUS
			// plus.screen.lockOrientation('default');
			// // #endif
		},
		// 页面关闭时清除横屏正方向
		// onUnload() {
		// 	// #ifdef APP-PLUS
		// 	plus.screen.lockOrientation('portrait-primary');
		// 	// #endif
		// },
		methods: {
			trigger(e) {
				const _this = this;
				console.log(e)
				_this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您确定进入${e.item.text}页面吗？`,
					success: function(res) {
						if (res.confirm) {
							if (e.index == 0) {
								_this.$tab.reLaunch('/pages/work/esop')
							} else if (e.index == 1) {
								console.log(2)
								_this.$tab.reLaunch('/pages/work/ipc')
							}
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			fabClick() {
				// uni.showToast({
				// 	// title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })
			},
			// 隐私协议
			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.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.loginForm.uuid = res.uuid
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else if (this.loginForm.code === "" && 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) {
				// 设置用户信息
				if (this.rememberPsw) {
					uni.setStorageSync('HBusername', this.loginForm.username);
					uni.setStorageSync('HBpassword', this.loginForm.password);
				} else { //销毁缓存
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');
				}
				this.$store.dispatch("GetAreaOptions");
				this.$store.dispatch("GetShelvesOptions");
				this.$store.dispatch("GetLocationOptions");
				this.$store.dispatch("GetWarehouseOptions");
				this.$store.dispatch('GetInfo').then(res => {
					// this.$tab.redirectTo('/pages/work/esop')
					// if (this.typeTitle == '常用功能') {
					this.$tab.reLaunch('/pages/index')
					// } else if (this.typeTitle == 'ESOP') {

					// } else if (this.typeTitle == 'IPC') {
					// }
				})
			},
			handleBaseUrl() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirm() {
				// 输入框的值
				uni.setStorageSync('base_url', this.baseUrl)
				// uni.setStorageSync('wms_url',this.wmsUrl)
				console.log(uni.getStorageSync('base_url'));
				// console.log(uni.getStorageSync('wms_url'));
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			//复选框
			checkboxChange: function(e) {
				if (e.detail.value.length == 1) {
					//获取缓存的账号 赋值
					uni.getStorageSync('HBusername', this.loginForm.username);
					uni.getStorageSync('HBpassword', this.loginForm.password);
				} else { //销毁
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');
				}
			},
			typeCancel() {
				this.show = false;
			},
			typeConfirm(e) {
				console.log(this.baseUrl.slice(0, -1) + '3')
				this.typeTitle = e.value[0];
				this.show = false;
			},
			typeClose() {
				this.show = false;
			}
		}
	}
</script>

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

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			// text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 15px;
				height: 45px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}

	.version {
		position: fixed;
		text-align: center;
		bottom: 30rpx;
		left: 0;
		right: 0;
	}

	@media screen and (min-width: 600px) and (orientation:landscape) {
		::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
			width: 30px;
			height: 30px;
		}

		::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {
			height: 20px;
			width: 10px;
			left: 9px;
		}

		::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
			font-size: 24px
		}

		.title {
			font-size: 45px
		}

		.image {
			width: 200px !important;
			height: 200px !important;
		}

		.normal-login-container {
			width: 100%;

			.logo-content {
				width: 100%;
				font-size: 21px;
				text-align: center;
				padding-top: 10%;

				image {
					border-radius: 4px;
				}

				.title {
					margin-left: 10px;
				}
			}

			.login-form-content {
				// text-align: center;
				margin: 20px auto;
				// margin-top: 15%;
				width: 80%;

				.input-item {
					margin: 20px auto;
					background-color: #f5f6f7;
					height: 80px;
					border-radius: 20px;

					.icon {
						font-size: 40px;
						margin-left: 10px;
						color: #999;
					}

					.input {
						width: 100%;
						font-size: 30px;
						line-height: 40px;
						text-align: left;
						padding-left: 15px;
					}

				}

				.login-btn {
					margin-top: 15px;
					height: 80px;
					font-size: 40px;
				}

				.xieyi {
					color: #333;
					margin-top: 20px;
				}
			}

			.easyinput {
				width: 100%;
			}

			.menu-item-box {
				font-size: 30px
			}

			.menu-icon {
				font-size: 40px;
			}

			.version {
				font-size: 30px;
			}

			::v-deep .uni-popup-dialog {
				width: 800px;
			}

			::v-deep .uni-dialog-title-text {
				font-size: 30px;
			}

			::v-deep .uni-easyinput__content-input {
				width: 700px;
				font-size: 30px
			}

			::v-deep .content-clear-icon {
				font-size: 40px !important;
			}

			::v-deep .uni-dialog-button-text {
				font-size: 30px;
			}

			::v-deep .uni-dialog-button {
				height: 70px;
			}

			// .uni-fab__content .uni-fab__content--right .uni-fab__content--other-platform{
			// 	width: 300px;
			// 	height: 80px;
			// }

			// uni-fab__content uni-fab__content--right uni-fab__content--other-platform

			// .uni-fab__item-image{
			// 	width: 80px;
			// 	height: 50px;
			// }

			// .uni-fab__item{
			// 	width: 100px;
			// 	height: 50px;
			// }

			// .uni-fab__item-text{
			// 	font-size: 24px;
			// 	margin-right: 15px;
			// }
		}

		.login-code-img {
			height: 80px;
		}


	}
</style>