<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 class="main">
                <van-cell-group>
                    <van-field :value="Account" placeholder="请输入用户名" clearable input-align="center" @input="usernameInput">
                    </van-field>
                    <van-field :value="Password" password placeholder="请输入密码" clearable input-align="center" @input="passwordInput">
                    </van-field>
                </van-cell-group>
            </view>
            <view class="btnBox" @click="login">
                立即登录
            </view>
            <view class="login-bottom">
                <view class="login-bottom-text" @click="back">返回</view>
                <!-- <view class="login-bottom-text">忘记密码</view> -->
            </view>
        </view>
	</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: "13880093563",
				Password: "093563",
			});
			let data = reactive({
				phoneNum: "",
				openid: "",
				code: "",
				show: false,
			});

			let methods = {
				usernameInput(val) {
					msg.Account = val.detail;
				},
				passwordInput(val) {
					msg.Password = val.detail;
				},
				back() {
					uni.navigateTo({
                        url: '/pages/login/login'
                    });
				},
				jumpPage() {
					uni.reLaunch({
						url: "/pages/index/index",
					});
					clearTimeout();
				},
				async login() {
					if (msg.Account == "" || !msg.Account) {
						Toast.fail("请输入账号");
						return;
					}
					if (msg.Password == "" || !msg.Password) {
						Toast.fail("请输入密码");
						return;
					}
					let res = await this.$request('/Login/Login', msg).then(res=>{
						if(res.Code==1){
							res.Data.Account = msg.Account;
							uni.setStorageSync("userInfo", res.Data);
							Toast.success("登录成功");
							setTimeout(() => {
								let data = uni.getStorageSync("userInfo");
								if (data) {
									that.jumpPage();
								}
							}, 1000);
						}
					})
				},
			};
			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: 136rpx;
        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%);
	}

    .main {
		height: 250rpx;
		box-sizing: border-box;
		padding: 0 0;
	}
	/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: 110rpx;
		background-color: #C91727;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
</style>
