<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>

			<!-- 主体表单 -->
			<view class="main" v-if="showLogin">
				<view class="main-list oBorder">
					<input class="main-input" v-model="form.name" focus placeholder="账号" />
				</view>
				<view class="main-list oBorder">
					<input type="password" class="main-input" v-model="form.password" focus placeholder="密码" />
				</view>
				<view class="main-list oBorder">
					<input class="main-input" v-model="form.code" focus placeholder="验证码" />
					<image :src="codeUrl" mode="widthFix" class="img" @tap="getCode"></image>
				</view>
				<button class="cu-btn bg-cyan lg margin-top" @click.native="submit()">登录</button>
				<!-- <button class="cu-btn solid lg margin-top" @click.native="register()">注册</button> -->
			</view>
			<view v-if="!showLogin" class="loading">
				<image :src="loading"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import Auth from "@/api/Auth";
	import { useUserStore } from "@/store/userStore";
	import UserApi from "@/api/UserApi";
	import { getCodeImg, login } from "@/api/Login";
	import { onLoad } from '@dcloudio/uni-app';
	import { useWsStore } from "@/store/WsStore";
	import loading from "@/static/loading.webp";
	import ChatType from '@/utils/ChatType';
	import {useChatStore} from "@/store/chatStore";
	const chatStore = useChatStore();
	const userStore = useUserStore()
	const logoImage = ref('/static/icon.png')
	const form = reactive({
		name: "",
		password: "",
		code: "",
		uuid: "",
	});

	// 验证码开关
	const captchaOnOff = ref(true);
	const codeUrl = ref("");
	const show = ref(false);
	//是否展示登录界面
	const showLogin = ref(false);

	function errorOpt() {
		showLogin.value = true;
		closeWebsocket()
	}

	onLoad((options) => {
		var token = options?.token;
		var id = options?.id;
		if (token != '' && token != undefined) {
			show.value = false;
			Auth.setToken(token);
			return UserApi.currentUser().then(response => {
				const user = response.data;
				userStore.setUser(user);
				uni.setStorageSync('userId', response.data.id)
				// UserApi.getUser(id).then((res) => {
				// 	chatStore.openChat({
				// 		id: res.data.id,
				// 		name: res.data.name,
				// 		avatar: res.data.avatar,
				// 		type: ChatType.FRIEND,
				// 		unreadCount: 0,
				// 		isLoading: false,
				// 		loaded: true,
				// 	});
				// 	uni.navigateTo({
				// 		url: '/pages/chat/chat?id=' + res.data.id + '&type=' + ChatType.FRIEND
				// 	})
				// });
				uni.reLaunch({
					url: "/pages/index/index"
				})
			})

		} else {
			show.value = true;
		}
		Auth.isLogin()
			.then((res) => {
				if (res) {
					UserApi.currentUser()
						.then((res) => {
							userStore.setUser(res.data);
							uni.setStorageSync('userId', res.data.id)
							uni.reLaunch({
								url: "/pages/index/index"
							})
						})
						.catch(() => {
							errorOpt()
						})
				} else {
					errorOpt()
				}
			})
			.catch(() => {
				errorOpt()
			})

	})

	const closeWebsocket = () => {
		//如果回到登录界面，需要关闭websocket链接
		useWsStore().close(true)
	}

	const submit = () => {
		login(form.name, form.password, form.code, form.uuid)
			.then((res : any) => {
				Auth.setToken(res.token);
				return UserApi.currentUser();
			})
			.then((res) => {
				userStore.setUser(res.data);
				uni.setStorageSync('userId', res.data.id)
				uni.reLaunch({
					url: "/pages/index/index"
				})
			});
	}

	const register = () => {
		uni.reLaunch({
			url: "/pages/login/register"
		})
	}

	const getCode = () => {
		getCodeImg().then((res : any) => {
			captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
			if (captchaOnOff.value) {
				codeUrl.value = "data:image/gif;base64," + res.img;
				form.uuid = res.uuid;
			}
		});
	}
	getCode();
</script>

<style>
	@import url('@/static/css/main.css');

	.main-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 80upx;
		/* Input 高度 */
		color: #333333;
		padding: 0 32upx;
		margin-top: 24upx;
		margin-bottom: 24upx;
	}

	.img {
		width: 150upx;
		height: 60upx;
		font-size: 32upx;
		background-color: #eee;
		z-index: 99999999999999;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28upx;
		/* line-height: 100upx; */
		padding-right: 10upx;
		margin-left: 20upx;
	}

	.oBorder {
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 60upx 0 rgba(43, 86, 112, .1);
		box-shadow: 0 0 60upx 0 rgba(43, 86, 112, .1);
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>