<template>
	<view class='container'>
		<u-navbar :placeholder="true" bgColor="#000" @leftClick="leftClick">
			<view slot="left" class="flex-center-center">
				<image class="w-57 h-57" src="/static/icon_shouye.png"></image>
			</view>
		</u-navbar>
		<view class="pl-24 pt-200">
			<image class="w-482 h-144" src="@/static/icon_app_img.png"></image>
		</view>
		<view class="flex-box mt-140" @click="showPhoto = true">
			<image class="wh-200" :src="user_avatar?user_avatar:iconAppLogo"></image>
			<view class="avatar-box" v-if="!user_avatar">请上传头像</view>
		</view>

		<view class="login-btn">
			<button v-if="agreement" class="lh-90 br-48" @getphonenumber="decryptPhoneNumber" open-type="getPhoneNumber"
				style="height: 100%;background-color: #FD46B9;color: #FFF;">
				<text>授权登录</text>
			</button>
			<view v-else @click="$u.toast('请同意用户协议与隐私政策')" class="lh-90"
				style="height: 100%;background-color: #ccc;border-radius: 48rpx;">
				<text class="fs-30">授权登录</text>
			</view>
		</view>

		<view class="agreement">
			<image v-if="!agreement" @click="agreement = !agreement" src="@/static/select.png"></image>
			<image v-else @click="agreement = !agreement" src="@/static/is-select.png"></image>
			<text>阅读并同意<text @click="onGetXieyi(0)" style="color: #FD46B9;">《用户协议》</text>和<text @click="onGetXieyi(1)"
					style="color: #FD46B9;">《隐私政策》</text></text>
		</view>
		<!--头像上传弹出层-->
		<u-action-sheet @select="onHeadSelect" @close="showPhoto=false" :actions="pupList" :show="showPhoto"
			cancelText="取消"></u-action-sheet>
	</view>
</template>

<script>
	import iconAppLogo from '@/static/icon_app_logo.png'
	export default {
		data() {
			return {
				agreement: false,
				code: '',
				userId: '',
				accountInfo: '',
				share: 0,
				token: '',
				user_avatar: '',
				showPhoto: false,
				pupList: [{
						name: "拍照",
						index: 0
					},
					{
						name: "从我的相册选择",
						index: 1
					}
				],
				auser_avatarFlag: false,
				iconAppLogo,
				loginInfo: {},
			};
		},
		onLoad(options) {
			uni.clearStorageSync();
			this.accountInfo = wx.getAccountInfoSync().miniProgram.appId;
			this.share = options.share || 0
			this.userId = options.userId || ''
		},
		methods: {
			leftClick() {
				this.$wskj.switchTab('/pages/home_tab_one');
			},
			wxLogin(code) {
				const params = {
					url: `/wechat/user/login/${this.accountInfo}`,
					method: "GET",
					data: {
						jsCode: code,
					}
				}
				this.$request(params).then(res => {
					uni.setStorageSync('openId', res.openid)
					this.loginInfo = res
					if (this.loginInfo.member.mobile) {
						this.auser_avatarFlag = true
					}
				})
			},
			decryptPhoneNumber(e) {
				if (!e.detail.code) {
					return
				}
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.code = loginRes.code
						const params = {
							url: `/wechat/user/login/${this.accountInfo}`,
							loadingTip: '登录中...',
							method: "GET",
							data: {
								jsCode: this.code,
							}
						}
						this.$request(params).then(res => {
							uni.setStorageSync('openId', res.openid)
							this.loginInfo = res
							//该微信没有绑定手机号 进行绑定手机号
							if (!this.loginInfo.member.mobile) {
								this.phoneLogin(e)
								return
							}
							//该微信绑定过手机号
							if (this.loginInfo.member.mobile && this.loginInfo.member.isAvatar == 1) {
								//没有头像需要先上传头像
								if (!this.loginInfo.member.avatar) {
									this.$u.toast('请先上传头像')
									return
								}
								uni.setStorageSync('token', this.loginInfo.token)
								uni.setStorageSync('id', this.loginInfo.member.id)
								if (this.share == 0) {
									this.$wskj.switchTab('/pages/home_tab_one');
								} else {
									this.$wskj.goBack(1)
								}
							}
						})
					}
				});
			},
			// 选择上传头像某一项触发
			onHeadSelect(item) {
				const {
					index
				} = item
				console.log(index)
				if (index === 0) { // 拍摄
					this.chooseImage('camera')
				} else if (index === 1) { // 从相册选择
					this.chooseImage('album')
				}
			},
			chooseImage(type) {
				uni.chooseImage({
					sourceType: [type],
					count: 1,
					sizeType: 'original',
					success: async (res) => {
						// console.log(res)
						const tempFilePaths = res.tempFilePaths[0];
						console.log(tempFilePaths, "tempFilePaths")
						// 请求后端接口获取完整图片地址
						const imgUrl = await this.$wskj.uploadAvatar(tempFilePaths)
						console.log(imgUrl, "imgUrlimgUrlimgUrlimgUrl")
						this.user_avatar = imgUrl.url
						const data = {
							avatar: imgUrl.url
						}
						// this.editUserInfo(data)
					}
				})
			},
			editUserInfo(data) {
				const params = {
					url: '/system/member/editInfo',
					data: data
				}
				this.$request(params).then(res => {
					this.$u.toast(res.msg || '修改成功')
				}).catch(err => {
					this.$u.toast(err.msg || '修改失败')
				})
			},

			phoneLogin(e) {
				const params = {
					url: `/wechat/user/phone/${this.accountInfo}`,
					loadingTip: '登录中...',
					method: "GET",
					data: {
						code: e.detail.code,
						openid: uni.getStorageSync('openId'),
						avatar: this.user_avatar
					}
				}
				this.$request(params).then(res => {
					uni.setStorageSync('token', this.token)
					if (this.share == 0) {
						this.$wskj.switchTab('/pages/home_tab_one');
					} else {
						this.$wskj.goBack(1)
					}
				})
			},
			onGetXieyi(type) {
				const params = {
					url: '/system/member/userAgreement',
					loadingTip: '',
					method: "GET",
					data: {
						configKey: type == 0 ? 'user-agreement' : 'userPrivacy'
					}
				}
				this.$request(params).then(res => {
					console.log(res.data.remark)
					let title = type == 0 ? '用户协议' : '隐私政策'
					this.$wskj.to('/pages/xieyi?title=' + title + '&content=' +
						encodeURIComponent(res.data.remark.richText))
				})
			}
		}
	};
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		background: #0F0F0F;
		color: #FFF;
	}


	.login-btn {
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFF;
		margin: 0 24rpx;
		margin-top: 200rpx;
	}


	.agreement {
		margin-top: 60rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		justify-content: center;
	}


	.agreement>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.avatar-box {
		font-size: 30rpx;
		color: #fff;
		margin-top: 10px;
	}

	.flex-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>