<template>
	<view class="newlogin">
		<view class="status_bar"></view>
		<view class="newlogin_img_area">
			<image class="newlogin_img" src="../../static/newlogin.png" mode="widthFix"></image>
		</view>

		<view class="mt-50 mlr-60 card_area">
			<view class="flex-n fac card_area_item">
				<view class="card_icon iconfont iconren"></view>
				<view class="flex-n fac ml-19 card_content flex-1">
					<z-input class="card_input  flex-1" align="left" v-model="loginName" placeholder="请输入手机号码">
					</z-input>
				</view>

			</view>
			<view class="flex-n fac card_area_item mt-20">
				<view class="card_icon iconfont iconsuotou"></view>
				<view class="flex-n fac ml-19 card_content flex-1">
					<z-input :type="switchSave?'':'password'" align="left" class="card_input  flex-1 mr-20"
						v-model="passWord" placeholder="请输入密码"></z-input>
					<switch :checked="switchSave" @change="changeswitchSave" />
				</view>
			</view>
		</view>
		<z-button width="630" class="mt-70" @click="login">登 录</z-button>
		<view class="forget_pass mt-60" @click="gotoForgetPage">
			忘记登录密码
		</view>
		<z-message></z-message>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		data() {
			return {
				switchSave: false,
				loginName: '',
				passWord: ''
			};
		},
		methods: {
			login() {
				var that = this;
				this.$axios.post('app/account/login', {
					loginName: this.loginName,
					passWord: this.passWord
				}).then(res => {
					console.log(res.data)
					console.log(app.globalData)
					app.globalData.authorization = res.data.Authorization;

					uni.setStorage({
						key: 'roleId',
						data: res.data.roleId
					})
					console.warn(uni.getStorageSync('storeId'))
					app.globalData.userId = res.data.userId;
					uni.setStorage({
						key: 'userInfo',
						data: res.data
					})
					uni.setStorage({
						key: 'loginName',
						data: that.loginName
					})

					uni.setStorage({
						key: 'passWord',
						data: that.passWord
					})
					this.$store.state.dicChange = true;
					this.getData(res.data.userId);
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					})
				})

			},
			getData(id) {
				console.log(id)
				this.$axios.get('app/user/userInfo/' + id).then(res => {
					let storeId = '';
					if (uni.getStorageSync('userInfo').storeId) {
						storeId = uni.getStorageSync('userInfo').storeId;
					} else {
						storeId = res.data.store[0].storeId || ''
					}
					uni.setStorage({
						key: 'storeId',
						data: storeId
					})
					console.log(res)
					uni.setStorage({
						key: 'storeInfo',
						data: res.data
					})
					uni.switchTab({
						url: '../book/index/index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
				})
			},
			changeswitchSave(e) {
				this.switchSave = e.detail.value;
			},
			gotoForgetPage() {
				uni.navigateTo({
					url: '../center/setting/forgetpass',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.newlogin {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: url(../../static/login_bg.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: left bottom;

		.status_bar {
			height: var(--status-bar-height);
		}

		.newlogin_img_area {
			text-align: center;

			.newlogin_img {
				width: 453rpx;
				margin-top: 100rpx;
			}
		}

	}

	.card_area {
		.card_area_item {
			height: 100rpx;
		}

		.card_icon {
			min-width: 40rpx;
			font-size: 40rpx;
			color: #2481EE;
		}

		.card_content {

			border-bottom: 1px solid #B8B8B8;
		}

		.card_input {
			padding: 20rpx 0;
		}
	}

	.forget_pass {
		font-size: 24rpx;
		color: #2481EE;
		text-align: center;
	}
</style>
