<template>
	<view class="status-bar"></view>
	<view class="login-container page-container">
		<view class="login-card">
<!-- 			<view class="conner conner-tl"></view>
			<view class="conner conner-tr"></view>
			<view class="conner conner-bl"></view>
			<view class="conner conner-br"></view> -->
			<view class="login-header">
				<view class="login-header-logo">
					<view class="icon-wrapper">
						<view class="iconfont icon-brain-2-fill danao-style"></view>
					</view>
					<text>YXD</text>
				</view>
				<view class="sub-title">File Handling Chat</view>

			</view>
			<!-- 表单 -->
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label">
						<!-- <uni-icons type="person" size="24" color="#aaaaff"></uni-icons> -->
						<text>用户名</text>
					</view>
					<input class="form-input" :class="{focused: isUsernameFocused, error: isUsernameError}"
						v-model="UsernameValue" @focus="usernameFocused" @blur="handleUsernameBlur"
						@input="validateUsername" placeholder="请输入用户名" />
				</view>
				<view class="form-item">
					<view class="form-label">
						<!-- <uni-icons type="locked" size="24" color="#aaaaff"></uni-icons> -->
						<text>密码</text>
					</view>
					<input type="password" class="form-input"
						:class="{focused: isPasswordFocused, error: isPasswordError}" v-model="PasswordValue"
						@focus="passwordFocused" @blur="handlePasswordBlur" placeholder="请输入密码" />
				</view>
				<text v-if="formDataHasNull" class="error-info">用户名或密码不能为空</text>
				<view class="form-option">
					<view class="checkbox-wrapper" @click="form.remember = !form.remember">
						<view class="checkbox" :class="{ checked: form.remember}">
							<text v-if="form.remember">✓</text>
						</view>
						<text class="checkbox-text">记住密码</text>

					</view>
					<text class="forget-pwd">忘记密码？</text>
				</view>
				<button class="login-btn" :disabled="loading" :loading="loading"
					@click="handleLogin">{{loading ? 'Loading...' : '登录'}}</button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		login
	} from '../../utils/cloud-api';

	// 表单用户名变量
	const UsernameValue = ref('');
	const isUsernameFocused = ref(false);
	const isUsernameError = ref(false)
	const usernameFocused = () => {
		isUsernameFocused.value = true;
		formDataHasNull.value = false;
	}
	const handleUsernameBlur = () => {
		isUsernameFocused.value = false;
	}
	// 用户名实时校验
	const validateUsername = () => {
		// if (UsernameValue.value && UsernameValue.value.length < 3) {
		// 	isUsernameError.value = true;
		// } else {
		// 	isUsernameError.value = false;
		// }
	};
	// 表单密码变量
	const PasswordValue = ref('');
	const isPasswordFocused = ref(false);
	const isPasswordError = ref(false);
	const passwordFocused = () => {
		isPasswordFocused.value = true;
		formDataHasNull.value = false;
	}
	const handlePasswordBlur = () => {
		isPasswordFocused.value = false;
	}

	// 表单数据
	const form = reactive({
		username: computed(() => UsernameValue.value),
		password: computed(() => PasswordValue.value),
		remember: true
	})
	// 登录状态
	const loading = ref(false)

	//用户名密码是否非空
	const formDataHasNull = ref(false)
	const handleLogin = async() => {
		checkFormData();
		if (formDataHasNull.value) return
		loading.value = true
		try {
			const token = await login(UsernameValue.value, PasswordValue.value)
			// 登陆成功,保存登录数据到手机
			console.log("有返回token：", token);
			saveLoginInfo();
			uni.reLaunch({
				url: '/pages/Chat/Chat'
			})
		} catch(err) {
			console.log('登录失败',err);
			if (err && typeof err === 'object' && err.serverError) {
				uni.showModal({
					title: '提示',
					content: err.message,
					showCancel: false,
					confirmText: '知道了'
				})
			} else {
				uni.showToast({
					title: err?.message || err || '失败',
					icon: 'error'
				})
			}
		}finally {
			loading.value = false
		}


	}

	// 检查用户名或密码是否为空
	const checkFormData = () => {
		if (!UsernameValue.value || !PasswordValue.value) {
			formDataHasNull.value = true;
		}
	}

	// 保存登录信息到手机
	const saveLoginInfo = () => {
		if (form.remember) {
			const loginInfo = {
				username: form.username,
				password: form.password,
				remember: true
			}
			uni.setStorageSync('login_info', loginInfo)
			uni.setStorageSync('chatType', 0)
		} else {
			uni.removeStorageSync('login_info')
		}
	}

	// 从手机加载登录消息
	const loadLoginInfo = () => {
		try {
			const loginInfo = uni.getStorageSync('login_info')
			if (loginInfo) {
				UsernameValue.value = loginInfo.username || '';
				PasswordValue.value = loginInfo.password || '';
				form.remember = loginInfo.remember ?? true;
			}
		} catch (e) {
			console.error('读取登录信息失败', e)
		}
	}

	onMounted(() => {
		loadLoginInfo();
	})
</script>

<style scoped>
	.login-container {
		padding: 120rpx 50rpx 80rpx 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(160deg, #f0f2ff 0%, #f5f3f8 30%, #faf9fe 60%, #f5f4ff 100%);
	}

	.login-card {
		position: relative;
		flex: 1;
		width: 100%;
		max-width: 640rpx;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
		box-shadow: 0 16rpx 48rpx rgba(100, 100, 180, 0.1);
		border: 1rpx solid rgba(170, 170, 255, 0.15);
	}

	.conner {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
	}

	.conner-tl {
		top: 0;
		left: 0;
		border-top: 2px solid #aaaaff;
		border-left: 2px solid #aaaaff;
	}

	.conner-tr {
		top: 0;
		right: 0;
		border-top: 2px solid #aaaaff;
		border-right: 2px solid #aaaaff;
	}

	.conner-bl {
		bottom: 0;
		left: 0;
		border-bottom: 2px solid #aaaaff;
		border-left: 2px solid #aaaaff;
	}

	.conner-br {
		bottom: 0;
		right: 0;
		border-bottom: 2px solid #aaaaff;
		border-right: 2px solid #aaaaff;
	}

	.login-header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.login-header-logo {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-header-logo text {
		margin-left: 12rpx;
		font-size: 56rpx;
		font-weight: 800;
		color: #6c63ff;
		letter-spacing: 2rpx;
	}

	.icon-wrapper {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 238, 255, 0.8));
		display: flex;
		align-items: center;
		justify-content: center;
		animation: glow 2.5s ease-in-out infinite;
		box-shadow: 0 4rpx 16rpx rgba(108, 99, 255, 0.12);
	}

	@keyframes glow {
		0%, 100% {
			box-shadow: 0 4rpx 16rpx rgba(108, 99, 255, 0.12);
		}
		50% {
			box-shadow: 0 4rpx 24rpx rgba(108, 99, 255, 0.25),
				0 0 50rpx rgba(108, 99, 255, 0.12);
		}
	}

	.icon-wrapper .danao-style {
		font-size: 64rpx;
		color: #6c63ff;
	}

	.sub-title {
		margin-top: 16rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #888;
		letter-spacing: 1rpx;
	}

	.form-wrapper {
		margin-top: 50rpx;
		width: 100%;
		max-width: 500rpx;
		padding: 60rpx 36rpx 36rpx;
		background: rgba(170, 170, 255, 0.04);
		border-radius: 28rpx;
		border: 1rpx solid rgba(170, 170, 255, 0.1);
		display: flex;
		flex-direction: column;
	}

	.form-item {
		margin-top: 20rpx;
	}

	.form-label {
		font-size: 26rpx;
		font-weight: 500;
		color: #555;
		margin-bottom: 8rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.form-item .form-input {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		border: 2rpx solid #e8e8f0;
		background: rgba(255, 255, 255, 0.8);
		font-size: 28rpx;
		color: #333;
		transition: all 0.25s ease;
	}

	.form-item .form-input::placeholder {
		color: #c0c0d0;
	}

	.form-item .focused {
		border-color: #6c63ff;
		background: #ffffff;
		box-shadow: 0 0 0 6rpx rgba(108, 99, 255, 0.06);
	}

	.form-item .error {
		border-color: #ff4d4f;
		box-shadow: 0 0 0 6rpx rgba(255, 77, 79, 0.06);
	}

	.error-info {
		font-size: 22rpx;
		color: #ff4d4f;
		margin-top: 8rpx;
		padding-left: 8rpx;
	}

	.form-option {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form-option .checkbox-wrapper {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.form-option .checkbox-wrapper .checkbox {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #d4d4e0;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease;
		background: #fff;
	}

	.form-option .checkbox-wrapper .checkbox text {
		color: #ffffff;
		font-size: 22rpx;
	}

	.form-option .checkbox-wrapper .checked {
		background: linear-gradient(135deg, #6c63ff, #4a45d1);
		border-color: #6c63ff;
	}

	.form-option .checkbox-wrapper .checkbox-text {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #666;
	}

	.form-option .forget-pwd {
		font-size: 26rpx;
		color: #6c63ff;
		font-weight: 500;
	}

	:deep(.login-btn) {
		margin-top: 36rpx;
		width: 100%;
		max-width: 500rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: linear-gradient(135deg, #6c63ff, #4a45d1);
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		box-shadow: 0 8rpx 24rpx rgba(108, 99, 255, 0.3);
		transition: all 0.2s ease;
		border: none;
	}

	:deep(.login-btn:active) {
		transform: scale(0.97);
		box-shadow: 0 4rpx 12rpx rgba(108, 99, 255, 0.2);
	}

	:deep(.login-btn[disabled]) {
		opacity: 0.7;
		background: linear-gradient(135deg, #a8a4f0, #8a86d8);
	}
</style>