<template>
	<view class="login">
		<view class="orderdetail_header p30">
			<view :style="{ height: statusBarHeight }"></view>
			<view style="height: 44px; display: flex; align-items: center">
				<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
			</view>
		</view>

		<image class="login_bei" src="/static/logoB.png"></image>
		<statusBar />
		<view class="login_logo">
			<!-- <image class="login_logo_img" src="/static/logo.png"></image> -->
			<view class="login_logo_tit">欢迎来到充电桩运营系统</view>
		</view>
		<view style="margin-top: 150rpx">
			<view style="margin-bottom: 50rpx">
				<up-input fontSize="30rpx" v-model="dataFrom.userName" placeholder="请输入您的用户名" border="bottom" clearable></up-input>
			</view>
			<view>
				<up-input fontSize="30rpx" v-model="dataFrom.password" type="password" placeholder="请输入您的密码" border="bottom" clearable></up-input>
			</view>
			<!-- 			<view style="display: flex; align-items: center">
				<up-input fontSize="30rpx" v-model="dataFrom.captcha" placeholder="请输入验证码" border="bottom" clearable></up-input>
				<image @click="getCaptcha" :src="captchaImg" style="width: 154rpx; height: 66rpx"></image>
			</view> -->
		</view>
		<view style="font-size: 28rpx; color: #666; margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between">
			<view>
				忘记账号？
				<text style="color: #4874e5" @click="getBackAccout">找回用户名</text>
			</view>
			<view>
				<text style="color: #4874e5" @click="toGetBack">忘记密码</text>
			</view>
		</view>
		<view style="display: flex; justify-content: center; margin-top: 80rpx">
			<view class="login_btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { loginApi, captchaApi, saveOpenIdByWxCode, saveOpenIdByZfbCode } from '@/api/api.js';
import { onLoad } from '@dcloudio/uni-app';
import store from '@/store/index.js';

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let captchaImg = ref('');

let dataFrom = reactive({
	userName: '',
	password: '',
});

let back = () => {
	uni.navigateBack();
};


let toRegister = () => {
	uni.navigateTo({
		url: '/pages/login/register'
	});
};

let getBackAccout = () => {
	uni.navigateTo({
		url: './getBackAccout'
	});
};

let toGetBack = () => {
	uni.navigateTo({
		url: '/pages/login/getBack'
	});
};

let login = async () => {
	try {
		let _res = await loginApi(dataFrom);
		uni.setStorageSync('token', _res.token);
		uni.setStorageSync('user', _res);
		store.commit('setToken', _res.token);
		uni.showToast({ title: '登录成功', icon: 'none' });
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}, 200);
	} catch (err) {
		console.log(err);
		// getCaptcha();
	}
};
</script>

<style scoped lang="scss">
.login {
	padding: 0 60rpx;

	&_bei {
		position: fixed;
		right: 0;
		top: 0;
		width: 608rpx;
		height: 424rpx;
	}

	&_logo {
		margin-top: 150rpx;
		&_img {
			width: 152rpx;
			height: 106rpx;
			// background: #e6e6e6;
			// box-shadow: 0rpx 0rpx 110rpx 2rpx rgba(115, 192, 76, 0.19);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			margin-bottom: 20rpx;
		}
		&_tit {
			font-weight: bold;
			font-size: 44rpx;
			color: #232323;
		}
	}
	&_btn {
		width: 474rpx;
		height: 78rpx;
		background: #4874e5;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #ffffff;
	}
}

.orderdetail_header {
	width: 750rpx;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
}
</style>
