<template>
	<view class="editInfo">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="a" v-if="uploadPic == false">
			<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
				<view
					class="u-nav-slot"
					slot="left"
				>
					<u-icon
						name="arrow-left"
						size="19"
					></u-icon>
					<view class="title">
						个人中心
					</view>
				</view>
			</u-navbar>
			<view class="editInfoContent">
				<view class="editItem" style="margin-top:0" @click="modifyPhoto">	
					<view class="editTitle">
						头像修改
					</view>
					<view class="touxiang">
						<u-avatar :src="userInfo.avatar" @c></u-avatar>
						<u-icon
							name="arrow-right"
							size="20"
						></u-icon>
					</view>
				</view>
				<view class="editItem">
					<view class="editTitle">
						昵称修改
					</view>
					<view class="input">
						<u--input placeholder="请输入昵称" inputAlign="right" color="#999999" border="none" v-model="userInfo.nickname"></u--input>
					</view>
				</view>
			</view>
			<view class="submitBtn" @click="modifyInfoHandle">
				提交
			</view>
		</view>
		
		<view class="b" v-else>
				<okingtz-cropper 
				@back="back"
				:image="userInfo.avatar"
				selectButtonBackgroundColor="#0076F6"
				saveButtonBackgroundColor="#0076F6"
				@uploadSuccess="uploadSuccess"></okingtz-cropper>
		</view>
	</view>
</template>

<script>
import axios from 'axios'
import { profileUser, uploadBase64, UserInfo } from '@/common/api.js';
import OkingtzCropper from '@/components/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
export default {
	data() {
		return {
			userInfo: {},
			uploadPic: false
		}
	},
	components: {
		OkingtzCropper
	},
	methods:{
		// 上传照片
		async uploadSuccess(res){
			const data = await uploadBase64({base64img: res},{});
			this.uploadPic = false
			this.userInfo.avatar = this.baseUrl+data.url
			this.userInfo.avatar1 = data.url
			console.log(this.userInfo)
		},
		modifyPhoto(){
			this.uploadPic = true
		},
		back(){
			this.uploadPic = false
		},
		leftClick(){
			uni.navigateTo({
				url:'/pages/my/my'
			})
		},
		//提交
		async modifyInfoHandle(){
			let params = {
				nickname:this.userInfo.nickname,
				avatar:this.userInfo.avatar1
			}
			const res = await profileUser(params,{ custom: { auth: true }})
				uni.showToast({
					title:"修改成功"
				})
				this.getUserInfo();
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
		},
		//查询用户信息
		async getUserInfo(){
			let res = await UserInfo({},{ custom: { auth: true }})
			uni.setStorageSync("userInfo",res);
			if(res.avatar){
				res.avatar1 = res.avatar
				if(res.avatar.indexOf("http")  == -1 && res.avatar.indexOf("uploads/") == 0){
					res.avatar = this.baseUrl + res.avatar
				}
			}
			this.userInfo = res;
		},
	},
	onShow() {
		console.log(this.baseUrl)
		this.getUserInfo()
	}
}
</script>


<style lang="scss" scoped>
.u-nav-slot{
	display: flex;
	align-items: center;
	.title{
		font-size: 36upx;
		color: #222222;
	}
}
.editInfoContent{
	margin:0 24upx;
	margin-top:50px;
	padding-top:20upx;
	.editItem{
		padding:40upx 30upx;
		display: flex;
		background: #FFFFFF;
		border-radius: 20upx;
		justify-content: space-between;
		align-items: center;
		margin:20upx 0;
		.editTitle{
			font-size: 30upx;
			color: #333333;
		}
		.touxiang{
			display: flex;
			align-items: center;
			&>image{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				margin-right:20upx;
			}
		}
		.input{
			text-align: right;
			color:#999999
		}
		.editInfoIcon{
			width:30upx;
			height:30upx;
		}
	}
}
.submitBtn{
	width:64%;
	margin:80upx auto;
	background: #0076F6;
	border-radius: 60upx;
	font-size: 30upx;
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	padding:30upx 0;
}
</style>