<!-- pos机账号登录入口 -->
<template>
	<view class="page-content my-bg">
		<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true">
			<block slot="content">星油云站</block>
		</cu-custom>
		<view class="bg-img margin flex padding-lg radius align-center text-center"
			:style="'background-image: url('+mainURL+'login-bg.png)'">
			<view class="padding-lg margin text-center text-lg text-white w100">
				<text class>油站工作人员绑定油站</text>
			</view>
		</view>
		<view class="pannel">
			<view class="bg-white margin padding radius shadow-warp">
				<view class="cu-form-group">
					<view class="title mini-label text-black">手机号</view>
					<input type="number" v-model="auth.phone" placeholder="请输入手机号" name="input" @blur="bulrInput" />
				</view>
				<view class="cu-form-group  padding-top-sm" v-if="showRandom">
					<view class="title text-black mini-label">验证码</view>
					<input type="number" :maxlength="6" v-model="auth.captcha" placeholder="六位数字验证码" name="input" />
					<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
				</view>
				<view class=" cu-form-group padding-top-sm" v-else>
					<view class="title mini-label text-black">密码</view>
					<input type="password" v-model="auth.password" placeholder="请输入登入密码" name="input" />
				</view>
			</view>

			<view class="margin-right padding-right-lg text-right" @tap="showRandom=true" v-if="!showRandom">
				<text class="text-sm text-red padding-right">短信验证码登录</text>
			</view>
			<view class="margin-right padding-right-lg text-right" @tap="showRandom=false" v-else>
				<text class="text-sm text-red padding-right">密码登录</text>
			</view>
		</view>
		<view class="margin-lg  padding-lg bottom-bg">
			<button class="bg-main-oil round" v-if="showRandom" @tap="checkOli(0)">登录</button>
			<button class="bg-main-oil round" v-else @tap="checkOli(1)">登录</button>
			<view class="text-center margin-top text-gray  text-sm padding-right" @tap="showTips">
				<text class="cuIcon-question padding-right-xs"></text>突然登不上了
			</view>
		</view>

		<view class="bottom-part">
			<service-hotline ref="serviceHotline" :checked='checked' @onCheck="checkAgree" />
		</view>
		<view class="cu-modal" :class="modalName">
			<view class="cu-dialog">
				<view class="cu-bar bg-red  light justify-end">
					<view class="content ">
						{{'温馨提示'}}
					</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-left padding-xl padding-bottom padding-top bg-white">
					<view class="padding-bottom-sm">
						由于微信平台规则变更，现用户要关注 “星油云站” 公众号，才能登陆
					</view>
					<view class="padding-bottom-sm ">
						之前已经关注过的小部分用户，可能需要重新关注才能登陆，即取消关注，再关注
					</view>
					<official-account @binderror="bindload" @bindload="binderror"></official-account>
					<view class="text-center" @longpress="navToQr" @tap="toQr">
						<view class=" img-view">
							<image height="200"
								src="https://xingka51.oss-cn-hangzhou.aliyuncs.com/applets/cloudSite/yunzhan.jpg"
								mode="widthFix"></image>
							星油云站公众号
						</view>
					</view>
					<view class="text-center padding-top padding-bottom">
						<button class="cu-btn bg-red light round" open-type='contact'
							@tap="hideModal">未解决，联系在线客服</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="checkList">
			<view class="cu-dialog">
				<view class="cu-bar bg-red  justify-end">
					<view class="content ">
						{{ titleText }}
					</view>
					<view class="action" @tap="hidecheckList">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="text-left padding-xl padding-bottom padding-top bg-white">
					<view class="flex align-center justify-between margin-bottom-sm  " v-for="(list,i) in oliList"
						:key='list' v-if="checkUser">
						<view class=""> {{list.otherSiteName}}</view>
						<view class="">
							<view class=" bg-red cu-btn text-white text-center btn-radius-10 text-sm"
								@tap="checkLists(list.channelId)">
								进入
							</view>
						</view>
					</view>
					<view class="flex align-center justify-between textshowCheck margin-bottom-sm" v-else>
						<view class="text-df text-red">
							{{errMsg}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref='popup'>
			<view class="protocol_body">
				<view class="protocol_header">
					使用协议及隐私保护
				</view>
				<view class="protocol_content">
					为了更好地保障您的合法权益，请您阅读并同意 <text style="  color: black; font-weight: 600;"
						@click="$refs.serviceHotline.toAgree('xoilCloudUserAgree')">《用户协议》</text> 与 <text
						style=" color: black; font-weight: 600;"
						@click="$refs.serviceHotline.toAgree('xoilCloudPrivacyAgreement')">《隐私政策》</text>。
				</view>
				<view class="protocol_footer">
					<button @click="$refs.popup.close()" class="protocol_footer_close">取消</button>
					<button @click="checked=true;$refs.popup.close();" class="protocol_footer_confirm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import loginApi from '@/api/login.js'
	import oliUserApi from '@/api/oli-user.js'
	import oilIdentityApi from '@/api/oil-identity.js'
	import md5 from 'js-md5'

	export default {
		data() {
			return {
				titleText: "",
				errMsg: '',
				checkUser: false,
				checkType: 0,
				checkList: '',
				modalName: '',
				baseURL: this.global.baseURL,
				mainURL: this.global.mainURL,
				forcedLogin: true,
				oilSiteNo: '',
				showRandom: true,
				auth: {},
				tips: '发送验证码',
				frozen: false, // 二维码冷却时间
				oliList: [{

				}],
				checked: false
			}
		},
		created() {
			uni.showShareMenu()
		},
		methods: {
			checkAgree(val) {
				this.checked = val
			},
			bulrInput() {
				if (!this.auth.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					console.log('-------------')
					return
				} else {
					console.log(this.auth.phone)
					console.log('+++++++++++++')
					oliUserApi.getByPhone(this.auth.phone).then((res) => {
						if (res.code == 20000) {
							uni.setStorageSync('oliList', res.data)
							this.oliList = res.data
							this.checkUser = true
							// this.checkList = 'show' 
							this.titleText = '油站时间'
						} else {
							let _that = this
							_that.auth.phone = ''
							//console.log(this.auth.phone)
							this.errMsg = res.msg
							this.checkUser = false
							this.checkList = 'show'
							this.titleText = '提示'
						}
					})
				}
				//console.log('input失焦')
			},
			checkLists(id) {
				uni.setStorage({
					key: 'channelId',
					data: id,
					success: () => {
						//console.log('channelId成功', id)
					}
				})
				if (this.checkType == 0) {

				} else {

				}
			},
			checkOli(n) {

				if (!this.checked) {
					this.$refs.popup.open('center')
					return
				}
				this.checkType = n
				if (n == 0) {
					this.loginRandom()
					//console.log('这里是验证码登录') 
				} else {
					if (!this.auth.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: "none"
						})
						return
					}
					if (!this.auth.password) {
						uni.showToast({
							title: '请输入密码',
							icon: "none"
						})
						return
					}
					this.loginPwd()
				}
			},
			hidecheckList() {
				this.checkList = ''
			},
			toQr() {
				uni.navigateTo({
					url: '/pages/test/test'
				})
			},
			// 根据用户手机查询油站
			getByPhone() {

			},
			navToQr() {
				uni.setClipboardData({
					data: 'https://xingka51.oss-cn-hangzhou.aliyuncs.com/applets/cloudSite/yunzhan.jpg',
					success: () => {
						uni.showToast({
							title: '二维码链接已复制',
							icon: 'none'
						})
					}
				})
			},
			hideModal() {
				this.modalName = ''
			},
			showTips() {
				this.modalName = 'show'
			},
			bindload() {
				//console.log('组件夹杂')
			},
			binderror() {
				//console.log('组件夹杂失败')
			},

			loginPwd(channelId) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						//console.log(loginRes)
						const code = loginRes.code
						oilIdentityApi.sendCode(code).then((res) => {
							//console.log('这里是登录返回值')
							//console.log(res.data.unionId)
							//console.log(res.data.openId)
							const data3 = {
								username: this.auth.phone,
								password: md5(this.auth.password),
								channelId: channelId,
								code: code,
								unionId: res.data.unionId,
								openId: res.data.openId
							}
							uni.setStorage({
								key: 'device',
								data: res.data.openId,
								success: () => {
									//console.log('deviceopenid', res.data.openId)
								}
							})
							uni.setStorageSync('checkFirst', true)
							uni.setStorage({
								key: 'unionId',
								data: res.data.unionId,
								success: () => {
									//console.log('deviceunionId', res.data.unionId)
								}
							})
							//console.log('这里是请求发送内容',data3)
							oilIdentityApi.loginByPhonePwd(data3).then(res => {
								//console.log('res', res)
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								//console.log('oilSiteCode', this.oilSiteNo)
								if (res.code === 20000) {

									uni.reLaunch({
										url: '/pages/index/index',
										fail: (err) => {
											//console.log(err)
										}
									})
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 3000
									})
									uni.setStorage({
										key: 'Authorization',
										data: res.data.authTokenDTO.accessToken,
										success: () => {
											//console.log('Authorization成功', res.data.authTokenDTO.accessToken)
										}
									})

									uni.setStorageSync('userMenu', res.data.authTokenDTO
										.loginUser.roleMenus)
									//console.log( '这里是获取userMenu处',res.data.authTokenDTO.loginUser.roleMenus)
									uni.setStorageSync('loginUser', {
										id: res.data.authTokenDTO.loginUser.id,
										name: res.data.authTokenDTO.loginUser.name,
										userPhone: res.data.authTokenDTO.loginUser
											.userPhone
									})
								}
							})
						})
					},
					fail: err => {
						//console.log(err)
					}
				});
			},
			loginWeixin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						//console.log(code)
						oilIdentityApi.sendCode(code).then((res) => {

							oilIdentityApi.loginPersonal().then(res => {
								if (res.code === 20000) {
									uni.reLaunch({
										url: '/pages/index/index',
										fail: (err) => {
											//console.log(err)
										}
									})
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 3000
									})
									uni.setStorage({
										key: 'Authorization',
										data: res.data.authTokenDTO.accessToken,
										success: () => {
											//console.log('Authorization成功', res.data.authTokenDTO.accessToken)
										}
									})
									uni.setStorage({
										key: 'device',
										data: res.data.openid,
										success: () => {
											//console.log('deviceopenid', res.data.openid)
										}
									})
									uni.setStorageSync('userMenu', res.data.authTokenDTO
										.loginUser.roleMenus)
									uni.setStorageSync('loginUser', {
										id: res.data.authTokenDTO.loginUser.id,
										name: res.data.authTokenDTO.loginUser.name,
										userPhone: res.data.authTokenDTO.loginUser
											.userPhone
									})
									uni.setStorage({
										key: 'unionId',
										data: res.data.unionId,
										success: () => {
											//console.log('deviceunionId', res.data.unionId)
										}
									})
								} else {
									//console.log('res', res.code)
									uni.showToast({
										title: '未绑定微信',
										icon: 'none',
										duration: 1500
									})
								}


							})
						})

					},
					fail: err => {
						//console.log(err)
					}
				});
			},
			sendMsg() {
				if (!this.checkUser) {
					return
				}
				if (!this.frozen) {
					if (this.auth.phone) {
						const data2 = {
							username: this.auth.phone
						}
						oilIdentityApi.getVerifyCode(data2).then(res => {
							this.auth.verifyCodeToken = res.data.verifyCodeToken
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							if (res.code === 20000) {
								this.frozen = true
								setTimeout(() => {
									this.frozen = false
									clearInterval(timer)
									this.tips = `发送验证码`
								}, 1000 * 60);
								let second = 60
								const timer = setInterval(() => {
									second--
									if (second) {
										this.tips = `${second}秒后重发`
									} else {
										this.tips = `发送验证码`
										this.disabled = false
										this.btnColor = '#FE0505'
									}
								}, 1000)
							}
						})
					} else {
						uni.showToast({
							title: '请输入您的账号',
							icon: 'none'
						})
					}
				}
			},

			loginRandom(channelId) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						//console.log(code)
						// const data2 = {
						// 	phone: this.auth.phone,
						// 	username: this.auth.phone, //类型：String  必有字段  备注：手机号
						// 	verifyCode: this.auth.captcha, //类型：String  必有字段  备注：验证码
						// 	code: code //类型：String  必有字段  备注：微信code
						// }
						// sendCode 在传值时在接口文件里添加了一个appid与code一起传到后台
						oilIdentityApi.sendCode(code).then((res) => {
							const userData = {
								username: this.auth.phone, //类型：String  必有字段  备注：手机号
								verifyCode: this.auth.captcha, //类型：String  必有字段  备注：验证码
								// code: code //类型：String  必有字段  备注：微信code
								unionId: res.data.unionId, //根据code接收后台返回的值
								channelId: channelId, //所选油站channelId
								verifyCodeToken: this.auth.verifyCodeToken, //验证码
								openId: res.data.openId
							}
							uni.setStorage({
								key: 'unionId',
								data: res.data.unionId,
								success: () => {
									//console.log('deviceunionId', res.data.unionId)
								}
							})
							uni.setStorage({
								key: 'device',
								data: res.data.openId,
								success: () => {
									//console.log('deviceopenid', res.data.openId)
								}
							})
							uni.setStorageSync('checkFirst', true)
							oilIdentityApi.verifyCodeLogin(userData).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								if (res.code === 20000) {
									uni.reLaunch({
										url: '/pages/index/index',
										fail: (err) => {
											//console.log(err)
										}
									})
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 3000
									})
									uni.setStorage({
										key: 'Authorization',
										data: res.data.authTokenDTO.accessToken,
										success: () => {
											//console.log('Authorization成功', res.data.authTokenDTO.accessToken)
										}
									})
									uni.setStorageSync('userMenu', res.data.authTokenDTO
										.loginUser.roleMenus)
									uni.setStorageSync('loginUser', {
										id: res.data.authTokenDTO.loginUser.id,
										name: res.data.authTokenDTO.loginUser.name,
										userPhone: res.data.authTokenDTO.loginUser
											.userPhone
									})
								}
							})
						})


					},
					fail: err => {
						//console.log(err)
					}
				});

			},
			getMsg() {
				uni.requestSubscribeMessage({
					tmplIds: ['W5XD3NQVa6knC5jXHeWT8GS7q5CHrDUMY_sF79kLkKk'],
					success: (res) => {
						//console.log(res)
					}
				})
			},
			getUserInfo({
				detail
			}) {
				//console.log('三方登录只演示登录api能力，暂未关联云端数据');
				//console.log('detail', detail)
				if (detail.userInfo) {
					this.loginLocal(detail.userInfo.nickName);
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆失败'
					});
				}

			},
			loginLocal(nickName) {
				uni.setStorageSync('login_type', 'local')
				uni.setStorageSync('username', nickName)
				this.toMain(nickName);
			},
			toMain(userName) {
				// this.login(userName)
				//console.log(userName)
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '/pages/index/index',
						success: () => {
							//console.log('success')
						},
						fail: err => {
							//console.log(err)
						}
					});
				} else {
					uni.navigateBack();
				}

			}
		}
	};
</script>

<style scoped>
	.protocol_footer_close {
		width: 185rpx;
		border-radius: 94rpx 94rpx 94rpx 94rpx;
		opacity: 1;
		border: 1px solid #000000;
		font-size: 26rpx;
	}

	.protocol_footer_confirm {
		width: 185rpx;
		background: #FD0505;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		opacity: 1;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.protocol_footer {
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
	}

	.protocol_content {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 46rpx;
		margin: 60rpx 0;
	}

	.protocol_header {
		width: 330rpx;
		height: 32rpx;
		font-size: 36rpx;
		color: #000000;
		width: 100%;
		text-align: center;
	}

	.protocol_body {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 70rpx 50rpx;
		max-width: 634rpx;
		box-sizing: border-box;
	}

	.textshowCheck {
		flex-direction: column;
	}

	.page-content {
		min-height: 100%;
		position: relative;
	}

	.logo {
		min-width: 100%;
		text-align: center;
	}

	.logo img {
		width: 200upx;
		height: 200rpx;
		background-size: contain;
		margin: auto;
	}

	.bottom-bg {
		position: sticky;
		bottom: 50upx;
	}

	.img-view {
		max-width: 300upx;
		width: 100%;
		display: inline-block;
	}

	.qrimg-yunzhan {
		width: 200upx;
		height: 200rpx;
	}

	.btn-radius-10 {
		border-radius: 20upx;
	}
</style>
