<template>
	<view class="container">
		<up-cell-group>
			<up-cell title="头像">
				<template #value>
					<image :src="data.userInfo.avatar?data.userInfo.avatar:'../../static/default/avatar.png'" mode="aspectFill" @click="uploadImg"
						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
				</template>
			</up-cell>
			<up-cell title="用户名">
				<template #value>
					<input v-model="data.userInfo.userName" align="right" placeholder="请输入用户名" />
				</template>
			</up-cell>
			<!-- <up-cell title="手机">
				<template #value>
					<input v-model="data.userInfo.phone" align="right" placeholder="请输入联系电话" />
				</template>
			</up-cell> -->
		</up-cell-group>
		<view class="save" @click="save">保存</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onShow} from '@dcloudio/uni-app'
	import config from '@/commons/config.js';
	import { selectUserById, updateUsers } from '@/api/user/user.js';
	
	let data = reactive({
		userInfo: {
			avatar: '',
			userName: '',
			phone: '',
		}
	})
	
	onShow(() => {
		getUserInfo()
	})
	
	/**
	 * 获取个人信息
	 */
	async function getUserInfo () {
		let res = await selectUserById()
		data.userInfo = res
	}
	
	/**
	 * 上传头像
	 */
	function uploadImg () {
		var url = null;
		uni.showActionSheet({
			// itemList按钮的文字接受的是数组
			itemList: ["查看头像", "从相册选择图片"],
			success(e) {
				var index = e.tapIndex
				console.log(index)
				if (index === 0) {
					// 用户点击了预览当前图片
					// 可以自己实现当前头像链接的读取
					console.log()
					let url = data.userInfo.avatar||'../../static/default/avatar.png';
					let arr = []
					arr.push(url)
					uni.previewImage({
						// 预览功能图片也必须是数组的
						urls: arr
					})
				} else if (index === 1) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							uni.showLoading({
								title: '上传中...'
							});
							uni.uploadFile({
								url: config.baseApiUrl + 'alioss/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: uploadFileRes => {
									url = JSON.parse(uploadFileRes.data);
									console.log(url)
									data.userInfo.avatar = url.data
									uni.hideLoading();
									
								}
							});
						}
					});
				}
			}
		})
	}
	
	/**
	 * 保存
	 */
	function save () {
		if (!data.userInfo.userName) {
			uni.showToast({
				title: "用户名不能为空",
				icon: "none"
			})
			return
		}
		// if (!data.userInfo.phone) {
		// 	uni.showToast({
		// 		title: "手机号不能空",
		// 		icon: "none"
		// 	})
		// 	return
		// }
		// if (checkPhone(data.userInfo.phone) == false) {
		// 	uni.showToast({
		// 		title: "手机号格式不正确",
		// 		icon: "none"
		// 	})
		// 	return
		// }
					
		uni.showModal({
			title: '温馨提示',
			content: '确定保存信息',
			confirmColor: '#ff7581',
			success: async e => {
				if (e.confirm) {
					let res = await updateUsers({
							userName: data.userInfo.userName,
							avatar: data.userInfo.avatar,
							// phone: data.userInfo.phone,
						})
					uni.showToast({
						title: '保存成功',
						icon: "none"
					})
					let userInfo = uni.getStorageSync('userInfo');
					userInfo.userName = data.userInfo.userName
					userInfo.avatar = data.userInfo.avatar
					// userInfo.phone = data.userInfo.phone
					uni.setStorageSync('userInfo', userInfo);
					setTimeout(function() {
						uni.navigateBack()
					}, 1000)
					
				}
			}
		});
	}
	
	function checkPhone(phone) {
		return /^1[3456789]\d{9}$/.test(phone);
	}
</script>

<style style="sass" scoped>
	.save{
		color: #FFFFFF;
		background: #ff7581;
		text-align: center;
		width: 234px;
		height: 41px;
		font-size: 14px;
		line-height: 41px;
		margin: 0 auto;
		border-radius: 20px;
		margin-top: 78px;
	}
</style>
