<template>
	<view class="body">
		<image src="/static/tab-icon/Starify.png" class="title"/>
		<input type="email" v-model="username" placeholder="输入用户名/手机号/邮箱" class="input"/>
		<input :password="true" v-model="password" placeholder="输入登录密码" class="input"/>
		<view class="find-password">
			<navigator class="text">找回密码</navigator>
		</view>
		<view @click="agree=true" class="agree-radio">
			<radio color="#F09649" class="radio" :checked="agree" />
			<view>我已阅读并同意<navigator class="link">我不会看的用户条款</navigator>。</view>
		</view>
		<button @tap="userLogin()" :class="['button',(username&&password&&agree)?'':'disable']">登录</button>
	</view>
</template>

<script>
	import { login, userInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				agree: false
			};
		},
		methods: {
			/**
			 * 账号密码登录
			 */
			userLogin(){
				if(this.username&&this.password&&this.agree){
					uni.showLoading({
						title: '登录中',
						mask: true
					})
					login(this.username,this.password).then(res=>{
						this.$store.commit('setUserInfo',res)
						return userInfo()
					}).then(res=>{
						this.$store.commit('setUserInfo',res)
						uni.hideLoading()
						uni.navigateBack({
							delta: 1
						})
					}).catch(err=>{
						uni.hideLoading()
						uni.showToast({
							title: '登录失败，请稍后重试。'
						})
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.body{
		padding: 80rpx 40rpx;
		background-color: white;
		.title{
			margin-bottom: 80rpx;
			width: 400rpx;
			height: 100rpx;
		}
		.input{
			font-size: 28rpx;
			margin-top: 36rpx;
			padding: 26rpx 16rpx;
			border-bottom: 1rpx solid #b6b6b6; 
		}
		.find-password{
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-end;
			.text{
				font-size: 26rpx;
				color: #adadad;
			}
		}
		.agree-radio{
			margin-top: 50rpx;
			display: flex;
			gap: 2rpx;
			font-size: 26rpx;
			align-items: center;
			.radio{
				scale: 0.8;
			}
			.link{
				display: inline;
				color: #F09649;
			}
		}
		.button{
			margin-top: 40rpx;
			background-color: #F09649;
			color: white;
			&.disable{
				background-color: #bababa;
			}
		}
	}
</style>