<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap">
			<view class="form-input u-f u-f-jcsb u-f-aic fs28">
				<view class="light-gray">头像</view>
				<view class="light-black">
					<image @click="showPhoto = true" :src="userInfo.avatarUrl"
						style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"></image>
				</view>
			</view>
		</view>
		<view class="white-bg-wrap">
			<view class="form-input u-f u-f-jcsb u-f-aic fs28">
				<view class="light-gray">昵称</view>
				<view class="light-black">
					<input class="uni-input my-input" placeholder="请输入昵称" v-model.trim="userInfo.nickName"
						type="nickname" @blur="getNickName" />
				</view>
			</view>
		</view>
		<view class="white-bg-wrap mg-bot-40">
			<view class="form-input u-f u-f-jcsb u-f-aic fs28">
				<view class="light-gray">手机号</view>
				<view class="light-black">
					<input class="uni-input my-input" :disabled="true" placeholder="请输入手机号"
						v-model="userInfo.phoneNumber" />
				</view>
			</view>
		</view>

		<view class="line-gradient-btn" style="padding: 24rpx;" @click="saveUserInfo">
			保存
		</view>
		<!--头像上传弹出层-->
		<u-action-sheet @select="onHeadSelect" @close="showPhoto=false" :actions="pupList" :show="showPhoto"
			cancelText="取消"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPhoto: false,
				pupList: [{
						name: "拍照",
						index: 0
					},
					{
						name: "从我的相册选择",
						index: 1
					}
				],
				userInfo: {
					nickName: '',
					phoneNumber: 0,
					avatarUrl: ''
				}
			}
		},
		onLoad() {
			this.userInfo.phoneNumber = this.User.userinfo.phoneNumber || 0
			this.userInfo.nickName = this.User.userinfo.nickName || ''
			this.userInfo.avatarUrl = this.User.userinfo.avatarUrl || ''
		},
		methods: {
			// 选择上传头像某一项触发
			onHeadSelect(item) {
				const {
					index
				} = item
				console.log(index)
				if (index === 0) { // 拍摄
					this.chooseImage('camera')
				} else if (index === 1) { // 从相册选择
					this.chooseImage('album')
				}
			},
			chooseImage(type) {
				uni.chooseImage({
					sourceType: [type],
					count: 1,
					sizeType: 'original',
					success: async (res) => {
						// console.log(res)
						const tempFilePaths = res.tempFilePaths[0];
						console.log(tempFilePaths, "tempFilePaths")
						// 请求后端接口获取完整图片地址
						const imgUrl = await this.uploadFilePromise(tempFilePaths)
						console.log(imgUrl, "imgUrlimgUrlimgUrlimgUrl")
						this.userInfo.avatarUrl = imgUrl
						this.saveUserInfo()
					}
				})
			},
			uploadFilePromise(url) {
				let baseUrl = this.$config.webUrl
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + '/api/client/upload',
						filePath: url,
						header: {
							'Content-Type': 'application/json;charset=UTF-8',
							Authorization: uni.getStorageSync('token')
						},
						name: 'file',
						success: (res) => {
							try {
								// 解析返回的数据
								const data = JSON.parse(res.data);
								if (data && data.data && data.data.url && data.data.url[0]) {
									resolve(data.data.url);
								} else {
									reject(new Error('Invalid response format'));
								}
							} catch (error) {
								reject(new Error('Failed to parse response data'));
							}
						},
						fail: (error) => {
							// 处理上传失败的情况
							reject(error);
						}
					});
				});
			},
			getNickName(e) {
				console.log(e);
			},
			saveUserInfo() {
				if (!this.userInfo.nickName) {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}

				let data = this.userInfo
				this.$http.post('/api/client/userInfo/editUserInfo', data).then((res) => {
					console.log("res.data", res.data.data)
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})

					if (res.data.code === 200) {
						this.User.setUserInfo(res.data.data)
						uni.switchTab({
							url: "/pages/home/home"
						})
					}
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.white-bg-wrap {
		border-bottom: 1rpx solid #F0F0F0;

		.form-input {
			padding: 12rpx 24rpx;

			.my-input {

				height: 100%;
				background-color: #ffffff;
				text-align: right;
				padding: 0rpx;
			}
		}
	}
</style>