<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" :value="name" @input="headerInputClick"> -->
				<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>{{ phoneNum }}</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 } from '../../../utils';
	import { apiArr } from '../../../api/login';

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

			},

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



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

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