<template>
	<view class="bg-image">
		<navigator url="../config/config" hover-class="navigator-hover">
			<image class="logo" src="/static/logo.png"></image>
		</navigator>

		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>

		<view style="margin-top:90rpx;margin-bottom: 90rpx;">
			<view class="diy-flex-column">
				<view class="diy-flex-row">
					<view style="flex: 5;"></view>
					<view style="flex: 15;">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</view>
					<view style="flex: 20;" class="uni-input-wrapper">
						<input class="uni-input" style="font-size: 50rpx;" placeholder="请输入用户名"
							v-model="userName"></input>
					</view>
					<view style="flex: 5;"></view>
				</view>
				<view class="diy-flex-row">
					<view style="flex: 5;"></view>
					<view style="flex: 15;">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</view>
					<view style="flex: 20;" class="uni-input-wrapper">
						<input class="uni-input" style="font-size: 50rpx;" placeholder="请输入密码" :password="showPassword"
							v-model="passWord"></input>
					</view>
					<view style="flex: 5;"></view>
				</view>
			</view>
		</view>

		<view style="margin-top:70rpx;margin-bottom: 20rpx;">
			<button @click="login" style="margin-left: 90rpx;margin-right: 90rpx;" type="default"
				plain="true">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
		</view>
		
		<view style="margin-top:70rpx;margin-bottom: 20rpx;text-align: center;">
			<view >{{serverIPAndPort}}</view>
		</view>

	</view>
</template>

<script>
	import {
		recive
	} from '../../src/libs/Broadcast.js';
	
	import {
		unregisterReceiver
	} from '../../src/libs/Broadcast.js';

	import {
		getConfig
	} from '@/config.js';

	import {
		getServerIPAndPort
	} from '@/config.js';

	import {
		saveConfig
	} from '@/config.js';

	export default {
		data() {
			return {
				title: '登录',
				showPassword: true,
				userName: '',
				passWord: '',
				serverIPAndPort: '',
			}
		},
		onShow: function() {
			this.serverIPAndPort = getServerIPAndPort();
		},
		onLoad: function() {
			//加载上一次的用户名
			//FOR DEBUG
			this.userName = getConfig('userName', 'admin');
			this.passWord = getConfig('passWord', 'admin123');
		},
		onUnload: function() {
			unregisterReceiver()
		},
		methods: {
			login() {
				var serverIPAndPort = getServerIPAndPort();
				console.log('http://' + serverIPAndPort + '/user/userLogin');
				uni.request({
					url: 'http://' + serverIPAndPort + '/user/userLogin', // 请求的接口地址
					method: 'POST', // 设置请求方式为 POST
					data: {
						"username": this.userName,
						"password": this.passWord,
						"deviceType": "PDA"
					},
					header: {
						'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
					},
					success: (res) => {
						// 请求成功的回调函数
						if (res.statusCode === 200) {
							//接口返回数据为200 表示获取成功！
							if (res.data.code == 200) {
								uni.showToast({
									title: '登录成功!',
									icon: 'none',
									duration: 1500
								});
								//保存本次登录使用的用户名 密码
								saveConfig('userName', this.userName);
								saveConfig('passWord', this.passWord);
								
								console.log(res.data.data.getRoles[0].authNames);
								saveConfig('roleName', res.data.data.getRoles[0].authNames);
								
								//重定向 直接就不能返回这个页面了
								uni.redirectTo({
								  url: '/pages/main/main'
								});
							} else {
								uni.showToast({
									title: '获取设备基本信息失败:' + res.data.message,
									icon: 'none',
									duration: 2000
								});
							}

						} else {
							this.text = '服务器返回错误状态码' + res.statusCode;
						}
					},
					fail: (err) => {
						// 请求失败的回调函数
						uni.showToast({
							title: '请求失败:' + err.errMsg,
							icon: 'none',
							duration: 3000
						});
					},
					complete: (event) => {
						// 请求完成的回调函数（无论成功或失败都会调用）
						console.log('请求完成', event);
					}
				});
			},
		}
	}
</script>

<style>
	.uni-input {
		height: 30px;
		line-height: 30px;
		padding: 0px;
		background-color: #FFFFFF;
	}

	.uni-input-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
	}

	.diy-flex-row {
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		font-size: 50rpx;
	}

	.diy-flex-column {
		display: flex;
		flex-direction: column;
	}

	.bg-image {
		background-image: url('/static/background.png');
		/* 背景图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个元素 */
		background-position: center;
		/* 背景图片居中 */
		height: 100%;
		/* 视图高度设置为100% */
		width: 100%;
		/* 视图宽度设置为100% */
		position: fixed;
		/* 视图定位为固定 */
		top: 0;
		left: 0;
		/* z-index: -1; */
	}

	.logo {
		display: flex;
		justify-content: center;
		height: 200rpx;
		width: 200rpx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 55rpx;
		color: #000000;
	}
</style>