	<template>
		<view class="login-container">
			<!-- 顶部渐变背景和标题 -->
			<view class="login-header">
				<view class="login-title">登录注册</view>
				<view class="login-subtitle">欢迎使用数智南川</view>
			</view>
			<!-- 表单区域 -->
			<view class="login-form">
				<view class="input-row">
					<image class="iconfont" src="/static/aidex/login/ic_login_user.png" />
					<input class="login-input" type="text" placeholder="输入账号" v-model="username" />
				</view>
				<view class="input-row">
					<image class="iconfont2" src="/static/aidex/login/ic_login_pwd.png" />
					<input class="login-input" type="password" v-model="password" placeholder="请输入密码" />
				</view>
				<view class="protocol-row">
					<label class="custom-checkbox-label">
						<input type="checkbox" :checked="checked" @change="handleCheckboxChange"
							class="custom-checkbox-input" />
						<image :src="checked ? '/static/ic_login_agree.png' : '/static/ic_login_dis.png'"
							class="custom-checkbox-img" @click="handleCheckboxChange({ target: { checked: !checked }})" />
					</label>
					<text>同意</text>
					<text class="protocol-link">《用户协议》</text>
					<text>和</text>
					<text class="protocol-link">《隐私政策》</text>
				</view>
				<button class="login-btn" @click="submit">登录</button>
			</view>
		</view>
	</template>

	<script>
		// import { globalWs } from '../../../utils/GlobalWebSocket';
		// import socketManager from '@/utils/GlobalWebSocket.js'
		import base64 from '@/common/base64.js';
		export default {
			data() {
				return {
					phoneNo: '',
					username: 'admin',
					password: '',
					loginType: 'currentPhone',
					showPassword: false,
					remember: true,
					isValidCodeLogin: false,
					validCode: '',
					imgValidCodeSrc: null,
					list: [{
						name: '用户名'
					}, {
						name: '手机号'
					}],
					current: 0,
					activeColor: '#007aff',
					checked: false
				}
			},
			onLoad() {
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('default');
				// #endif
			},
			onReady() {
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('landscape-primary');
				// #endif
			},

			methods: {
				// 登录后连接Socket
		
				async submit() {
					if (this.username.length == 0) {
						this.$u.toast('请输入账号');
						return;
					}
					if (this.password.length == 0) {
						this.$u.toast('请输入密码');
						return;
					}
					let res = await this.$u.api.login({
						"tenantId": "000000", // 把单引号换成双引号
						"username": this.username,
						"password": this.password,
						"grantType": "password",
						// "uuid": "7cb3ea4fe2ae4f08bbd561c94ef0191b",
						"clientId": "dab457a1ea14411787c240db05bb0832"
					});
					console.log(res)
					if (res.code == "200") {
						this.$u.toast("登录成功")
						this.$store.commit('$uStore', {
							name: 'vuex_token',
							value: res.data.access_token
						});
						// 连接Socket
						this.$webSocketInit();

						//开启websocket
						// 登录成功后连接WebSocket
						// ws.connect('ws://192.168.71.139:8080/resource/websocket?clientid=e5cd7e4891bf95d1d19206ce24a7b32e&Authorization=Bearer ' +
						// 	this.$store.state.vuex_token,  {
						//   header: {
						//     'Authorization': 'Bearer ' + this.$store.state.vuex_token
						//   },
						//   onOpen: () => {
						//     console.log('连接成功')
						//   },
						//   onMessage: (data) => {
						//     console.log('收到消息', data)
						//     // 处理消息
						//   },
						//   onError: (err) => {
						//     console.error('发生错误', err)
						//   }
						// })
						// ws.connect(
						// 	'ws://192.168.71.139:8080/resource/websocket?clientid=e5cd7e4891bf95d1d19206ce24a7b32e&Authorization=Bearer ' +
						// 	this.$store.state.vuex_token, {
						// 		// 连接成功回调
						// 		onOpen: () => {
						// 			uni.showToast({
						// 				title: 'WebSocket连接成功',
						// 				icon: 'none'
						// 			})
						// 			// 可以发送初始化消息
						// 			ws.send({
						// 				type: 'init',
						// 				userId: res.data.data.userId
						// 			})
						// 		},

						// 		// 收到消息回调
						// 		onMessage: (data) => {
						// 			console.log('收到消息:', data)
						// 			// 根据消息类型处理
						// 			// switch (data.type) {
						// 			// 	case 'notice':
						// 			// 		this.handleNotice(data)
						// 			// 		break
						// 			// 	case 'message':
						// 			// 		this.handleNewMessage(data)
						// 			// 		break
						// 			// }
						// 		},

						// 		// 连接关闭回调
						// 		onClose: () => {
						// 			uni.showToast({
						// 				title: '连接已关闭',
						// 				icon: 'none'
						// 			})
						// 		},

						// 		// 错误回调
						// 		onError: (err) => {
						// 			uni.showToast({
						// 				title: '连接错误',
						// 				icon: 'none'
						// 			})
						// 			console.error('WS错误:', err)
						// 		}
						// 	})


						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/sys/msg/index'
							});
						}, 500);
					} else {

					}
				},

				handleCheckboxChange(e) {
					this.checked = e.target.checked;
				}
			}
		}
	</script>

	<style scoped>
	  * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
			}
			
			body {
				background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
				min-height: 100vh;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 16px;
			}
			
			.login-container {
				width: 100%;
				position: relative;
				border-radius: 24px;
				overflow: hidden;
				box-shadow: 0 20px 40px rgba(46, 108, 246, 0.15);
				transition: all 0.3s ease;
			}
			
			/* 响应式调整 */
			@media (max-width: 600px) {
				.login-container {
					border-radius: 16px;
					max-width: 90%;
				}
			}
			
			@media (max-width: 400px) {
				.login-container {
					max-width: 95%;
				}
			}
			
			.login-header {
				position: relative;
				height: 35vh;
				min-height: 30vh;
				max-height: 35vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: white;
				padding: 20px;
			}
			
			.login-header::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, #2e6cf9 0%, #4fc3f7 100%);
				z-index: 1;
				border-radius: 24px 24px 0 0;
			}
			
			.login-title, .login-subtitle {
				position: relative;
				z-index: 2;
				text-align: center;
			}
			
			.login-title {
				font-size: clamp(28px, 5vw, 36px);
				font-weight: 700;
				margin-bottom: 8px;
			}
			
			.login-subtitle {
				font-size: clamp(14px, 3vw, 18px);
				font-weight: 400;
				opacity: 0.9;
			}
			
			.login-form {
				background: white;
				padding: clamp(20px, 5vw, 30px);
				border-radius: 0 0 24px 24px;
				position: relative;
				z-index: 10;
			}
			
			.input-row {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eaeaea;
				margin-bottom: clamp(15px, 4vw, 25px);
				padding-bottom: 10px;
			}
			
			.input-row:focus-within {
				border-bottom-color: #2e6cf6;
			}
			
			.iconfont, .iconfont2 {
				width: clamp(20px, 4vw, 24px);
				height: clamp(20px, 4vw, 24px);
				margin-right: 12px;
				flex-shrink: 0;
			}
			
			.login-input {
				flex: 1;
				border: none;
				outline: none;
				font-size: clamp(14px, 4vw, 16px);
				color: #333;
				min-width: 0; /* 防止flex项目溢出 */
			}
			
			.login-input::placeholder {
				color: #aaa;
			}
			
			.protocol-row {
				display: flex;
				align-items: center;
				margin: clamp(15px, 4vw, 20px) 0 clamp(20px, 5vw, 30px);
				font-size: clamp(12px, 3vw, 14px);
				color: #666;
				flex-wrap: wrap;
			}
			
			.custom-checkbox-label {
				display: flex;
				align-items: center;
				margin-right: 6px;
				cursor: pointer;
				flex-shrink: 0;
			}
			
			.custom-checkbox-input {
				display: none;
			}
			
			.custom-checkbox-img {
				width: clamp(18px, 4vw, 20px);
				height: clamp(18px, 4vw, 20px);
				margin-right: 6px;
				cursor: pointer;
				flex-shrink: 0;
			}
			
			.protocol-link {
				color: #2e6cf6;
				margin: 0 2px;
				cursor: pointer;
				white-space: nowrap;
			}
			
			.login-btn {
				width: 100%;
				height: clamp(45px, 10vw, 50px);
				background: linear-gradient(90deg, #2e6cf6 0%, #4fc3f7 100%);
				color: white;
				border: none;
				border-radius: clamp(20px, 8vw, 25px);
				font-size: clamp(14px, 4vw, 16px);
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s;
				box-shadow: 0 4px 12px rgba(46, 108, 246, 0.3);
			}
			
			.login-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(46, 108, 246, 0.4);
			}
			
			.login-btn:active {
				transform: translateY(0);
			}
			
	</style>