<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" range-key="name" :value="industyindex" @change="getAnt">
					<view class="choice_view">{{industryName}}</view>
				</picker>
				<image class="bot_arrow" src="../../static/start_01.png" mode="widthFix"></image>
			</view>

			<!-- 职业 -->
			<view class="picker_box" v-if="industryName=='请选择行业'">

				<view class="choice_view">{{occupationName}}</view>

				<image class="bot_arrow" src="../../static/start_01.png" mode="widthFix"></image>
			</view>

			<!-- 职业 -->
			<view class="picker_box" v-else>
				<picker mode="selector" :range="occupationList" range-key="name" @change="getOccupation" :value="occupationindex">
					<view class="choice_view">{{occupationName}}</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: [],
				industryName: "请选择行业",
				industyindex: 0,
				ant: '',
				// 职业
				occupationList: [],
				occupationName: '请选择职业',
				occupationindex: 0,
				occupation: '',
				session_key: '',
				openid: '',
				code: "",
				iv: "",
				encrypted_data: "",
				type:"",
				courseid:''
			};
		},
		methods: {

			//用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);
							uni.setStorageSync('session_key', r.session_key);
						}).catch(err => {})

					}
				})


			},


			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				// 防连点
				if (!this.isClick) {
					let t = this;
					t.isClick = true
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							console.log(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 => {
					console.log(r)
					 uni.setStorageSync('token', r.token);
					// uni.setStorageSync('token', 'aa11ce36c240ae24b62be1e019380ff21580b6953adb49f3a6afb7159e4d02c3');

					// 获取个人中心用户信息
					this.getinfo();
					//uni.setStorageSync("token","b4e9f0c0bca185857ce0d4ffc08a166b049edce8")
					// uni.showToast({
					// 	title: '登录成功',
					// 	icon: 'success',
					// 	duration: 1000
					// });
					// t.getUserInfo()


				}).catch(err => {
					console.log(err)
				})
			},


			// 获取用户信息
			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;
						}
					});
				}
			},


			// 获取行业
			gerindust() {
				let that = this;
				let url = "/api/category/category";
				app.post(url)
					.then(r => {
						console.log(r)
						that.antList = r.list;
						let newantList = this.antList;
						newantList.forEach(function(value, index, array) {
							if (value.name == that.industryName) {
								that.industyindex = index;
								let id = value.id;
								that.getoccupation(id)
							}
						});

					})
			},

			// 获取职业
			getoccupation(id) {
				let that = this;
				let url = "/api/category/sub_category";
				let params = {
					categoty_id: id
				}
				app.post(url, params)
					.then(r => {
						console.log(r)
						that.occupationList = r.list;
						let newoccupationList = that.occupationList;

						newoccupationList.forEach(function(value, index, array) {
							if (value.name == that.occupationName) {
								that.occupationindex = index;

							}

						});

					})
			},
			// 选择行业
			getAnt(e) {
				this.industryName = this.antList[e.detail.value].name;
				let id = this.antList[e.detail.value].id;
				this.occupationName = '请选择职业'
				this.getoccupation(id)
			},
			// 选择职业
			getOccupation(e) {
				this.occupation = e.detail.value;
				this.occupationName = this.occupationList[e.detail.value].name
			},
			//个人中心获取用户信息
			getinfo(){
				// 用户信息
				let that = this;
				let url = "/api/index/user_info";
				app.post(url)
					.then(r => {
						uni.setStorageSync("userid", r.id);
						uni.setStorageSync("nickname",r.nickname)
						console.log('77889900',r)
						if (r.profession!= null) {
							that.occupationName = r.occupation;
							that.industryName = r.profession;
							

							that.isSelect = false;
							let url = uni.getStorageSync("url");
							console.log(url)
							if(that.type==1){
								uni.navigateTo({
									url:'../course/courseIntro?id='+that.courseid
								})
								
							}else{
								if (url == '') {
									uni.switchTab({
										url: "/pages/index/index"
									})
								} else {
									uni.switchTab({
										url: url
									})
								}
							}

						} else {
							that.isSelect = true
						}
					}).catch((err) => {
					console.log(err)
					if(err.msg=='您已被拉黑'){
						wx.showToast({
							title:err.msg,
							icon:"none"
						})
						
						
					}
					
				})
			},
			// 取消职业选择
			cancel() {
				this.isSelect = false
			},
			// 确定
			confirm() {
				let that = this;
				let url = "/api/user/job";
				if (that.occupationName == '请选择职业') {
					uni.showToast({
						title: '请选择职业',
						icon: 'none'
					})

					return false
				}
				let param = {
					profession: that.industryName,
					occupation: that.occupationName
				}
				app.post(url, param)
					.then(r => {
						console.log(r)
						uni.showToast({
							title: '选择职业成功',
							icon: 'none'
						})

						setTimeout(function() {
							let url = uni.getStorageSync("url");
							console.log(url)
							console.log('99999',that.type)
							if(that.type==1){
								uni.navigateTo({
									url:'../course/courseIntro?id='+that.courseid
								})
								
							}else{
								if (url == '') {
									uni.switchTab({
										url: "/pages/index/index"
									})
								} else {
									uni.switchTab({
										url: url
									})
								}
							}
							
						}, 1500)

					})
			},
			// 取消登录
			cancelLogin() {
				uni.navigateBack({
					delta: 1
				});
			},

		},
		onLoad(options) {
			console.log('88888',options)
			if(options.type!=undefined){
				this.type=options.type;
				this.courseid=options.id
			}
			this.get_code();

			// 获取行业
			this.gerindust();
			// this.getinfo()
		}
	};
</script>

<style>
	page {
		background-color: #fafbfd;
	}

	.choice_view {
		width: 400rpx;
		font-size: 28rpx;
	}

	.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>