<template>
	<view>
		<view class="user-wrap">
			<view class="user-group">
				<text class="nick-name">头像</text>
				<button class="choose-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="width: 80rpx;padding: 0;margin: 0;">
				  <image class="user-avatar" :src="arr1.avatar?arr1.avatar:$imgUrl('/img/head.jpg')" mode="aspectFill"></image>
				</button>
			</view>
			<view class="user-group">
				<text class="nick-name">昵称</text>
				<input class="choose-nickname" type="nickname" v-model="arr1.name" @change="nickNameChange"/>
			</view>
			<view class="user-group">
				<text class="nick-name">性别</text>
				<picker mode="selector" @change="bindPickerChange1" :value="arr1.sex" :range="range" :range-key="'text'">
					<text>{{arr1.sex}}</text>
					<uni-icons type="right" size="15"></uni-icons>
				</picker>
			</view>
			<view class="confirm-user" @tap="backToCenter" >
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr1:{
					name:'',
					avatar:'',
					mobilePhone:'',
					sex:'',
					birthday:'',
					occupation:'',
					hobby:'',
					workAddress:''
				},
				range: [
					{
						value: '男',
						text: "男"
					},
					{
						value: '女',
						text: "女"
					},
				
				],
			}
		},
		onShow() {
			this.gain()
		},
		methods: {
			gain() {
				let that =this
				that.$http.sendRequest('/business/getUserDetails', 'GET', {}).then(res => {
					
					that.arr1 = res.data.data
					console.log({...that.arr1})
				})
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
				this.arr1.birthday = e.fulldate
			},
			bindPickerChange1(e) {
				this.arr1.sex =this.range[Number(e.detail.value)].value
				console.log(this.arr1.sex)	
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$upload, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file', // 后端接收的文件参数名
						formData: {
							filePath: 'user', // 其他表单数据
						},
						success: (res) => {
							this.arr1.avatar = this.$img+ JSON.parse(res.data).data
							resolve(JSON.parse(res.data).data)
						}
					});
				})
			},
			async onChooseAvatar(e) {
				console.log(e.detail)
				this.arr1.avatar = e.detail.avatarUrl;
				await this.uploadFilePromise(this.arr1.avatar)
			},
			nickNameChange(e) {
				this.arr1.name = e.detail.value
			},
			async backToCenter() {
				console.log({...this.arr1})
				this.$http.sendRequest('/business/updateAvatar', 'POST', this.arr1).then(res => {
					if(res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: "修改成功",
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/my/my'
							})
						}, 500)
					}
			
					console.log(res)
				})
			}
		},
	}
</script>

<style>
	.user-wrap {
	  padding: 0 30rpx;
	  background: #fff;
	  font-size: 26rpx;
	  /* margin-top: 50rpx; */
	}
	.user-group {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  border-bottom: 2rpx solid #ccc;
	}
	.nick-name {
	  font-weight: 700;
	}
	.choose-avatar {
	  height: 80rpx;
	  border-radius: 80rpx;
	}
	.user-avatar {
	  width: 100%;
	  height: 100%;
	}
	.choose-nickname {
	  text-align: right;
	}
	
	.confirm-user {
		background-color: #19be6b;
		color: #fff;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 80rpx;
		border-radius: 30rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 30rpx;
		left: 5%;
		
	}
</style>
