<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: "",
				Password: "",
				// openId:"",
				// uniunId:"",
			});
			let data = reactive({
				phoneNum: "",
				openid: "",
				code: "",
				show: false,
				showVisitor: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('/AppletLogin/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);
						}
					})
				},
				login2() {
					uni.login({
						provider: 'weixin',
						success: async (loginRes) => {
							let code = loginRes.code
							data.code = code
						}
					});
				},
				//获取手机号
				getphonenumber(e) {
					if (e.detail.encryptedData && e.detail.iv) {
						let encryptedData = e.detail.encryptedData;
						let iv = e.detail.iv;
						that.parsePhoneNum(encryptedData, iv, data.code)
					} else {
						Toast.fail("授权失败,请重新授权")
					}
				},
				//解密手机号
				async parsePhoneNum(encryptedData, iv, code) {
					let res = await parsePhone({
						encryptedData,
						iv,
						code
					})
					if (res && res.Data.phoneNumber) {
						data.phoneNum = res.Data.phoneNumber
						data.openid = res.Data.openid
						that.phoneNumLogin()
					} else {
						Toast.fail("授权失败,请重新授权")
					}
				},
				//手机号授权登录
				async phoneNumLogin() {
					let res = await phoneLogin({
						Account: data.phoneNum,
						OpenId: data.openid
					})
					if (res) {
						res.Data.Account = data.phoneNum;
						uni.setStorageSync("userInfo", res.Data);
						Toast.success("登录成功");
						setTimeout(() => {
							let data = uni.getStorageSync("userInfo");
							if (data) {
								that.jumpPage();
							}
						}, 1000);
					}
				},
				async login3() { //游客登录
					data.show = false
					let temporarydh = uni.getStorageSync("temporarydh")
					if (temporarydh) {
						let msg = {
							Account: temporarydh.Account,
							OpenId: temporarydh.OpenId,
							unionid: temporarydh.unionid,
							WeChatName: temporarydh.WeChatName,
							WeChatPhoto: temporarydh.WeChatPhoto,
							IsVisitor: 1,
						}
						let res = await phoneLogin(msg)
						if (res) {
							res.Data.Account = data.phoneNum;
							uni.setStorageSync("userInfo", res.Data);
							Toast.success("登录成功");
							setTimeout(() => {
								let data = uni.getStorageSync("userInfo");
								if (data) {
									that.jumpPage();
								}
							}, 1000);
						}
					} else {
						uni.showToast({
							icon: "none",
							title:"未授权电话,请先点击授权按钮",
							duration:2000,
						})
						// setTimeout(()=>{
						// 	uni.reLaunch({
						// 		url: '/pages/index/index' //没有授权登录
						// 	});
						// },1500)

					}

				},
				againdata() {
					uni.reLaunch({
							url: '/pages/index/index' 
					});
				},
			};
			onMounted(() => {});
			let that = methods;
			return {
				...toRefs(msg),
				...toRefs(data),
				...methods,
			};
		},
		onLoad() {
			//审核用
			this.showVisitor=new Date().getTime()> new Date('2022-03-16').getTime()
		}
	};
</script>

<style scoped>
    .login-Welcome-title{
        font-size: 50rpx;
        font-family: PingFang SC;
        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;
    }
    .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-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
</style>
