<template>
	<view class="box">
		<view class="tpouziname">大足投资项目评审管理平台</view>
		<view class="zhuanjia">含专家</view>
		<view class="shrumima zhanghao">
			<input type="text" placeholder="请输入登录账号/手机号" placeholder-class="entershouji" :value="phone" @input="onKeyInput">
		</view>
		<view class="shrumima mima">
			<input type="password" placeholder="请输入密码" placeholder-class="entershouji" :value="password" @input="enterpass">
		</view>
		<view class="yanzheng">
			<view class="yanzhengleft">
				<input type="text" placeholder="验证码" placeholder-class="yan" @input="enteryanzheng">
			</view>
			<view class="yanzhenghao" @click="changenum">{{rangenum}}</view>

		</view>
		<view class="select" @click="selectxuan">
			<view class="selectleft" v-if="selshow">
				<image src="../../static/img/selectone.png" mode=""></image>
			</view>
			<view class="selectleft" v-else>
				<image src="../../static/img/select.png" mode=""></image>
			</view>


			<view class="selectright">记住用户名</view>

		</view>

		<view class="denglu" :class="seldeng==1?'dengactive':''" @click="login">
			<text v-if="seldengk==1">登录中...</text>
			<text v-else>登录</text>
			
		</view>
		
		<!-- <view class="biaoshi">
			登录即表示 <text class="xieyi" @click="zhengce" data-id="1">用户协议</text>和 <text class="xieyi" @click="zhengce" data-id="2">隐私政策</text>
		</view> -->

		<!-- 弹出弹层 -->

		<view class="pop" v-if="tanceng">

			网络出错
		</view>
	</view>


</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				selshow: true,
				phone: '',
				password: '',
				rangenum: '',
				yanzhengcode: '',
				tanceng: false,
				seldeng: 0,
				seldengk: 0
			}
		},
		onLoad() {
			// 生成随机验证码
			var randomNum = ('000000' + Math.floor(Math.random() * 999999)).slice(-6);

			this.rangenum = randomNum;

			// 记住用户名和密码
			let username = uni.getStorageSync("username");
			let password = uni.getStorageSync("password")

			console.log('用户名', username)
			if (username != '') {
				this.phone = username;
				this.password = password
				this.selshow = true
			}

		},
		methods: {
			zhengce(e){
				let id=e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'../yinsi/yinsi?id='+id
				})
			},
			selectxuan() {
				console.log(888)
				this.selshow = !this.selshow;
				if (this.selshow == true) {
					uni.setStorageSync('username', this.phone);
					uni.setStorageSync('password', this.password)
				} else {
					uni.setStorageSync('username', '')
				}

			},
			changenum() {
				var randomNum = ('000000' + Math.floor(Math.random() * 999999)).slice(-6);

				this.rangenum = randomNum;
			},
			// 输入验证码
			enteryanzheng(e) {
				this.yanzhengcode = e.target.value;

			},

			// 输入手机号
			onKeyInput: function(event) {
				console.log(event)
				this.phone = event.target.value
			},
			// 输入密码
			enterpass(e) {

				this.password = e.target.value;

			},
			// 登录
			login() {
				let that = this;
				that.seldeng = 1;

				console.log(666)
				console.log(this.phone);
				console.log(this.password)
				if (this.phone == '') {
					uni.showToast({
						title: '请输入登录账号',
						icon: 'none'
					})
					that.seldeng = 0
					return false
				}
				if (this.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					that.seldeng = 0
					return false
				}

				if (this.yanzhengcode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					that.seldeng = 0
					return false
				}
				if (this.yanzhengcode != '') {
					if (this.yanzhengcode != this.rangenum) {
						uni.showToast({
							title: '验证码输入错误',
							icon: 'none'
						})
						that.seldeng = 0
						return false
					}
				}
				let url = "project/Login";
				let param = {
					username: that.phone,
					password: that.password
				};

				console.log('8877665544', param)
				app.post(url, param,"post").then(r => {
					that.seldengk = 1
					console.log('1234567890', r)
					let data = r.data
					if (r.data[0].status == 1) {
						if (r.data[0].username == null) {
							that.seldengk = 0
						} else {
							that.seldengk = 1
						}
						uni.showToast({
							title: r.data[0].message,
							icon: "none",
						})
					} else {
						uni.setStorageSync('username', this.phone);
						uni.setStorageSync('password', this.password)
						let role = data[0].role;
						let userid = data[0].userid;
						let username = data[0].username;
						uni.setStorageSync('role', role);

						uni.setStorageSync('userid', userid);
						uni.setStorageSync('name', username);


						console.log('打印', uni.getStorageSync('role'));
						console.log('打印', uni.getStorageSync('name'));


						uni.showToast({
							title: "登录成功",
							icon: 'none'
						})

						setTimeout(function() {
							console.log(8800)
							uni.navigateTo({
								url: '../daiban/daiban'
							})

							// uni.switchTab({
							// 	url: '/pages/daiban/daiban'
							// })
						}, 500)
					}



					// if(data[0].role==null){
					// 	uni.showToast({
					// 		title:'登录失败',
					// 		icon:"none",
					// 	})
					// }else{

					// }

					// uni.setStorageSync('re_id',1)

				}).catch(err => {
					console.log(err)
					that.seldengk = 0

					that.tanceng = true;
					setTimeout(function() {
						that.tanceng = false
					}, 1500)



				})
				// uni.switchTab({
				// 	url: '../daiban/daiban'
				// })
			}
		},

	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.biaoshi {
		color: #fff;
		font-size: 28rpx;
		margin-top: 20rpx;
		display:flex;
		justify-content: center;
	}

	.xieyi {
		color: #FF9417;
		font-size: 28rpx;
	}

	.box {
		width: 750rpx;
		height: 100%;
		/* background: url(../../static/img/bag.png); */
		background: url('http://39.105.61.115:1912/scripts/yemian.png') no-repeat center;
		background-size: cover;
		overflow: hidden
	}

	.tpouziname {
		color: #F9F9F9;
		font-size: 56rpx;
		text-align: center;
		margin-top: 278rpx;
		font-weight: bold;
	}

	.zhuanjia {
		color: #F9F9F9;
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
	}

	.shrumima {
		width: 438rpx;
		height: 68rpx;
		background: rgba(238, 238, 238, 1);
		opacity: 1;
		border-radius: 8rpx;
		color: #BDC4CE;
		font-size: 24rpx;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
		margin: 232rpx auto 0;
		display: flex;
		align-items: center;
	}

	.shrumima input {
		width: 100%;
		/* height:18rpx; */
	}

	.entershouji {
		color: #BDC4CE;
		font-size: 24rpx;
	}

	.mima {
		margin: 32rpx auto 0;
	}

	.yanzheng {
		display: flex;
		align-items: center;
	}

	.yanzheng {
		width: 438rpx;
		margin: 32rpx auto 0;
	}

	.yanzhengleft {
		width: 256rpx;
		height: 68rpx;
		border-radius: 8rpx;
		background: #fff;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #EEEEEE;
		color: #BDC4CE;
		font-size: 24rpx
	}

	.yanzhengleft input {
		width: 100%;
		height: 100%;
	}

	.yanzhenghao {
		width: 162rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		border-radius: 8rpx;
		margin-left: 20rpx;
		color: #169BD5;
		font-size: 24rpx;
		text-align: center;
		line-height: 68rpx;
		letter-spacing: 6rpx;
		font-weight: bold;
		background: #EEEEEE;
	}

	.yanzhenghao input {
		color: #BDC4CE;
		font-size: 24rpx;
	}

	.yan {
		color: #BDC4CE;
		font-size: 24rpx;
	}

	.select {
		width: 438rpx;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;
	}

	.selectleft {
		width: 20rpx;
		height: 20rpx;
		font-size: 0;
	}

	.selectleft image {
		width: 100%;
		height: 100%;
	}

	.selectright {
		color: #fff;
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.denglu {
		width: 438rpx;
		height: 76rpx;

		/* background: rgba(0, 147, 255, 1); */
		opacity: 1;
		background: #007AFF;
		opacity: 0.9;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 76rpx;
		margin: 52rpx auto 0;
		border-radius: 8rpx;
	}

	.dengactive {
		opacity: 0.9;
		background: #738DFA;
	}

	.pop {
		width: 200rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%)
	}

	/* .zhanghao {
		margin-top: 280rpx;
	} */
</style>