<template>
	<view class="normal-login-container">
		<view style="width: 100%;height: 446rpx;position: relative;"><image src="../static/images/login/bg.png" style="width: 100%;height: 100%;"></image></view>
		<view style="width: 372rpx;height: 401rpx;position: absolute;top: 10rpx;right: 0;">
			<image src="../static/images/login/robot.gif" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="t-login" style="position: absolute;top: 390rpx;">
			<!-- 标题 -->
			<!-- <view class="t-b">登录</view> -->

			<!-- <form class="cl">
				<view class="t-a">
					<image src="../static/images/login/sj.png"></image>
					<view class="line"></view>
					<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
				</view>
				<view class="t-a">
					<image src="../static/images/login/yz.png"></image>
					<view class="line"></view>
					<input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" type="password" v-if="showPwd" />
					<input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" type="text" v-else />
					<image
						:src="showPwd ? seeSrc : noseeSrc"
						style="position: absolute;
									left: 88%;
									top: 28rpx;"
						@click="changePsw"
					></image>
				</view> -->
				<!-- 	<view style="width: 80%;margin: 0px;display: flex;">
					<view class="t-a" v-if="captchaEnabled">
						<image src="../static/images/login/yz.png"></image>
						<view class="line"></view>
						<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
							maxlength="4" />
					</view>
					<view style="width: 20%;margin: 0px;" class="login-code">
						<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
					</view>
				</view> -->

				<!-- //记住密码 -->
				<!-- <view style="margin: 5px auto;">
					<u-checkbox-group>
						<u-checkbox :checked="rememberPsw" v-model="rememberPsw" shape="circle" @change="saveps()" label="记住账号密码"></u-checkbox>
					</u-checkbox-group>
				</view>
				<button @click="handleLogin" style="margin-top: 130rpx;background-color: #2289ff;">登录</button>
			</form> -->
			<!-- <u-loading-page color="#aaaaff" fontSize="20" :loading="xianshiPage" image="/static/images/none.png"
				iconSize="220" loadingText="应急资源模块进入中..."></u-loading-page>
			<u-loading-icon style="height: 90vh" color="#0e0e16" :show="xianshiPage"></u-loading-icon> -->
		</view>
	</view>
</template>

<script>
import { getCodeImg } from '@/api/login';
import { removeuserId } from '@/utils/auth';
import CryptoJS from 'crypto-js';
export default {
	data() {
		return {
			xianshiPage: true,
			showPwd: true,
			rememberPsw: false,
			codeUrl: '',
			captchaEnabled: true,
			// globalConfig: getApp().globalData.config,
			seeSrc: '../static/images/login/cansee.png',
			noseeSrc: '../static/images/login/nosee.png',
			loginForm: {
				cas: '',
				password: '',
				code: '',
				uuid: ''
			},
			pwdFlag: true,
			pwdIcon: '../static/images/login/cansee.png',
			textIcon: '../static/images/login/nosee.png'
		};
	},
	onLoad(options) {
		removeuserId();
	
    let str = this.getRequestParams();
    const params = str.split('&'); // 先用 '&' 分割参数
// 假设第一个参数总是需要的
    const firstParam = params[0].split('='); // 分割第一个参数成键值对
    const firstKey = firstParam[0];
    const firstValue = firstParam[1];

    console.log(firstKey);
    console.log(firstValue);
    this.pwdLogin(decodeURIComponent(firstValue));


	},
	methods: {
		getRequestParams() {
			let url = location.href;
			console.log(url);
			let str = '';
			if (url.indexOf('?') !== -1) {
				str = url.substr(url.indexOf('?') + 1); //截取?后面的内容作为字符串
				console.log(str, '?后面的内容');
				// let strs = str.split('&'); //将字符串内容以&分隔为一个数组
				// console.log(strs, '以&切割的数组');
				// for (let i = 0; i < strs.length; i++) {
				// 	requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				// 	// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
				// }
			}
			// console.log(requestParams, '处理后的对象');
			return str;
		},
		
		//解密算法
		decodeDes(message) {
			const options = uni.getLaunchOptionsSync(); // 获取启动时的参数
			const fromPage = options.path; // 获取来源页面路径（如果有）
			const params = options.query; // 获取 URL 中的 query 参数（如果有）
			console.log('00+fromPage',fromPage);
			console.log(message);
			console.log('11');
			//秘钥
			// com.ocse.http://www.key
			// let aseKey = 'the_1234';
			let aseKey = 'com.ocse.www.key';
			let decrypt = CryptoJS.DES.decrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
				mode: CryptoJS.mode.ECB,
				padding: CryptoJS.pad.Pkcs7
			}).toString(CryptoJS.enc.Utf8);

			return decrypt;
		},
		changePsw() {
			this.showPwd = !this.showPwd;
		},
		saveps() {
			this.rememberPsw = !this.rememberPsw;
			this.setPsw();
		},
		//记住密码操作
		setPsw() {
			//写在OBJECT参数名是success的登录请求里面
			if (this.rememberPsw) {
				//用户勾选“记住密码”
				// console.log('记住密码');
				uni.setStorageSync('Phone', this.loginForm.username);
				uni.setStorageSync('userPwd', this.loginForm.password);
				uni.setStorageSync('rememberPsw', this.rememberPsw);
			} else {
				//用户没有勾选“记住密码”
				// console.log('没有记住密码');
				uni.removeStorageSync('Phone');
				uni.removeStorageSync('userPwd');
				uni.removeStorageSync('rememberPsw');
				this.loginForm.Phone = '';
				this.loginForm.userPwd = '';
			}
		},
		// 隐私协议
		handlePrivacy() {
			let site = this.globalConfig.appInfo.agreements[0];
			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
		},
		// 用户协议
		handleUserAgrement() {
			let site = this.globalConfig.appInfo.agreements[1];
			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
		},
		// 获取图形验证码

		// 登录方法
		async handleLogin() {
			if (this.loginForm.username === '') {
				this.$modal.msgError('请输入您的账号');
			} else if (this.loginForm.password === '') {
				this.$modal.msgError('请输入您的密码');
			}
			// else if (this.loginForm.code === '' && this.captchaEnabled) {
			// 	this.$modal.msgError('请输入验证码');
			// } else {
			this.$modal.loading('登录中，请耐心等待...');
			this.pwdLogin();
			// }
		},
		// 密码登录
		async pwdLogin(cas) {
			this.loginForm.cas = cas;
			// this.loginForm.cas = this.decodeDes(cas);
			this.$store
				.dispatch('Login', this.loginForm)
				.then(() => {
					this.xianshiPage = false;
					this.$modal.closeLoading();
					// 登录成功后，处理函数
					this.loginSuccess();
				})
				.catch(() => {
					// if (this.captchaEnabled) {
					// 	this.getCode();
					// }
				});
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then(res => {
				console.log(this.$store.getters.userId);
				//链接websocket
				// this.$store.dispatch('websocketInit');
				//开屏提示消息
				// this.$store.dispatch('getNewsList');
				//获取app是否更新的
				this.$store.dispatch('getNewsApplist');
				this.$tab.reLaunch('/pages/index');
				//获取消息条数
				this.$store.dispatch('getNewsListOne');
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -1;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 100%;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		border-radius: 76rpx;
		overflow: hidden;
		padding: 40rpx;
		background-color: #fff;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	//验证码图片
	.login-code {
		height: 38px;
		float: right;

		.login-code-img {
			height: 90rpx;
			position: absolute;
			margin-left: 10px;
			width: 200rpx;
		}
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 35rpx;
		font-family: Noto Sans S Chinese;
		font-weight: 500;
		color: #212121;
		padding: 30rpx 0 30rpx 10rpx;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	// .logo-content {
	// 	width: 100%;
	// 	font-size: 21px;
	// 	text-align: center;
	// 	padding-top: 15%;

	// 	image {
	// 		border-radius: 4px;
	// 	}

	// 	.title {
	// 		margin-left: 10px;
	// 	}
	// }
	// 原本css
	// .login-form-content {
	// 	text-align: center;
	// 	margin: 20px auto;
	// 	margin-top: 15%;
	// 	width: 80%;

	// 	.input-item {
	// 		margin: 20px auto;
	// 		background-color: #f5f6f7;
	// 		height: 45px;
	// 		border-radius: 20px;

	// 		.icon {
	// 			font-size: 38rpx;
	// 			margin-left: 10px;
	// 			color: #999;
	// 		}

	// 		.input {
	// 			width: 100%;
	// 			font-size: 14px;
	// 			line-height: 20px;
	// 			text-align: left;
	// 			padding-left: 15px;
	// 		}
	// 	}

	// 	.login-btn {
	// 		margin-top: 40px;
	// 		height: 45px;
	// 	}

	// 	.xieyi {
	// 		color: #333;
	// 		margin-top: 20px;
	// 	}

	// 	.login-code {
	// 		height: 38px;
	// 		float: right;

	// 		.login-code-img {
	// 			height: 38px;
	// 			position: absolute;
	// 			margin-left: 10px;
	// 			width: 200rpx;
	// 		}
	// 	}
	// }
}
</style>
