<template>
	<view class="start">
		<!-- logo -->
		<image class="logo" src="../../static/logo_img@2x.png" mode="widthFix"></image>
		<view class="company">中能启智（北京）教育咨询有限公司</view>
		<view class="com_tips">荣誉出品</view>
		<button class="btn_group" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">登录</button>
		<!-- <button class='bottom_anniu' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
			授权登录
		</button> -->
		<view class="btn_group btn_bot" @click="cancelLogin()">取消</view>
		<view class="login_tips">提示：登陆后系统将保存你的微信昵称及头像信息</view>
		<!-- 选择行业、职业 -->
		<view class="tx_mask" v-if="isSelect"></view>
		<view class="mask_content" v-if="isSelect">
			<!-- 标题 -->
			<view class="mask_title">我的信息</view>
			<!-- 行业 -->
			<view class="picker_box">
				<picker mode="selector" :range="antList" :value="index" @change="getAnt">
					<view class="choice_view">{{ antList[ant] ? antList[ant] : '请选择您所在的行业' }}</view>
				</picker>
				<image class="bot_arrow" src="../../static/start_01.png" mode="widthFix"></image>
			</view>
			<!-- 职业 -->
			<view class="picker_box">
				<picker mode="selector" :range="occupationList" @change="getOccupation">
					<view class="choice_view">{{ occupationList[occupation] ? occupationList[occupation] : '请选择您的职业' }}</view>
				</picker>
				<image class="bot_arrow" src="../../static/start_01.png" mode="widthFix"></image>
			</view>
			<!-- 按钮 -->
			<view class="dialog_btn_group justify_between">
				<view class="dialog_l" @click="cancel()">取消</view>
				<view class="dialog_l dialog_r" @click="confirm()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
export default {
	
	data() {
		return {
			// 防连点
			isClick: false,
			// 选择职业
			isSelect: false,
			// 行业
			antList: ['it', '教育'],
			ant: '',
			// 职业
			occupationList: ['教师', '徐盛'],
			occupation: '',
			session_key :'',
			openid :'',
			code: "",
			iv: "",
			encrypted_data: "",
		};
	},
	methods: {
		// 选择行业
		getAnt(e) {
			this.ant = e.detail.value;
		},
		// 选择职业
		getOccupation(e) {
			this.occupation = e.detail.value;
		},
		//用code换取sessionkey和openid
		get_code() {
			let t = this;
			uni.login({
				provider: "weixin",
				success(r) {
					console.log(r)
					let url = "/api/user/getSessionKey";
					app.post(url, {
						code: r.code
					}).then(r => {
						console.log(r)
						t.session_key = r.session_key;
						t.openid = r.openid
						uni.setStorageSync('openid', r.openid);
					}).catch(err => {
					})
					
				}
			})
		
		
		},
		
		
		//第一授权获取用户信息===》按钮触发
		wxGetUserInfo() {
			// 防连点
			if(!this.isClick){
				let t = this;
				t.isClick = true
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						t.iv = infoRes.iv;
						t.encrypted_data = infoRes.encryptedData
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						uni.setStorageSync('nickName', infoRes.userInfo.nickName);
						uni.setStorageSync('avatarUrl', infoRes.userInfo.avatarUrl);
						setTimeout(function() {
							t.isClick = false
						}, 1000);
						t.login()
					},
					fail(res) {}
				});
			}
			
		},
		// 登录
		login() {
			let t = this;
			let url = "/api/user/login";
			app.post(url, {
				
				openid: t.openid,
				session_key: t.session_key,
				encrypted_data: t.encrypted_data,
				iv: t.iv
			}).then(r => {
				// uni.setStorageSync('token', r.token);
				uni.setStorageSync("token","b4e9f0c0bca185857ce0d4ffc08a166b049edce8")
				// uni.showToast({
				// 	title: '登录成功',
				// 	icon: 'success',
				// 	duration: 1000
				// });
				// t.getUserInfo()
				setTimeout(function() {
					uni.switchTab({
						url:"/pages/index/index"
					})
				}, 1000);
			}).catch(err => {
				console.log(err)
			})
		},
		// 获取用户信息
		getUserInfo(){
			// 用户信息
			let url = "/api/member/index";
			app.post(url)
			.then(r=>{
				uni.setStorageSync("userId",r.id);
				uni.setStorageSync("is_vip",r.is_vip);
				uni.setStorageSync("pid",r.parent_id);
				uni.setStorageSync("children_num",r.children_num);
				uni.setStorageSync("category_num",r.category_num);
				uni.setStorageSync("past_time",r.past_time);
				uni.setStorageSync("is_gift",r.is_gift);
			})
		},
			
			
		
		// 取消
		// 确定
		confirm(){
			
		},
		// 取消登录
		cancelLogin() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 获取用户信息
		getInfor() {
			let t = this;
			if (!this.isClick) {
				this.isClick = true;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log(111);
						t.isSelect = true;
						t.iv = infoRes.iv;
						t.encrypted_data = infoRes.encryptedData;
						let nickName = infoRes.userInfo.nickName; //昵称
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						uni.setStorageSync('nickName', infoRes.userInfo.nickName);
						uni.setStorageSync('avatarUrl', infoRes.userInfo.avatarUrl);
						t.isClick = false;
					},
					fail(res) {
						t.isClick = false;
					}
				});
			}
		},
		
	},
	onLoad() {
		this.get_code();
	}
};
</script>

<style>
page {
	background-color: #fafbfd;
}
.start {
	padding: 0 110upx;
	
}
.start view {
	text-align: center;
}
.logo {
	width: 410upx;
	margin: 248upx auto 306upx;
}
.company {
	color: #06121e;
	font-size: 24upx;
}
.com_tips {
	color: #5b5e63;
	margin-top: 18upx;
	margin-bottom: 100upx;
	font-size: 24upx;
}
.btn_group {
	margin-bottom: 32upx;
	width: 100%;
	height: 96upx;
	line-height: 96upx;
	box-shadow: 0px 6px 6px rgba(238, 139, 39, 0.16);
	border-radius: 8upx;
	background-color: #ee8b27;
	color: #fff;
	font-size: 28upx;
}
.btn_bot {
	background: rgba(189, 196, 206, 1);
	box-shadow: 0px 6px 6px rgba(245, 245, 245, 0.16);
}
.login_tips {
	color: #8c9198;
	font-size: 24upx;
}
.mask_title {
	color: #595959;
	font-size: 32upx;
	text-align: center;
	margin: 42upx 0 60upx;
}
.picker_box{
	width: 498upx;
	height: 68upx;
	background-color: #eee;
	border-radius: 12upx;
	margin: 0 auto 24upx;
	line-height: 68upx;
	position: relative;
}
picker{
	width: 100%;
}
.start .choice_view{
	text-align: left;
	margin-left: 36upx;
	color: #8C9198;
}
.bot_arrow{
	width: 20upx;
	position: absolute;
	right: 24upx;
	top: 50%;
	transform: translateY(-50%);
}
/* 按钮 */
.dialog_btn_group{
	width: 498upx;
	margin: 64upx auto 0;
	padding-bottom: 42upx;
}
.dialog_l{
	width: 236upx;
	height: 72upx;
	line-height: 72upx;
	text-align: center;
	color: #fff;
	border-radius: 8upx;
	background-color: #BDC4CE;
}
.dialog_r{
	background-color: #EE8B27;
}
</style>