<template>
	<view>
		<u-cell-group>
				<u-cell-item  title="头像" @click="editAvatar">
					<image :src="userInfo!=null?$method.splitImgHost(userInfo.avatar):''" class="avatar"></image>
				</u-cell-item>
				<u-cell-item  title="昵称" :value="userInfo.nickname" @click="editNickName"></u-cell-item>
			</u-cell-group>
			<u-modal v-model="show" :show-cancel-button="true" title="修改昵称">
				<view class="slot-content">
					<u-input v-model="userInfo.nickname"  />
				</view>
			</u-modal>
			<view style="position: fixed;bottom: 50rpx;width: 100%;padding: 20rpx;">
				<button  @click="submit" class="submit_btn">保存</button>
				
				<button  @click="exit" class="exit_btn">退出登录</button>
			</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				show: false,
			}
		},
		onLoad(option) {
			
		},
		onShow(){
		},
		methods: {
			submit(){
				if(this.userInfo.nickname==''){
					return
				}
				this.$api.appuserInfo(this.userInfo).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
						self.$api.refreshUserInfo()
					}
				});
			},
			exit(){
				this.$method.exit()
			},
			editNickName(){
				this.show = true
			},
			editAvatar(){
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						that.avatarUrl = res.tempFilePaths[0]
				    }
				});
			}
		
		},
		computed: {...mapGetters(['userInfo'])}
	}
</script>

<style scope>
	.exit_btn{
		font-size: 30rpx;
		margin-top: 30rpx;
		padding: 5rpx;
	}
	.submit_btn{
		background-color: #32467B !important;
		border-color: #32467B !important;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx;
	}
	.slot-content{
		margin: 30rpx;
		color: #606266;
	}
	.avatar{
		height: 70rpx;
		width: 70rpx;
		
	}
page {
		background: #FFFFFF;
	}
</style>
