<template>
	<layout>
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
		<!-- #endif -->
		<view class="wrap">
			<view class="top"></view>
			<view class="content">
				<view class="title">中鼐智能CRM</view>
				<view class="font-size-base text-center text-color-assist mt-1 mb-5 ">实现线索到回款全流程管理</view>

				<view class="text-color-assist mb-2" style="margin-top: 20rpx;">账户</view>
				<uv-input placeholder="请输入账户" prefixIcon="account" border="bottom" v-model="loginForm.username"></uv-input>
				<view class="text-color-assist mt-5 mb-2">密码</view>
				<uv-input placeholder="请输入密码" type="password" prefixIcon="lock" border="bottom"
					v-model="loginForm.password"></uv-input>
				<button @tap="submit" type="primary" class="login" style="margin-top: 60rpx;">立即登录</button>
				<button class="login" open-type="getPhoneNumber" @getphonenumber="quickLoginWithMobileNumber"
					style="background-color: #0abf53;">手机号一键登录</button>
			</view>
			<uv-toast ref="uToast"></uv-toast>
		</view>
	</layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useMainStore
	} from '@/store/store'
	import {
		userLogin,
		quickLogin,
		code2Session
	} from '@/api/auth'
	import * as util from '@/utils/util'
	import {
		mobile as testMobible
	} from '@/uni_modules/uv-ui-tools/libs/function/test'
	import cookie from '@/utils/cookie'
	import router from '@/utils/router'
	const main = useMainStore()
	const title = ref('登录')
	const uToast = ref()

	//手机号密码登录
	const loginForm = ref({
		username: "",
		password: "",
		captchaVerification: "",
		openId: ''
	})

	//授权登录
	const quickLoginData = ref({
		type: 35,
		code: '',
		openId: '',
		unionId: ""
	})

	// 提交
	const submit = () => {
		if (!loginForm.value.username) {
			uToast.value.show({
				message: '请填写账户',
				type: 'error'
			});
			return
		}
		if (!loginForm.value.password) {
			uToast.value.show({
				message: '请填写密码',
				type: 'error'
			});
			return
		}
		login()
	}

	// 登录
	const login = async () => {
		let data = await userLogin(loginForm.value)
		if (data) {
			uni.setStorage({
				key: 'accessToken',
				data: data.accessToken
			});
			main.SET_TOKEN(data.accessToken);
			uToast.value.show({
				message: '登录成功',
				type: 'success'
			});

			setTimeout(function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1000);
		}
	}

	//一键登录
	const quickLoginWithMobileNumber = (res) => {
		if (res.detail.errMsg && res.detail.errMsg == 'getPhoneNumber:fail user deny') {
			uni.showToast({
				title: '您拒绝获取手机号',
				icon: "none"
			});
			return false
		} else {
			quickLoginData.value.code = res.detail.code
			quickLogin(quickLoginData.value).then(res => {
				uni.setStorage({
					key: 'accessToken',
					data: res.accessToken
				});
				main.SET_TOKEN(res.accessToken);
				uToast.value.show({
					message: '登录成功',
					type: 'success'
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000);
			})
		}
	}

	const getOpenId = () => {
		uni.login({
			success: (res) => {
				code2Session({
						code: res.code,
						type: 35
					})
					.then(res => {
						quickLoginData.value.openId = res.openid
						quickLoginData.value.unionId = res.unionid
						loginForm.value.openId = res.openid
					})
			}
		})
	}

	onLoad(() => {
		getOpenId()
	})
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #ffffff;
		font-size: 28rpx;
		position: relative;
		height: 100%;
		padding-bottom: 100rpx;
		min-height: 100vh;

		.content {
			width: 600rpx;
			margin: 0 auto;

			.title {
				text-align: center;
				font-size: 50rpx;
				font-weight: 500;
				padding-top: 100rpx;
				color: #09b4f1;
				font-weight: bolder;
			}

			.login {
				background-color: #09b4f1;
				color: #ffffff;
				border-radius: 50rem !important;
				font-size: 26rpx;
				padding: 8rpx 0;
				margin-top: 36rpx;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $uv-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			bottom: 0;

			.loginType {
				padding: 30rpx 80rpx;
				//justify-content:space-between;

				.login-btn {
					background-color: #1aad19 !important;
					width: 100%;
					font-size: 26rpx;
					border-radius: 50rem !important;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 8rpx 0;
					text-align: center;

					image {
						width: 36rpx;
						height: 30rpx;
						margin-right: 10rpx;
						vertical-align: middle;
					}
				}
			}

			.hint {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $uv-tips-color;

				.link {
					color: $uv-warning;
				}
			}
		}
	}
</style>