<template>
	<view class="login">

		<u-navbar v-if="uniMP" @leftClick="leftClick" bgColor="rgba(0,0,0,0)" leftIconColor=" #fff" :autoBack="false">
		</u-navbar>

		<!-- #ifdef APP-PLUS||H5 -->
		<view style="height: var(--status-bar-height)"></view>
		<!-- #endif -->
		<view class="body">
			<view class="title">欢迎进入里海供销平台！</view>
			<view class="login-card">
				<view class="login-card-img">
					<image src="@/static/images/logo.png" mode=""></image>
				</view>
				<view class="top">

					<input @click="getId" class="mobile item" v-model="formData.account" type="tel" placeholder="输入账号"
						placeholder-style="font-size:10rpx;" />
					<input style="width: 0;height: 0;opacity: 0;margin: 0;padding: 0;" v-model="formData.account"
						type="tel" placeholder="输入账号" placeholder-style="font-size:10rpx;padding-left:15rpx;" />
					<input @click="getId" class="mobile item" v-model="formData.password" maxlength="26"
						placeholder="输入密码" password type="safe-password" placeholder-style="font-size:10rpx;" />

				</view>
				<button class="submit_btn" @click="login">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginAccount,
		userInfo
	} from "@/api/oaUser.js"

	import {
		Toast
	} from "../../libs/uniApi";
	import bj from "@/static/animation/bj2.json"
	import encrypt from "@/utils/encrypt.js"
	// #ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush");

	// #endif


	export default {
		data() {
			return {
				options: {
					data: '',
				},
				uniMP: false,
				APP_token: '',
				tabList: [{
						name: '账号登录'
					},
					// {name:'手机登录'},
				],
				current: 0,
				formData: {
					account: '',
					password: '',

					// code: '',
					// terminal: 6, //6是APP端
					// scene: 1,
					// register_id: "",
					// shop_token: ""
				},
				tips: '获取验证码',
				// refCode: null,
				seconds: 60,
			};
		},
		onLoad() {
			this.APP_token = uni.getStorageSync('APP_token');
			this.options.data = bj;
			// this.$refs.lottie.call('play');

		},
		onShow() {
			if (uni.getStorageSync('uniMP')) this.uniMP = true;
		},
		methods: {
			changeTabs(e) {
				this.current = e.index;
				this.formData.scene = e.index + 1;
			},
			leftClick(e) {
				uni.sendHostEvent('closeApp', e, (ret) => {
					//发送消息成功回调
					console.log('关闭应用' + JSON.stringify(ret));
				});
			},
			// 获取设备id
			// 获取设备id
			getId() {
				// #ifdef APP-PLUS
				if (this.formData.register_id) return
				jpushModule.initJPushService()
				jpushModule.getRegistrationID(result => {
					console.log("设备----", result)
					// 绑定极光设备id
					this.formData.register_id = result.registerID 
					console.log("设备----", this.formData)
				})
				// #endif

				// #ifdef H5
				this.formData.register_id = 1
				// #endif

			},
			async login() {

				if (!this.formData.account) return Toast('账号不能为空');
				
				if (this.formData.scene == 1 && !this.formData.password) return Toast('密码不能为空');
				if (this.formData.scene == 2 && !this.formData.code) return Toast('验证码不能为空');

				let that = this;
				// uni.showLoading({
				// 	title: '正在登录中'
				// })
				console.log(that.formData)
				let res = await loginAccount(that.formData);
				// console.log(res)
				encrypt.encode('ACT', that.formData);

				this.$store.commit('SET_USERINFO', {
					user: res.data,
					token: res.data.token
				})
				// let {
				// 	data
				// } = await userInfo();

				// console.log(data, '11111111')
				// this.$store.commit('setUserInfo', data);
				uni.hideLoading()
				if (res.data.token) {
					// console.log('111111111')
					uni.reLaunch({
						url: '/pages/index/index'
					})

					// uni.showLoading({
					// 	mask: true,
					// 	title: '加载中'
					// })
					// return uni.redirectTo({
					// 	url: '/pages/index/index',
					// 	success: () => {

					// 		uni.hideLoading()
					// 	}
					// })
					// #ifdef APP-PLUS
					// return uni.switchTab({
					// 	url: '/pages/index/index',
					// 	success: () => {
					// 		uni.$emit('initOaTask'); // 更新任务
					// 		uni.hideLoading()
					// 	}
					// })
					// // #endif
					// return uni.reLaunch({
					// 	url: '/pages/index/index',
					// 	success: () => {
					// 		uni.$emit('initOaTask'); // 更新任务
					// 		uni.hideLoading()
					// 	}
					// })
				}
			},

			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			//忘记密码
			forgetPWD() {
				Toast('暂未开放')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		width: 100vw;
		position: relative;
		overflow: hidden;
		background-color: #0022c7;


		.body {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;

			.login-card-img {
				width: 90rpx;
				height: 90rpx;
				background-color: #ffffff;
				border-radius: 50%;
				font-size: 20rpx;

				margin-top: -40rpx;

				image {

					width: 68rpx;
					height: 68rpx;
					margin-left: 13rpx;
					margin-top: 10px;


				}
			}

			.title {
				width: 694rpx;
				height: 74rpx;

				margin-bottom: 29rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 68rpx;
				-webkit-background-clip: text;
				margin-bottom: 54rpx;
				text-align: center;
			}

			::v-deep uni-input {
				min-height: 0 !important;
				padding-left: 15rpx;

			}

			.login-card {
				width: 374rpx;
				height: 223rpx;
				background: #ffffff;
				border-radius: 21rpx 21rpx 21rpx 21rpx;
				opacity: 1;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 30rpx;
				justify-content: space-between;

				.top {
					display: flex;
					justify-content: space-evenly;
					flex-direction: column;

					.item {
						margin-bottom: 15rpx;
					}

					.text {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.8);
						line-height: 35rpx;
					}

					.mobile,
					.code {

						width: 268rpx;
						height: 29rpx;
						background: #f5f5f5;
						border-radius: 56rpx 56rpx 56rpx 56rpx;
						opacity: 1;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: 400;
						color: #333;
						line-height: 29rpx;
						font-size: 12rpx;
					}

					.code {
						display: flex;
						justify-content: space-between;
						align-items: center;

						input {
							font-size: 28rpx;
						}

						.get-code {
							color: $theme-oa-color;
						}
					}

					.btn {
						display: flex;
						justify-content: space-between;
					}
				}

				.submit_btn {
					width: 192rpx;
					height: 28rpx;
					background: #0022C7;

					border-radius: 29rpx 29rpx;
					text-align: center;
					line-height: 28rpx;
					font-size: 13rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;


				}
			}
		}
	}
</style>