<template>
	<view class="content">
		<view class="loginBox">
			<view class="logo"></view>
			<view class="title">辉南渣土车运输</view>
			<view class="footBox">
				<!-- <u-button class="register" @click="register" shape="circle" color="linear-gradient(to top, #F59A02, #FFD334)">注册</u-button> -->
				<u--form :model="loginForm" ref="uForm" :rules="rules">
					<u-form-item label="" prop="username">
						<u-input class="inputStyle" v-model="loginForm.username" placeholder="请输入用户账号" />
					</u-form-item>
					<u-form-item label="" prop="password">
						<u-input class="inputStyle" type="password" v-model="loginForm.password" placeholder="请输入密码" />
					</u-form-item>
					<u-form-item label="" prop="code" v-if="captchaEnabled">
						
						<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
						<u-input v-model="loginForm.code" type="number" class="inputStyle" placeholder="请输入验证码"
							maxlength="4" />
					</u-form-item>
				</u--form>
				<view class="btBox">
					<text @click="forgetUsername">忘记账号 </text> <text style="margin-left: 10rpx;margin-right: 10rpx">|</text>
					<text @click="phone"> 忘记密码</text>
				</view>
				<u-button @click="submit" class="mt buttonStyle" shape="circle"
					color="linear-gradient(to top, #F59A02, #FFD334)">登 录</u-button>

				<text class="zcStyle" @click="register">注册账号</text>
			</view>
		</view>
		<tooltipNew :show="show" :auditContent='auditContent' :type='type' @close='close' :phone='phoneCard'></tooltipNew>
	</view>
</template>

<script>
	import {
		getCodeImg,getUserState
	} from '@/api/login'
	export default {
		data() {
			return {
				captchaEnabled: true,
				codeUrl: '',
				// codeUrl: "data:image/gif;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAA8AKADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtrW1ga1hZoIySikkoOeKsCztv+feL/vgU2z/484P+ua/yqyKiMY8q0IjGPKtCIWdr/wA+0P8A3wKeLK1/59of+/YqQVi654t0vw7PbxX8jq02SNiFtoBxk+nWtaWHlWmoU43b6JDaitWbAsrT/n1h/wC/YpwsbT/n1g/79isa48Z+H7WxF2+q2zRsMqI3DMf+AjmtPSdXs9ZsI72ylEkL5wfQjsaqWFqQhzyg0r2vbr2FaGxZFhZ/8+sH/fsU4WFn/wA+kH/fsVz/AIp8a2PhT7N9qt7ibz2I/cgfKB35I/yK3tN1C31OxhvLZiYZl3LuUg49waJYScKUa0o+7LZ+gWjexKNPsv8An0t/+/Y/wpw06y/587f/AL9L/hUpdV6kCuW8RfELR/D06Wx8y8u2/wCWFsAxUerHt9OtFDCzrz5KULvyBqK1Z0406x/587f/AL9L/hThptj/AM+Vv/36X/Cqeg6/YeIdOS+sJd8TcEHhkPoR2NawqJ0fZycJxs0NRi+hXGmWH/Plbf8Afpf8KeNMsP8Anxtv+/S/4VYFDyLGpZ2CqOSScAVHJHsHLHsQjS9P/wCfG2/78r/hTxpWn/8APha/9+V/wridQ+Lfh/T9VNoFubiFG2zXUCBo4z+eT+H4Zrt7DUbTUrWO5tJ45oZAGV0OQRXTWwNWhFSq02k9roS5HsKNK07/AJ8LX/vyv+FOGk6d/wBA+1/78r/hVoU8Vzcsew+WPYqjSdN/6B9p/wB+V/wqtqel6fHpF66WNqrrA5VhCoIO08jitYVV1b/kC3//AF7yf+gmlKMeV6ClGPK9DkrP/jzg/wCua/yqyKr2f/HnB/1zX+VWRTj8KHH4UB6VgavbpKWMkEchK7SWQHj0rocVQ1O2iuLSWKQHa6lSVOCM+h7Gri7O5R454k0HSrO0ubiG3MMmMqA5259ga0fAur3Og+F9RnaMuFPmxxnvxzWfq+ia9cS/Zr7UIpbeJvkkA+Zx2JGOv+eetGn6jcaBcLa6o2+0m4juAOF9iK+sdWpVwf1X2qrSvzWu78q6Jtb91vbZGFkpc1rFnU9Y/wCE3a3F1atZRISYpGbPmN/dHTNblp8RhY3dppFvp8rSLIIpB7D+6B1rnvEljd309rdWpSW3hG4KrZzz29eBTPteo6JOLm2t/tVrNgAfxRk9s+lRFYevThFJPSXLDmtyu/Vvdta2dl27M1T/AFJfiT4gvrrxKLOG5kjt40UKqMQCT1rR0q70jwlZoZp1+03A/eSkbnf/AAWuf8ZWMsrx320iRVAcD0/+tVjwpDa6tFcXF/GlzMT5eH52LjsO31FbTnRq5VSldqnHSaja7lpb5df60Suqj7nrXhaCyjE17YBNl6RK7RnKscYyK69SMV4JY65e/D3U/JVWudFuHLIhPMZ74Pr/ADrWeDVpbtte0TxXcSXE5M0VvP8A6sxk5CEZxx06dfSvIr5alJVJVVyS+GTvr5O17Ndbmin0tqe0ZGK5Xx3HcXvhXULO1yZpYiEAOCTnOPxxXDT6r408Tp9lv54dBsk/10lufnk9QDuJA/ED611PhewvLfTzY3N+dRt1O63uXPz7T/C3Jzjsc9PTArmnh1hbVPaRc007LX8Vp8kx35tLHP6FZyaZ4ag0+e3jH7sidByGJ659a5DwxfXOhfEaGwsbiQ2TXIBj3fLtPJ/LmvUPFVtJZeH7qS2A85UJH9a8i8Bo154t+0yHLopYZ65PFexlc5Tw2LxNV3TTuv7z2ZnNWcUj6ctpRLGGHerIrO0oEWyZ9K0hXy5uOFVdW/5Al/8A9e0n/oJq2Kq6v/yBL/8A69pP/QTUy+Fky+FnJWf/AB5Qf9c1/lVkVXsv+PKD/rmv8qsiiPwoI/ChwqKeHzEIqYU7HFUUcJ4mhk061E8NhNeSM+0JF29z7V59q2sebZTWGraZJaSMN0RPIyOhBr2rULZpEO2uL1fw+178k0QkTOcMM16OBxdChKLqU7tO902mu1un4akSi3szA+HdpNd6VKkuTF5v7rPpjnHtmu8j0DaQQtJ4Z0f7FGqBAqjoAK7FIlAHFY47ErFYmddK3M72HFcqSOC1rw95sB+TPHIxXCJ4W1DT71rnSboQyZ5ikHyt7V7xLbJKmCKxLvQlJLKvNLC42thr+zej3TV0/VMJRUtzx7XNYt7vSJ7PUoTbX6DmEjI3dmU+lWNG0a4vPCtsnmvb3UbGS3lXqme30PcV2mpeGIrydGnto5WQ/KWXOK3NO0DEIDLXbPM4xw6pYePL73M9bpO1rJdn1vftqSoa3Z5iNB1vVnEWuX/+jIf9Xb4G8+p4H+fStXT9D8Q6DKP+EX1RRBIfntrzDKp9Rx/gfrXpEfh1M5IqxHoaxuCorL+1a/w2XJ/Lyrl+7v57j9mivqUM15pi+YFEpQbwhJUNjnBPbNeUXVtD4N1JNQtdJmuLqeTy41RjsBPJGB3PYY7e1e7R2YEO0isq50r9+GVRwcjiubDYl0Z63cXurtJrs7Daua+jzrc6fBMI5I96Btki7WXPYjsa0xWfp8TRxgGtEVzMocKq6v8A8gS//wCvaT/0E1bFVdX/AOQJf/8AXtJ/6CamXwsmXws5Ky/48rf/AK5r/KrIrmYtauYokjVIiEUKMg9vxqT+37r/AJ5w/wDfJ/xrKNaNkZxqxsjpRThXM/8ACQ3f/POD/vk/40v/AAkV3/zzg/75P+NV7aI/bROn2A9aY1rG3VRXOf8ACSXn/PKD/vk/40v/AAkt5/zyg/75P+NHtoh7aJ08UKx9BirAFcj/AMJPe/8APK3/AO+W/wAaX/hKL3/nlb/98t/jR7aIe2ideKdtBrj/APhKr7/nlb/98t/jS/8ACV33/PK2/wC+W/xo9tEPbROrNqjHJWp44lQYArjv+Etv/wDnjbf98t/jS/8ACX6h/wA8bb/vlv8A4qj20Q9tE7YKKeFFcP8A8JhqH/PG1/75b/4ql/4TLUf+eNr/AN8t/wDFUe2iHtondAUeWD1FcN/wmeo/88bX/vhv/iqX/hNdS/54Wn/fDf8AxVHtoh7aJ3iqBUgrgP8AhNtS/wCeFp/3w3/xVL/wnGp/88LT/vhv/iqPbRD20T0EVV1f/kB6h/17Sf8AoJriv+E51P8A54Wn/fDf/FVHc+M9RurWa3eG1CSoyMVVsgEY4+aplWjZilVjZn//2Q==",
				loginForm: {
					// username: '13727526604',
					// password: '123456',
					// username: '13334563434',
					username: '17644019557',
					password: 'Ztc@2022',
					// username: 'as06',
					// password: 'AAAaaaa@',
					code: "",
					uuid: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户账号',
						trigger: ['blur', 'change']
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, ],
					code: [{
						type: 'number',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}, ]
				},
				show: false,
				type: '',
				phoneCard: '0431-8563996',
				auditContent:'',
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			// 获取图形验证码
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					this.rules.code[0].required=this.captchaEnabled;
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res.img
						this.loginForm.uuid = res.uuid
					}
				})
			},
			forgetUsername() {
				this.$tab.navigateTo('/pages/forgetUsername/index')
			},
			// 
			close(is) {
				this.show = false;
				if (this.type === 'type5' && !is) {
					uni.makePhoneCall({
						phoneNumber: this.phoneCard
					});

				}
			},
			register() {
				this.$tab.navigateTo('/pages/register/index')
			},
			phone() {
				this.type = 'type5';
				this.show = true;
			},
			getUserState(){
				getUserState({userName:this.loginForm.username}).then(res => {
					// console.log(res.data.auditFlag: 0,'res');
					if(res.data)
					{
						switch(res.data.auditFlag)
						{
							case 0: 
							this.type='type1';
							this.show = true;
							break;
							case -1:
							this.type='type3';
							this.show = true;
							this.auditContent=res.data.auditContent
							break;
							case 1:
							this.pwdLogin()
							break;
							default:
						}
					}
					
				})
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					// this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {

				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					console.log(res.data.roles,'res');
					// 角色标识(企业账号：mt_company；驾驶员账号：mt_driver)
					// roles: "mt_driver"
					// pages/cityHome/index
					// this.$tab.reLaunch('/pages/home/index')
					switch(res.data.roles){
						case 'mt_company':
						this.$tab.reLaunch('/pages/home/index');
						break;
						case 'mt_driver':
						this.$tab.reLaunch('/pages/driverHome/index');
						break;
						default:
						this.$tab.reLaunch('/pages/cityHome/index');
						break;
					}
				})
			},
			submit() {
				// this.$tab.navigateTo('/pages/home/index')
				this.$refs.uForm.validate().then(res => {
					// this.$modal.loading("登录中，请耐心等待...")
					// this.pwdLogin()
					this.getUserState();
				}).catch(errors => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/images/loginBj.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* border: 1px salmon soli;
		background-color: aquamarine; */
	}

	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
		color: #053065;
		margin-top: 169rpx;
		// margin-bottom: 90rpx;
		margin-bottom: 40rpx;
	}


	.loginBox {
		width: 80%;
		margin: auto;
		position: absolute;
		top: 52%;
		left: 50%;
		transform: translate(-50%, -50%);
		// text-align: center;
		// width: 750px;
		// height: 784rpx;
		background: rgba(255, 255, 255, 0.6);
		border: 2rpx solid #77A8FF;
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
		border-radius: 29rpx;
	}

	.logo {
		width: 244rpx;
		height: 244rpx;
		position: absolute;
		top: -122rpx;
		left: 50%;
		transform: translateX(-50%);
		background: url('@/static/logo.png');
		background-size: 100% 100%;
	}

	.register {
		width: 120rpx;
		height: 60rpx;
		// background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		// box-shadow: 0px 2rpx 13rpx 0px rgba(27,43,95,0.25);
		// border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		// margin-top: 20rpx;
		// border: 0;
		// float: right;
		margin-bottom: 20rpx;
		margin-right: 0;
	}

	.zcStyle {
		color: #053065;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		margin-bottom: 103rpx;
	}

	.footBox {
		width: 80%;
		margin: 0 auto;

	}

	// .inputStyle {
	// 	// border-width: 0 !important;
	// 	// height: 72rpx;
	// 	background: #A1C5EF;

	// 	// background: rgba(255,255,255,0.74);
	// 	border: 2rpx solid #77A8FF !important;
	// 	box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25), 0px 0px 24rpx 6rpx rgba(109, 160, 251, 0.6);
	// 	// opacity: 0.8;
	// 	border-radius: 15rpx;

	// 	/deep/ .u-input__content__field-wrapper__field {
	// 		color: #FFFFFF !important;
	// 		font-size: 28rpx;
	// 	}

	// 	/deep/ .input-placeholder {
	// 		color: #FFFFFF !important;
	// 		font-size: 28rpx;
	// 	}
	// }

	.buttonStyle {
		// width: 562px;
		height: 72rpx;
		// background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		// box-shadow: 0px 2rpx 13rpx 0px rgba(27,43,95,0.25);
		// border-radius: 36rpx;
		// border-width: 0;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
	}

	.mt {
		// margin-top: 30rpx;
		// margin-bottom: 31rpx;
		// margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.btBox {
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		font-weight: bold;
		color: #DC8A00;
		margin-top: 30rpx;
		margin-bottom: 60rpx;
		
	}

	.login-code-img {
		height: 76rpx;
		width: 160rpx;
		margin-right: 19rpx;
	}
</style>
