<template>
	<!-- 20221228 -->
	<view class="mine-auth-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 已登录用户 -->
			<view class="flex align-center padding-top-30" style="padding-bottom:100rpx;" v-if="isLogin">
				<!-- 头像 -->
				<image class="jc-avatar-120" :src="headImg ? headImg : '/static/mine/headimg_no.png'" mode="aspectFill">
				</image>
				
				<view class="flex-one flex flex-direction margin-left-30 text-ff">
					<!-- 昵称 -->
					<view class="line-height-50 text-cut-one text-40">{{nickName ? nickName : '暂未设置'}}
					</view>
					
					<!-- #ifdef MP-TOUTIAO -->
					<view class="margin-top-15 width-150 line-height-50-border-ff radius-25 text-center text-24 text-ff"
						@tap="getUserProfile">更新资料</view>
					<!-- #endif -->
					
					<!-- #ifdef MP-ALIPAY -->
					<button open-type="getAuthorize" scope="userInfo"
						class="margin-top-15 width-150 line-height-50-border-ff radius-25 text-center text-24 text-ff"
						@getAuthorize="getUserProfile">更新资料</button>
					<!-- #endif -->
				</view>
			</view>

			<!-- 未登录用户 -->
			<view class="flex align-center padding-top-30" style="padding-bottom:100rpx;" v-else>
				<!-- 头像 -->
				<image class="jc-image-120" src="/static/mine/headimg_no.png" mode="aspectFill"></image>
				<!-- 立即登录 -->
				<view class="flex-one margin-left-30">
					<view class="line-height-70-border-ff text-center radius-35" style="width: 250rpx;"
						@tap="showLayer">
						<text class="text-28 text-ff">立即登录</text>
						<text class="margin-left-10 tyIcon-jiantou text-28 text-ff"></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 组件浮层 -->
		<view class="cn-content">
		</view>
	</view>
</template>

<script>
	import user from "../../user/api/user.js"
	export default {
		props: {
			// 是否登录
			isLogin: {
				type: Boolean,
				default: false
			},
			// 头像
			headImg: {
				type: String,
				default: ''
			},
			// 昵称
			nickName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		
		methods: {
			/**
			 * 点击立即登录按钮
			 * @date 2022-12-28
			 */
			showLayer() {
				this.$emit('showLayer')
			},

			/**
			 * 获取头像昵称等用户信息
			 * @date 2022-12-28
			 */ 
			getUserProfile() {

				// #ifdef MP-TOUTIAO
				wx.getUserProfile({
					success: (res) => {
						let openid = uni.getStorageSync('openid')
						
						let data = {
							openid: openid,
							nickname: res.userInfo.nickName,
							avatar_url: res.userInfo.avatarUrl,
							country: res.userInfo.country,
							province: res.userInfo.province,
							city: res.userInfo.city,
							gender: res.userInfo.gender,
							language: res.userInfo.language
						}
						
						user.updateMpToutiaoUserInfo(data).then(res => {
							if (res.code == 0) {
								this.$emit('getUserProfileSuccess')
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
				// #endif

				// #ifdef MP-ALIPAY
				// 支付宝小程序获取头像昵称
				uni.getUserInfo({
					provider: 'alipay',
					success: (infoRes) => {
						let userInfo = JSON.parse(infoRes.response).response // 以下方的报文格式解析两层 response

						let openid = uni.getStorageSync('openid')
						
						let data = {
							openid: openid,
							nickname: userInfo.nickName,
							headimgurl: userInfo.avatar,
							country: userInfo.countryCode,
							province: userInfo.province,
							city: userInfo.city,
							gender: userInfo.gender
						}
						
						user.updateMpAlipayUserInfo(data).then(res => {
							if (res.code == 0) {
								this.$emit('getUserProfileSuccess')
							}
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style scoped>

</style>
