<template>
	<view class="login-bg">
		<view class="margin bg-fff padding-xl radius shadow-warp bg-white margin-top">
			<!-- 图标 -->
			<view class="text-center">
				<image class="avatar" src="./avatar.png"></image>
			</view>
			<!-- 账号密码 -->
			<view class="login_form">
				<view class="login_form_input">
					<view name="username">
						<uni-easyinput v-model="form.username" prefixIcon="person" placeholder="请输入登录用户名"></uni-easyinput>
					</view>
					<view name="password" style="margin-top: 10upx;">
						<uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入登录密码"></uni-easyinput>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<button class="btn" type="primary" @click="onLogin()">登录</button>
		<navigator url="xxxx" style="margin: 10rpx 40rpx; color: deepskyblue;display: none;">前往注册</navigator>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				baseUrl: "http://192.168.3.23:8086",
				form: {
					username: 'shenmu',
					password: 'shenmu123'
				},
				userInfo: {},
				proList: []
			}
		},
		methods: {
			async onLogin() {
				const res = await this.$API.call({
					url: '/auth/login2',
					data: this.form,
					method: 'POST',
					cb: (res) => {
						if (res.data && res.data.token) {
							this.userInfo = res.data
							uni.setStorageSync('userInfo', JSON.stringify(res.data))
							uni.showToast({
								title: '登录成功'
							})
							this.getProList()
						}
					}
				})
				// uni.request({
				// 	url: this.baseUrl + '/auth/login',
				// 	method: "POST",
				// 	header: {
				// 		'Accept':'application/json, text/plain, */*'
				// 	},
				// 	data: this.form,
				// }).then(result => {
				// 	let [error, res] = result
				// 	if (res.data && res.data.token) {
				// 		this.userInfo = res.data
				// 		uni.setStorageSync('userInfo', JSON.stringify(res.data))
				// 		uni.showToast({
				// 			title: '登录成功'
				// 		})
				// 		this.getProList()
				// 	}
				// })
			},
			goToPage() {
				// 跳转页面
				uni.switchTab({
					url:"/pages/tabBar/monitor/userCenter",
					fail(err) {
						console.log(err)
					}
				})
			},
			async getProList() {
				const res = await this.$API.call({
					url: '/api/static',
					cb: (res) => {
						if (res.data) {
							let list = res.data.proListInfo || []
							this.proList = list.map(item=>{
								return {
									value: item.proId,
									text: item.proName
								}
							})
							uni.setStorageSync('proList', JSON.stringify(this.proList||[]))
							uni.setStorageSync('currProInfo', JSON.stringify(this.proList[0]||{}))
							this.goToPage()
						}
					}
				})
				// uni.request({
				// 	url: this.baseUrl + '/api/static',
				// 	method: "get",
				// 	header: {
				// 		'Accept':'application/json, text/plain, */*',
				// 		'Authorization':'Bearer '+this.userInfo.token
				// 	}
				// }).then(result => {
				// 	let [error, res] = result
				// 	if (res.data && res.data.code==200) {
				// 		let list = res.data.data.proListInfo||[]
				// 		this.proList = list.map(item=>{
				// 			return {
				// 				value: item.proId,
				// 				text: item.proName
				// 			}
				// 		})
				// 		uni.setStorageSync('proList', JSON.stringify(this.proList||[]))
				// 		uni.setStorageSync('currProInfo', JSON.stringify(this.proList[0]||{}))
				// 		this.goToPage()
				// 	}
				// })
			}
		}
	}
</script>
 
<style lang="scss">
	page {
		width: 100%!important;
		height: 100%!important;
	}
	.login-bg {
		background-image: url('~@/pages/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;
	}
	.btn {
		width: 200upx;
		height: 100upx;
		// background-color: #89AB9E;
		color: #eee;
	}
	.text-center {
		width: 100%;
		text-align: center;
	}
	.avatar {
		width: 150upx;
		height: 150upx;
		border-radius: 5%;
		margin-top: 250upx;
	}
 
	.login_form {
		// background-color: #89AB9E;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30upx 8%;
		margin-top: 50upx;
	}
 
	.login_form_name {
		width: 25%;
		color: #445b53;
	}
 
	.login_form_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 30upx 0upx;
		margin: 0upx auto;
	}
</style>