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

<script>
	import config from '@/commons/config.js';
	import http from '@/http/http.js';
	export default {
		data() {
			return{
				userInfo: {
					avatar: '',
					userName: '',
					phone: '',
				}
			}
		},
		onLoad( options ) {
			this.getUserInfo()
		},
		
		methods: {
			/**
			 * 获取个人信息
			 */
			getUserInfo() {
				http.request({
					url:'app/user/selectUserById',
				}).then(res => {
					this.userInfo = res.data
				})
			},
			
			/**
			 * 上次头像
			 */
			uploadImg() {
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["查看头像", "从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						console.log(index)
						if (index === 0) {
							// 用户点击了预览当前图片
							// 可以自己实现当前头像链接的读取
							let url = that.headImg;
							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)
											this.userInfo.avatar = url.data
											uni.hideLoading();
											
										}
									});
								}
							});
						}
					}
				})
			},
			
			/**
			 * 保存
			 */
			save() {
				if (!this.userInfo.userName) {
					uni.showToast({
						title: "用户名不能为空",
						icon: "none"
					})
					return
				}
				if (!this.userInfo.phone) {
					uni.showToast({
						title: "手机号不能空",
						icon: "none"
					})
					return
				}
				if (this.checkPhone(this.userInfo.phone) == false) {
					uni.showToast({
						title: "手机号格式不正确",
						icon: "none"
					})
					return
				}
			
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					confirmColor: '#ff7581',
					success: e => {
						if (e.confirm) {
							http.request({
								url:'app/user/updateUsers',
								method: 'post',
								data: {
									userName: this.userInfo.userName,
									avatar: this.userInfo.avatar,
									phone: this.userInfo.phone,
								}
							}).then(res => {
								uni.showToast({
									title: '保存成功',
									icon: "none"
								})
								setTimeout(function() {
									uni.navigateBack()
								}, 1000)
							})
							
						}
					}
				});
			},
			//根据正则验证手机号是否正确包括校验长度
			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>
