<template>
	<view class="container">
		<view class="title">完善注册信息</view>
		<view class="subTitle">请完善头像昵称及联系信息</view>
		<view class="table">
			<view class="left">
				<view class="label">头像</view>
				<view class="desc">点击更换头像</view>
			</view>
			<view class="right">
				<u-upload  @afterRead="afterReadImg" :deletable="false" :maxCount="1">
					<image class="avatar_pic" :src="avatarInfo.url" alt="" />
				</u-upload>
			</view>
		</view>
		<view class="table">
			<view class="left">
				<view class="label">昵称</view>
			</view>
			<view class="right">
				<input type="text" placeholder="请填写昵称" :value="name"  @input="headerInputClick">
			</view>
		</view>
		<view class="table">
			<view class="left">
				<view class="label">手机号</view>
			</view>
			<view class="right">
				<view>{{ mobile }}</view>
				<button
					type="default"
					class="desc"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
					@click="heandleChangePhoneClick"
				>更换</button>
			</view>
		</view>
		<view class="btn" @click="headerSubmitClick">保存</view>
		<view class="agreement">同意《用户隐私保护政策》</view>
	</view>
</template>

<script>

	import { request, upload, picUrl } from '../../../utils';
	import { apiArr } from '../../../api/login';
	import { apiArr as apiArr2 } from '../../../api/v2User';

	export default {
		data() {
			return {
				avatarInfo: {},
				name: '',
				mobile: '',
			}
		},
		methods: {
			headerInputClick(e) {
				const { value} = e.detail;
				this.name = value;
			},
			heandleChangePhoneClick() {},

			// 小程序登录获取手机号接口
			getPhoneNumber(event) {
				console.log('获取手机号', event);
				if (event.detail.errMsg === "getPhoneNumber:ok") {
					request(apiArr.loginGetUserPhone, 'POST', {
						code: event.detail.code
					}).then((res) => {
						console.log('111', res);
						this.mobile = res.phone;
					})
				} else {
					console.error('用户拒绝授权:', event.detail.errMsg);
				}
			},

			// 上传图片
			async afterReadImg(e){
				console.log('eeee', e);
				const { file} = e;
				upload(file.url, res => {
					console.log('1111', res);
					this.avatarInfo = {
						url: picUrl + res.data.path,
						picUrl: res.data.path,
					}
				})
				uni.showToast({
					title: '上传成功',
					icon: 'success'
				});
			},



			async headerSubmitClick() {
				console.log('提交', this.name);
				const res = await request(apiArr2.userInfoUpdate, 'POST', {
					avatar: this.avatarInfo.picUrl,
					nick_name: this.name,
					mobile: this.mobile
				});
				console.log('111111111', res)
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					mask: true
				})
				uni.setStorageSync('headPhoto', this.avatarInfo.picUrl)
				setTimeout(() => {
					uni.navigateBack({ delta: 1 })
				}, 2000)
			},

			async init() {
				const res = await request(apiArr2.getUserInfo, 'POST', {});
				console.log('111211', res);
				this.avatarInfo = {
					url: res.avatar ? picUrl + res.avatar : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/person/Group_309.png',
					picUrl: res.avatar
				}
				this.name = res.nick_name;
				this.mobile = res.mobile;
			},
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style>
	@import url("./index.css");
</style>