<template>
	<view>
		<u-popup :show="is_show" :round="10" mode="bottom">
			<view class="wx_view" v-if="login_show">
				<img src="../../static/images/login_log.png" alt="">
				<view class="">
					登录即可查看详情内容
				</view>
				<view class="" v-if="log_types==1">
					<u-notify ref="uNotify" message=""></u-notify>
					<view class="wx_btn" @click="go_login">
						<img src="../../static/images/wx_pic.png" alt="">
						<text>微信快捷登录</text>
					</view>
					<view class="wx_canelbtn" @click="is_show = false">
						<text>取消</text>
					</view>
				</view>
				<view class="" v-if="log_types==0">
					<u--input placeholder="请输入手机号" border="none" maxlength="11" clearable type="number"
						inputAlign="center" v-model="tel"
						style="width: 88%;margin: 62rpx auto 32rpx auto;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;">
					</u--input>
					<view class="input_imgcode">
						<u--input placeholder="请输入图片验证码" border="none" inputAlign="center" v-model="icode"
							style="width: 52.5%;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;float: left;">
						</u--input>
						<u--image :showLoading="true" :src="code_src" width="280rpx" height="88rpx"
							@click="clickcodeimg" style="float: left;margin-left: 5%;"></u--image>
					</view>
					<view class="input_imgcode">
						<u--input placeholder="请输入短信验证码" border="none" inputAlign="center" v-model="smscode"
							style="width: 52.5%;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;float: left;">
						</u--input>
						<view class="btn_getsms">
							<u-notify ref="uNotify" message=""></u-notify>
							<u-code :seconds="seconds" ref="uCode" @change="codeChange" @start="start"></u-code>
							<u-button @tap="getCode"
								style="border: 2rpx solid #276EE8;outline: none;color: #276EE8;margin-top: 4rpx;">
								{{tips}}
							</u-button>
						</view>
					</view>
				</view>
				<view class="agreement_view">
					<view class="check_agreement" v-if="agree_agreement"
						@click="agree_agreement = agree_agreement ? false : true"></view>
					<view class="notcheck_agreement" v-if="!agree_agreement"
						@click="agree_agreement = agree_agreement ? false : true"></view>
					<text>我已阅读并同意 <a href="https://xs-service.finezb.com/privacyAgreement.html"
							target="_blank">《用户隐私协议》</a>
						和 <a href="https://xs-service.finezb.com/privacyAgreement.html" target="_blank">《商家隐私协议》</a>
					</text>
				</view>
				<view class="btn_smslogin" @click="sumbit" v-if="log_types==0">
					登录
				</view>
			</view>
			<view class="" v-if="!login_show">
				<pwdlogin v-if="watch_info.types == 3" :logintype="watch_info"></pwdlogin>
				<actlogin v-if="watch_info.types == 4" :logintype="watch_info"></actlogin>
				<paylogin v-if="watch_info.types == 2" :logintype="watch_info" @excitpay="excitpay"></paylogin>
				<invlogin v-if="watch_info.types == 6" :logintype="watch_info"></invlogin>
				<signlogin v-if="watch_info.types == 5" :logintype="watch_info"></signlogin>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import pwdlogin from "@/components/login/password_login.vue"
	import actlogin from "@/components/login/acount_login.vue"
	import paylogin from "@/components/login/pay_login.vue"
	import invlogin from "@/components/login/invitation_login.vue"
	import signlogin from "@/components/login/sign_login.vue"
	export default {
		name: "login",
		props: {

		},
		components: {
			pwdlogin,
			actlogin,
			paylogin,
			invlogin,
			signlogin
		},
		data() {
			return {
				tel: '',
				icode: '',
				smscode: '',
				is_show: false,
				login_show: false,
				agree_agreement: true,
				authorization_info: {},
				code_src: '',
				numrandom: '',
				seconds: 60,
				tips: '获取验证码',
				log_types: '',
				watch_info: {},
			};
		},
		mounted() {
			var that = this
			if (!uni.getStorageSync("user_token")) {
				that.is_show = true
				that.login_show = true
			} else {
				that.$api.livechecktoken(uni.getStorageSync("user_token")).then(res => {
					console.log(res);
					if (res.data.data.stats == 0) {
						that.is_show = true
						that.login_show = true
					}
				})
			}
			let status = navigator.userAgent.toLowerCase();
			if (status.match(/MicroMessenger/i) == "micromessenger") {
				//微信浏览器
				this.log_types = 1
			} else {
				//其他浏览器
				this.log_types = 0
			}
			this.getwxid()
			this.clickcodeimg()
			this.get_watchtype()
		},
		created() {
			var ahref = window.location.href
			console.log(ahref);
			var that = this
			if (ahref.indexOf("code=") != -1) {
				var wxcode = ahref.slice(ahref.indexOf("code=") + 5, ahref.indexOf("&state="))
				console.log(wxcode);
				that.$api.loginbywx(wxcode).then(res => {
					console.log(res);
					this.is_show = false
					if (res.data.data) {
						uni.showToast({
							title:"登录成功"
						})
						setTimeout(()=>{
						     location.reload();
						},1800);
						uni.setStorageSync("user_name", res.data.data.account);
						uni.setStorageSync("user_headimg", res.data.data.avatar);
						uni.setStorageSync("user_token", res.data.data.token);
						
					}
				})
			}
		},
		methods: {
			//获取appid
			getwxid() {
				this.$api.getappid().then(res => {
					this.authorization_info = res.data.data
				})
			},
			excitpay(val) {
				this.is_show = val
			},
			//获取观看方式
			get_watchtype() {
				this.$api.roomwatchytype().then(res => {
					this.watch_info = res.data.data
					console.log(res.data.data);
					if (this.watch_info.types == 1) {
						this.$api.roomwatchytypefree()
						this.is_show = false
					} else {
						
						this.check_watchtype()
					}
				})
			},
			//验证观看方式
			check_watchtype() {
				this.$api.roomwatchytypeverify().then(res => {
					console.log(res);
					if (res.data.code === 200) {
						if (this.watch_info.types == 4) {
							console.log(this.watch_info)
							if (!uni.getStorageSync("wxnick") || uni.getStorageSync("wxnick") != this.watch_info.wxNick) {
								this.is_show = true
								this.$api.roomwatchytype().then(res => {
									var wxis = "0"
									String()
									if(res.data.data.wxNick===1){
										wxis="1"
									}
									uni.setStorageSync("wxnick",wxis)
								})
							}
						} else {
							uni.removeStorageSync("room_token")
							this.is_show = false
						}
					} else {
						this.is_show = true
					}
				})
			},
			start() {},
			//判断是否微信登录成功
			wx_loginok() {

			},
			//发起登录
			go_login() {
				var local = window.location.href;
				var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.authorization_info.appId +
					"&redirect_uri=" + encodeURIComponent(local) +
					"&response_type=code&scope=snsapi_userinfo&state=1&component_appid=" +
					this.authorization_info.componentAppId + "#wechat_redirect"
				window.location.href = url;
			},
			//图片验证码
			clickcodeimg() {
				this.numrandom = Date.now() + Math.random(0, 9);
				this.code_src = "https://oc-testapi.finezb.com/ocLogin/generateValidateCode?time=" + this.numrandom;
			},
			codeChange(text) {
				this.tips = text;
			},
			//获取短信验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$api.sendsms(this.tel, this.numrandom, this.icode).then(res => {
						console.log(res);
						if (res.data.code === 200) {
							this.$refs.uNotify.show({
								top: 30,
								type: 'success',
								message: '发送成功',
								duration: 1000 * 3,
								fontSize: 20,
								safeAreaInsetTop: true
							})
							this.$refs.uCode.start();
						} else {
							this.$refs.uNotify.show({
								top: 30,
								type: 'error',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 20,
								safeAreaInsetTop: true
							})
						}

					})
					// 通知验证码组件内部开始倒计时
				} else {
					this.$refs.uNotify.show({
						top: 30,
						type: 'warning',
						message: '请在倒计时结束后再试',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}
			},
			//短信登录
			sumbit() {
				this.$api.loginforphone(this.tel, this.smscode,
					this.numrandom, this.icode, "0").then(res => {
					console.log(res);
					if (!res.data.data.avatar) {
						uni.setStorageSync('user_headimg',
							'https://ts1.cn.mm.bing.net/th/id/R-C.baa2d1577cf82ad47aa705957237bff6?rik=IciTRLgFHnunww&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2016%2f0203%2f20160203022632945.png&ehk=4PjlDtyivWKN7CP%2b5JlcgUiuD1nyme8IaxbNbPnANIw%3d&risl=&pid=ImgRaw&r=0'
						)
						uni.setStorageSync("user_token", res.data.data.token);
						uni.setStorageSync("user_phone", this.tel);
						uni.setStorageSync("user_name", res.data.data.account);
						this.$refs.uNotify.show({
							top: 30,
							type: 'success',
							message: '登录成功',
							duration: 1000 * 3,
							fontSize: 20,
							safeAreaInsetTop: true
						})
						setTimeout(() => {
							window.location.reload()
						}, 1500);
					}
				}).catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style>
	.wx_view {
		text-align: center;
		font-size: 28rpx;
		padding-top: 68rpx;
		padding-bottom: 80rpx;
	}

	.wx_view>img {
		width: 122rpx;
		height: 122rpx;
	}

	.wx_btn {
		width: 520rpx;
		height: 96rpx;
		background: #00E36B;
		border-radius: 60rpx;
		margin: 80rpx auto 24rpx auto;
		line-height: 96rpx;
		color: #fff;
	}

	.wx_btn img {
		width: 52rpx;
		height: 52rpx;
		vertical-align: middle;
		margin: 0 16rpx;
	}

	.wx_canelbtn {
		width: 520rpx;
		font-size: 24rpx;
		height: 96rpx;
		background: #EEEEEE;
		border-radius: 60rpx;
		margin: 0 auto;
		line-height: 96rpx;
		color: #777777;
	}

	.agreement_view {
		font-size: 20rpx;
		margin-top: 100rpx;
		padding: 0 50rpx;

	}

	.check_agreement {
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		width: 28rpx;
		height: 28rpx;
		background-color: #00E36B;
		border-radius: 50%;
	}

	.agreement_view a {
		text-decoration: none;
	}

	.notcheck_agreement {
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		width: 25rpx;
		height: 25rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
	}

	.input_imgcode {
		width: 88%;
		margin: 30rpx auto;
		overflow: hidden;
	}

	.btn_getsms {
		float: right;
		width: 280rpx;
	}

	.btn_smslogin {
		width: 686rpx;
		height: 80rpx;
		background: #256EE7;
		border-radius: 40rpx;
		margin: 80rpx auto 5rpx auto;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>
