<template>
	<view>
		<image style=" position:absolute;top: 0;width: 100%; z-index: -1;" mode="widthFix"
			src="../../static/loginbg.png"></image>
		<starlogin v-show="ishow.state==0" />
		<password :phone="phone" v-show="ishow.state==1" />
		<verificationCode :phone="phone" v-if="ishow.state==2" />
		<view class="other">
			<view @click="ishow.state=0" class="ghphone" v-show="ishow.state==2||ishow.state==1">更换手机号登录</view>
			<view class="other_title">
				<view class="xian" style="flex: 1;"></view>
				<view class="xian_text" style="">其他方式登录</view>
				<view class="xian" style="flex: 1;"></view>
			</view>
			<view style="text-align: center;margin-top: 32rpx;">
				<!-- class="wxlogin" -->
				<button type="primary" plain="true" size="mini" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">
					手机号快捷登录
					<!-- <image class="wx" style="" src="@/static/wxlogo.png"></image> -->
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 * @property {String}	phone:输入的手机号 通过 onLoad中uni.$on('state')自定义事件 更新值
	 * @property {Object}	ishow:组件展示状态、 state: 0:手机号输入组件 1:密码登录组件 2:验证码登陆组件
	 * @property {Object}	e:微信各种加密数据 包括加密之后的手机号
	 * @property {String}	sessionKey:微信登陆返回的参数
	 * @property {String}	unionId:请求头参数
	 * @property {String}	openId:请求头参数
	 * @property {String}	Authorization:请求头参数
	 * @property {String}	accountStatus:请求头参数
	 * @property {String}   oginSystem: OIL_OMS_WEB_MINI （运营管理） OIL_CMS_WEB_MINI（客户运营）
	 * @property {Function} loginFn: 调用微信接口获取code 通过code调用服务端接口换取请求头数据
	 * @property {Function} autoLogin: 静默登陆方法 判断是否在数据库中绑定过手机号 
	 * @property {Function} decryptPhoneNumber: 微信获取用户手机号回调函数
	 * @property {Function} bindLoginByPhone: 微信获取用户手机号回调成功后请求手机号登录接口
	 * @property {Function} loginSuccess: 登陆成功后执行 存储到本地token等数据
	 */
	import starlogin from './coments/starlogin.vue'
	import password from './coments/passwordLogin.vue'
	import verificationCode from './coments/verificationCode.vue'
	import oilIdentityApi from '@/api/oil-identity'
	export default {
		components: {
			starlogin,
			password,
			verificationCode
		},
		data() {
			return {
				type: 0,
				sessionKey: '',
				ishow: {
					state: 0
				},
				sessionKey: '',
				phone: '',
				password: ''
			}
		},
		onLoad(e) {
			let that = this
			uni.$on('state', function(e) {
				that.ishow.state = e.state
				that.phone = e.phone
			})
			if (e.type) {
				this.type = JSON.parse(e.type)
				console.log(this.type, e.type, '*-*-')
			}
			this.loginFn()

		},
		methods: {
			decryptPhoneNumber(e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const data1 = {
						...e.detail,
						sessionKey: this.sessionKey,
						unionId: uni.getStorageSync('unionid'),
						openId: uni.getStorageSync('openid'),
						loginSystem: 'OIL_OMS_WEB_MINI'
					}
					this.bindLoginByPhone(data1)
				} else {
					uni.showModal({
						title: '用户拒绝手机号的授权',
						content: `请输入手机号码登录，如有疑问，请联系客服处理`
					})
				}
			},

			bindLoginByPhone(data) {
				oilIdentityApi.bindLoginByPhone(data).then(res => {
					if (res.code == 20000) {
						this.loginSuccess(res)
					}
				})
			},
			loginSuccess(res) {
				let resData = res.data
				if (resData.authTokenDTO.loginFlag) {
					uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken)
					uni.setStorageSync('accountStatus', resData.isCompanyAccount)
					let user = resData.authTokenDTO.loginUser
					uni.setStorageSync('user', user)
					uni.showToast({
						title: res.msg,
						icon: 'none',
						complete: (err) => {
							setTimeout(() => {
								uni.redirectTo({
									url: '../index/newindex'
								})
							}, 1000);
							// console.log(err)
						}
					})
				}
			},
			loginFn() {
				uni.clearStorageSync()
				if (this.type == 1) {
					uni.setStorageSync('logintype', this.type)
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						const code = loginRes.code

						// this.onceCode = code
						oilIdentityApi.sendCode({
							code: code
						}).then(res => {
							if (res.code === 20000) {
								console.log(res.data, '--------------')
								uni.setStorageSync('openid', res.data.openId)
								uni.setStorageSync('unionid', res.data.unionId)
								this.sessionKey = res.data.sessionKey
								uni.setStorageSync('sessionKey', res.data.sessionKey)
								this.autoLogin(loginRes)
							} else if (res.code == 1002) {
								uni.showModal({
									title: '微信登录失败提醒',
									content: `${res.msg}如有疑问，请联系客服处理`
								})
							} else {
								console.log('res', res.code)
							}

						}).catch(err => {})

					},
					fail: err => {},
				})
			},
			autoLogin(loginRes) {
				oilIdentityApi.autoLogin({
					code: loginRes.code,
					unionId: uni.getStorageSync('unionid'),
					loginSystem: 'OIL_OMS_WEB_MINI'
				}).then(res => {
					if (res.code == 20000) {
						this.loginSuccess(res)
					}
				})
			},
			sumit() {
				if (this.value.length == 0) {
					this.$refs.popup.open('center')
				}
				console.log(this.value)
			},
			change(e) {
				console.log('e:', e);
			}
		}
	}
</script>

<style>
	.wxlogin {
		background-color: white;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50px;
		border: 0px !important;
		padding: 0 !important;
	}

	.ghphone {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		color: #2866FF;
	}

	.uni-easyinput__content-input {
		height: 100rpx;
	}

	.popup_footer_buttent {
		width: 250rpx;
		height: 88rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup_footer_butteno {
		width: 250rpx;
		height: 88rpx;
		border-radius: 10rpx;
		color: #333333;
		border: 1px solid #BBBBBB;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup_footer {
		display: flex;
		justify-content: space-around;
		font-size: 32rpx !important;
		margin-top: 50rpx;
	}

	.popup_text {
		margin-top: 77rpx;
		font-size: 26rpx;
		color: #BBBBBB;
		line-height: 30rpx;
		text-align: center;
	}

	.popup_title {
		font-size: 36rpx;
		color: #000000;
		padding-top: 69rpx;
		text-align: center;
		font-weight: 800;
	}

	.popup {
		width: 630rpx;
		height: 450rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.wx {
		width: 70rpx;
		height: 70rpx;
	}

	.xian_text {
		flex-shrink: 1;
		font-size: 20rpx;
		color: #999999;
		margin: 0 15rpx;
	}

	.xian {
		height: 1px;
		background-color: #E3E5E7;
	}

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

	.other {
		/* margin-top: 257rpx; */
		width: 750rpx;
		position: absolute;
		bottom: 98rpx;
	}

	.checkbox__inner {
		border-radius: 50px !important;
	}

	.checklist-box {
		margin-right: 0px !important;
	}

	.form_body_footer_text {
		font-size: 22rpx;
		color: #B6B6B6;
		display: flex;
		align-items: center;
	}

	.form_body_footer {
		margin-top: 92rpx;
	}

	.form_body_butten {
		width: 650rpx;
		height: 100rpx;
		background: #2866FF;
		border-radius: 10rpx;
		color: white;
		font-size: 36rpx;
		/* margin-top: 24rpx; */
	}

	.form_body_input {
		display: flex;
		background-color: #F5F5F5;
		margin-top: 50rpx;
		border-radius: 50rpx;
		padding-left: 28rpx;
		align-items: center;
	}

	.form_input {
		padding-left: 20rpx;
		height: 100rpx;
	}

	.is-input-border.data-v-abe12412 {
		border: 0px !important;
	}

	.form_body_title {
		font-size: 48rpx;
		color: #333333;
		font-weight: 600;
		margin-left: 31rpx;
	}

	.form_body {
		width: 650rpx;
		margin: 0 auto;
		margin-top: 421rpx;

	}
</style>