<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: 30rpx">
				<up-input fontSize="30rpx" v-model="dataFrom.phone" placeholder="请输入您的手机号" border="bottom" clearable></up-input>
			</view>
			<view style="margin-bottom: 30rpx; display: flex; align-items: center">
				<up-input fontSize="30rpx" v-model="dataFrom.smsCode" placeholder="请输入验证码" border="bottom" clearable></up-input>
				<up-code ref="uCode" @change="codeChange2" keep-running start-text="点我获取验证码"></up-code>
				<text @click="getCode2" :text="tips" style="font-size: 28rpx; color: #4874e5">{{ tips }}</text>
			</view>
		</view>
		<view style="display: flex; justify-content: center; margin-top: 80rpx">
			<view class="login_btn" @click="submit">确认</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { forgotUserName, smsCode } from '@/api/api.js';
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let tips = ref('');
let uCode = ref(null);
let dataFrom = reactive({
	phone: '',
	smsCode: '',
});

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

let codeChange2 = (text) => {
	tips.value = text;
};

let getCode2 = () => {
	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
	if (uCode.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		});
		smsCode({
			phone: dataFrom.phone
		}).then((res) => {
			uni.hideLoading();
			uni.$u.toast('验证码已发送');
			uCode.value.start();
		});
	} else {
		uni.$u.toast('倒计时结束后再发送');
	}
};

let submit = async () => {
	if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
	if (dataFrom.phone.length != 11) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
	if (!dataFrom.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
	let _res = await forgotUserName(dataFrom);
	if (_res.userNames.length == 0) {
		uni.showModal({
			title: '提示',
			content: '该手机号还未注册',
			showCancel: false,
			confirmText: "我知道了"
		})
	} else {
		uni.showModal({
			title: '已找回的用户名',
			content: _res.userNames.join(','),
			showCancel: false,
			confirmText: "确认",
			success: () => {
				uni.setClipboardData({
					data: _res.userNames.join(','), //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '已复制用户名'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				});
			}
		})
	}
};

let back = () => {
	uni.navigateBack();
};
</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>
