<template>
	<view class="login-box">
        <view class="login-background"></view>
        <view class="login-content">
            <view class="login-Welcome">
                <view class="login-Welcome-title">Welcome to</view>
                <view class="login-Welcome-text">
                    <van-image width="85rpx" height="78rpx" fit="cover" class="img"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653459608000_450.png" />
                    <view>进阶思维</view>
                </view>
            </view>
            <view class="login-title">
                账号登录
            </view>
			<view style="margin:60rpx auto;text-align: center;">
				<div style="display: inline-block;" @click="changeTypeHandler(1)">
					<image :class="{'login-grey-avatar':userLoginType==2}" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894192000_645.png" mode="widthFix" style="width:142rpx;"></image>
					<view style="color: #282828;font-size: 24rpx;font-weight: 800;">
						学员
					</view>
				</div>
				<div style="display: inline-block;margin-left:148rpx;" @click="changeTypeHandler(2)">
					<image :class="{'login-grey-avatar':userLoginType==1}" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894197000_691.png" mode="widthFix" style="width:142rpx;"></image>
					<view style="color: #282828;font-size: 24rpx;font-weight: 800;">
						教师
					</view>
				</div>
			</view>
            <view class="main">
                <van-cell-group>
                    <van-field :value="Account" placeholder="请输入预留手机号" clearable input-align="center" @input="usernameInput">
                    </van-field>
                    <van-field :value="Password" v-if="userLoginType==2" password placeholder="请输入密码" clearable input-align="center" @input="passwordInput">
                    </van-field>
                </van-cell-group>
            </view>
            <view class="btnBox" @click="login">
                <van-loading color="#f5f5f5" v-if="loading" />
				<text v-else>立即登录</text>
            </view>
            <view class="login-bottom">
                <view class="login-bottom-text" @click="back">返回</view>
                <!-- <view class="login-bottom-text">忘记密码</view> -->
            </view>
        </view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import {
		login,
		phoneLogin,
		parsePhone
	} from "../../api/index";
	import {
		Dialog
	} from '../../wxcomponents/vant/dialog/index';
	import indexassembly from '../index/components/indexassembly.vue'
	export default {
		components:{
			indexassembly
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let Toast = inject("$toast");
			let msg = reactive({
				Account: "",
				Password: "",
			});
			let data = reactive({
				phoneNum: "",
				openid: "",
				code: "",
				show: false,
				userLoginType:1, //1为学员，2为老师
				loading:false
			});

			let methods = {
				changeTypeHandler(t){
					data.userLoginType=t
					if(t==1){
						msg.Password =''
					}
				},
				usernameInput(val) {
					msg.Account = val.detail;
				},
				passwordInput(val) {
					msg.Password = val.detail;
				},
				back() {
					uni.navigateTo({
                        url: '/pages/login/login'
                    });
				},
				jumpPage() {
					uni.reLaunch({
						url: data.userLoginType==1?"/pages/index/index":'/pages/index/workSituation',
					});
					//clearTimeout();
				},
				async login() {
					if(data.loading) return;
					data.loading=true
					if (msg.Account == "" || !msg.Account) {
						Toast.fail("请输入账号");
						data.loading=true
						return;
					}
					if ((msg.Password == "" || !msg.Password) && data.userLoginType==2) {
						Toast.fail("请输入密码");
						data.loading=true
						return;
					}
					let url=data.userLoginType==2?'/Login/Login':'/Login/LoginByAccount'
					msg.AccountType=data.userLoginType==2?1:2;
					let res = await this.$request(url, msg).then(res=>{
						if(res.Code==1){
							if((res.Data.AccountType==1 && data.userLoginType==2) ||res.Data.AccountType==2 && data.userLoginType==1){
								res.Data.Account = msg.Account;
								uni.setStorageSync("userInfo", res.Data);
								Toast.success("登录成功");
								setTimeout(() => {
									let data = uni.getStorageSync("userInfo");
									if (data) {
										that.jumpPage();
									}
								}, 1000);
							}else{
								data.loading=false
								Toast.fail("账号类型选择错误，请根据真实身份选择")
							}
						}
					}).catch(e=>{
						data.loading=false
					})
				},
			};
			onMounted(() => {});
			let that = methods;
			return {
				...toRefs(msg),
				...toRefs(data),
				...methods,
			};
		},
		onLoad() {
			
		}
	};
</script>

<style scoped>
    .login-Welcome-title{
        font-size: 50rpx;
        color: #FFFFFF;
        margin-bottom: 33rpx;
        font-weight: 300;
    }
    .login-Welcome-text .img{
        display: inline-block;
        margin-top: 14rpx;
    }
    .login-Welcome-text view{
        font-family: PingFang-SC;
        font-size: 80rpx;
        color: #FFFFFF;
        margin-left: 21rpx;
        font-weight: 800;
    }
    .login-Welcome-text{
        display: flex;
        align-items: center;
    }
    .login-Welcome{
        position: absolute;
        top: -261rpx;
    }
    .login-bottom .login-bottom-text:first-child{
        /* border-right: 1rpx solid #E1E1E1;
        padding: 0 110rpx 0 0; */
        padding: 0 110rpx;
    }
    .login-bottom-text{
        padding: 0 0 0 110rpx;
        color: #414141;
        display: inline-block;
    }
    .login-bottom{
        margin-bottom: 100rpx;
        text-align: center;
    }
    .login-title{
        font-size: 50rpx;
        font-family: PingFang-SC;
        font-weight: bold;
        margin-bottom: 74rpx;
        color: #282828;
    }
    .login-content{
        position: relative;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #F6F6F6;
        border-radius: 50rpx 50rpx 0 0;
        padding: 60rpx 66rpx 0 66rpx;
    }
    .login-background{
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background: -moz-linear-gradient(top, #C41726 0%, #831D1C 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C41726), color-stop(100%,#831D1C));
		background: -webkit-linear-gradient(top, #C41726 0%,#831D1C 100%);
		background: -o-linear-gradient(top, #C41726 0%,#831D1C 100%);
		background: -ms-linear-gradient(top, #C41726 0%,#831D1C 100%);
		background: linear-gradient(top bottom, #C41726 0%,#831D1C 100%);
	}
	.login-grey-avatar{
		-webkit-filter: grayscale(100%); 
	}
    .main {
		height: 250rpx;
		box-sizing: border-box;
		vertical-align: middle;
		padding: 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/deep/.van-cell {
		height: 88rpx;
        border-radius: 44rpx;
        margin-bottom: 45rpx;
	}

	.btnBox {
		width: 280rpx;
		height: 88rpx;
		border-radius: 44rpx;
		overflow: hidden;
		margin: 0 auto;
        margin-top: 26rpx;
		margin-bottom: 30rpx;
		background-color: #C91727;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		/* line-height: 88rpx; */
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}
</style>
