<template>
	<view class="userInfo white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('me.userInfo.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="userInfo_menu">
				<van-cell-group>
				  <van-cell class="cell" is-link title="头像" @click="setUserInfo">
						<view class="head_portrait">
							<image class="pic" mode="aspectFill" :src="form.avatarUrl"></image>
						</view>
					</van-cell>
				  <van-cell class="cell" is-link title="名字" :value="form.nickname || '获取昵称'" @click="setUserInfo" />
				  <van-cell class="cell" is-link title="个性签名" :value="form.signature || '暂无签名'" @click="link(`/pages/me/autograph?value=${form.signature || ''}`)" />
				  <van-cell class="cell" title="带飞号" :value="form.uid" @longpress="copy(form.uid)" />
				  <van-cell class="cell" title="志愿号" :value="form.volunteerNum" v-if="form.isVolunteer === '1'" />
				  <van-cell class="cell" title="带飞值" :value="form.dfScore" />
				</van-cell-group>
			</view>
			<view class="signOut" @click="signOut">退出登录</view>
			<view class="notice">
				<view class="attr" @click="link('/pages/index/userAagreement')">《用户协议与隐私政策》</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'

	export default {
		mixins: [mixins],
		data() {
			return {}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 查询个人主页信息
			async getUserInfo () {
				this.loading = true
				const result = await this.$axios.get(this.API.getUserInfo)
				this.loading = false
				if (result) {
					this.form = result || {}
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 获取微信头像昵称
			setUserInfo () {
				uni.getUserProfile({
					desc: '用于注册账户信息',
					success: async res => {
						this.loading = true
						const result = await this.$axios.put(this.API.updateUserInfo, {
							nickname: res.userInfo.nickName,
							avatarUrl: res.userInfo.avatarUrl
						})
						this.loading = false
						if (result) {
							this.getUserInfo()
							uni.$emit('me')
						}
					}
				})
			},
			// 复制带飞号
			copy (value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$base.Tips('已复制')
					}
				})
			},
			// 退出登录
			signOut () {
				uni.showModal({
					confirmText: '退出登录',
					confirmColor: '#AA2929',
					content: '是否退出当前登录的账号？',
					success: async res => {
						if (res.confirm) {
							this.loading = true
							const result = await this.$axios.post(this.API.logout)
							this.loading = false
							if (result) {
								uni.removeStorageSync('offiAcctOpenid')
								uni.removeStorageSync('userInfo')
								uni.removeStorageSync('openid')
								uni.removeStorageSync('token')
								uni.removeStorageSync('uid')
								uni.onSocketOpen(() => {
								  uni.closeSocket()
								})
								uni.$TUIKit.logout()
								uni.reLaunch({
									url: '/pages/index/login'
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfo {
		min-height: calc(100vh);
		.body_scroll {
			.userInfo_menu {
				border-radius: 18rpx;
				background: $white;
				overflow: hidden;
				margin: 26rpx;
				.head_portrait {
					height: 80rpx;
					width: 80rpx;
					float: right;
					.pic {
						border-radius: 50%;
					}
				}
				.cell {
					::v-deep .van-cell {
						padding: 26rpx 23rpx;
						&::after {
							right: 0;
						}
					}
				}
			}
			.signOut {
				margin: 70% 26rpx 0 26rpx;
				justify-content: center;
				border-radius: 18rpx;
				align-items: center;
				background: $white;
				font-size: 32rpx;
				font-weight: 500;
				height: 100rpx;
				color: $D62E31;
				display: flex;
			}
			.notice {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 60rpx 0;
				.attr {
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: $S55B88;
				}
			}
		}
	}
</style>
