<template>
	<view class="container">
		<view class="container_text">
			<image class="banner-img" src="../../static/img/login-title.png" mode="widthFix"></image>
			<view class="title-img">
				<image class="title-image" src="../../static/img/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="login_text">
			<view class="login_input flex">
				<view class="login_img">
					<image src="../../static/img/user.png" mode="widthFix"></image>
				</view>
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" />
				</view>
			</view>
			<view class="login_input flex">
				<view class="login_img">
					<image src="../../static/img/pwd.png" mode="widthFix"></image>
				</view>
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus
						placeholder="请输入密码" /></view>
			</view>
			<navigator url="./forget">
				<view class="forget">忘记密码？</view>
			</navigator>
			<view><button type="green" class="btn" @click="toLogin">登录</button></view>
			<navigator url="./register">
				<view class="register">还没有账号？<text>立即注册</text></view>
			</navigator>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		login
	} from '@/api/login.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	// #ifdef APP-PLUS
	// applelogin接口需要开发编写，基础项目中可能没有
	import {
		applelogin
	} from '@/api/set.js';
	// loginWx接口需要开发编写，基础项目中可能没有
	import {
		loginWx
	} from '@/api/login.js';
	// #endif
	// #ifdef H5
	import {
		loginWinxin
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		data() {
			return {
				username: '',
				passward: '',
				// #ifdef APP-PLUS
				is_ios: false, //判断是否为ios手机
				is_apple_login: false //是否有ios授权登录功能
				// #endif
			};
		},
		onLoad() {
			let obj = this;
			// #ifdef APP-PLUS
			let system = uni.getStorageSync('platform');
			// 判断是否为ios
			if (system == 'ios') {
				obj.is_ios = true;
			}
			uni.getSystemInfo({
				success(e) {
					if (+e.system.split('.')[0] >= 13) {
						obj.is_apple_login = true;
					}
				}
			});
			// #endif
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			// 微信登录
			wecahtLogin(type) {
				let obj = this;
				// #ifdef H5
				let weichatBrowser = uni.getStorageSync('weichatBrowser');
				if (weichatBrowser) {
					loginWinxin();
				}
				// #endif
				// #ifdef APP-PLUS
				uni.login({
					provider: type,
					success(e) {
						uni.getUserInfo({
							provider: type,
							success(es) {
								if (type === 'weixin') {
									loginWx(es.userInfo)
										.then(e => {
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);
												//成功跳转首页
												uni.switchTab({
													url: '/pages/index/index'
												});
											});
										})
										.catch(e => {
											console.log(e);
											uni.showModal({
												content: JSON.stringify(e),
												success() {},
												fail() {}
											});
										});
								}
								if (type === 'apple') {
									console.log(es.userInfo);
									applelogin({
											account: es.userInfo.openId
										})
										.then(function(e) {
											console.log(e, 'token');
											uni.setStorageSync('token', e.data.token);
											getUserInfo({}).then(e => {
												obj.login();
												// 保存返回用户数据
												obj.setUserInfo(e.data);
												//成功跳转首页
												uni.switchTab({
													url: '/pages/index/index'
												});
											});
										})
										.catch(function(e) {
											console.log(e);
										});
								}
							},
							fail(es) {
								uni.showModal({
									content: JSON.stringify(es),
									success() {
										// obj.login();
										// // 保存返回用户数据
										// obj.setUserInfo(e.data);
										// //成功跳转首页
										// uni.switchTab({
										// 	url: '/pages/index/index'
										// });
									}
								});
							}
						});
					},
					fail(e) {
						uni.showModal({
							title: '提示',
							content: JSON.stringify(e),
							showCancel: false
						});
					}
				});
				// #endif
			},
			//登录
			async toLogin() {
				let obj = this;
				obj.logining = true;
				if (obj.username == '') {
					obj.$api.msg('请输入手机号');
					return;
				}
				if (obj.passward == '') {
					obj.$api.msg('请输入密码');
					return;
				}
				login({
						account: obj.username,
						password: obj.passward
					})
					.then(function(e) {
						console.log(e.data.token, '123456');
						uni.setStorageSync('token', e.data.token);
						// obj.$store.commit('hasLogin', true);
						getUserInfo({}).then(e => {
							obj.login();
							// 保存返回用户数据
							obj.setUserInfo(e.data);
							// let ur = uni.getStorageSync('present')|| '/pages/index/index';
							//成功跳转首页
							uni.switchTab({
								url: '/pages/index/index'
								// fail(e) {
								// 	uni.navigateTo({
								// 		url: ur,
								// 		fail(e) {
								// 			uni.navigateTo({
								// 				url: '/pages/index/index',
								// 			});
								// 		}
								// 	});
								// }
							});
						});
					})
					.catch(function(e) {
						console.log(e);
					});
			},
			//跳转注册页
			register() {
				uni.navigateTo({
					url: `/pages/public/register`
				});
			},
			// 后退
			navBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #ffffff;
	}

	.container {
		width: 100%;
		height: 100%;
		background-size: 100%;
	}

	.container_text {
		position: relative;
		width: 100%;
		top: 0rpx;

		.banner-img {
			width: 100%;
			height: 100%;
		}

		.title-img {
			position: absolute;
			left: 50%;
			top: 100rpx;
			margin-left: -74rpx;
			width: 148rpx;

			.title-image {
				width: 148rpx;
			}
		}
	}

	.login_text {
		position: relative;
		padding: 100rpx 102rpx;
		background-color: #ffffff;

		.login_input {
			margin-top: 20rpx;
			padding: 26rpx;
			width: 528rpx;
			background: #EFF2F6;
			border-radius: 21rpx;

			.login_img {
				width: 30rpx;
				flex-shrink: 0;

				image {
					width: 100%;
				}
			}

			.uni-input {
				text-align: left;
				width: 470rpx;
				font-size: 28rpx !important;
			}

			.login_name {
				margin-left: 20rpx;
				color: #333333;
			}
		}

		.forget {
			padding-right: 20rpx;
			margin-top: 30rpx;
			font-size: 28rpx;
			width: 100%;
			text-align: right;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #2E58FF;

			background: linear-gradient(0deg, #CA57DC 0%, #65B2E9 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.register {
			margin-top: 20rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2E58FF;

				background: linear-gradient(0deg, #CA57DC 0%, #65B2E9 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.btn {
			width: 528rpx;
			height: 83rpx;
			background: linear-gradient(90deg, #CA57DC, #65B2E9);
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #F6F8FA;
			margin-top: 70rpx;
		}
	}

	.loginTitle {
		position: absolute;
		top: 270rpx;
		width: 100%;
		text-align: center;
		color: white;
		font-size: 40rpx;
	}
</style>