<template>
	<view class="perCon">
		<view class="perTop" @click="uploadImg">
			<view class="petTopText">
				<text class="petTx">头像</text>
			</view>
			<view class="petTopImg">
				<image :src="userData.avatar" v-if="fileList.length==0"></image>
				<image :src="fileList[fileList.length-1]" mode="" v-if="fileList.length!==0"
					style="border-radius: 50%;"></image>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="perTop" @click="onUserName">
			<view class="petTopText">
				<text class="petTx">昵称</text>
			</view>
			<view class="petTopImg">
				<text class="petTopUserName" v-if="inputName==null">{{userData.nickname}}</text>
				<text class="petTopUserName" v-if="inputName!=null">{{inputName}}</text>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="perTop" @click="onUserInfo">
			<view class="petTopText">
				<text class="petTx">简介</text>
			</view>
			<view class="petTopImg">
				<text class="petTopUserName" v-if="inputInfo==null">{{userData.content}}</text>
				<text class="petTopUserName" v-if="inputInfo!=null">{{inputInfo}}</text>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="perTop" @click="onUserPhone">
			<view class="petTopText">
				<text class="petTx">手机号</text>
			</view>
			<view class="petTopImg">
				<text class="petTopUserName" v-if="inputPhone==null">{{userData.mobile}}</text>
				<text class="petTopUserName" v-if="inputPhone!=null">{{inputPhone}}</text>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="perTop" @click="onUserWechat">
			<view class="petTopText">
				<text class="petTx">微信号</text>
			</view>
			<view class="petTopImg">
				<text class="petTopUserName" v-if="inputWechat==null">{{userData.wechat_id}}</text>
				<text class="petTopUserName" v-if="inputWechat!=null">{{inputWechat}}</text>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="perTop">
			<view class="petTopText">
				<text class="petTx">会员等级</text>
			</view>
			<view class="petTopImg" @click="onMerber">
				<text class="petTopUserName">
					{{userData.grade_status==0?'L0':userData.grade_status==1?'L1':userData.grade_status==2?'L2':userData.grade_status==3?'L3':userData.grade_status==4?'L4':'L5'}}
				</text>
			</view>
			<view class="petTopPic">
				<image src="../../static/image/gengduo_icon_5@2x.png"></image>
			</view>
		</view>
		<view class="zhezhao" v-if="isShow">
			<view class="Hidden">
				<view class="HiddenText">
					<text class="setName">设置昵称</text>
				</view>
				<view class="HiddenInput">
					<input class="InputName" type="text" value="" placeholder="请输入" v-model="inputName"
						@input="bindInput" />
				</view>
				<view class="HiddenOkQu">
					<view class="HiddenCancel" @click="onCancel ">
						<text class="cancel">取消</text>
					</view>
					<view class="HiddenSave" @click="onSave">
						<text class="save">保存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShowInfo">
			<view class="Hidden">
				<view class="HiddenText">
					<text class="setName">设置简介</text>
				</view>
				<view class="HiddenInput">
					<input class="InputName" type="text" value="inputInfo" placeholder="请输入" v-model="inputInfo"
						@input="bindInputinfo" />
				</view>
				<view class="HiddenOkQu">
					<view class="HiddenCancel" @click="onCancel ">
						<text class="cancel">取消</text>
					</view>
					<view class="HiddenSave" @click="onSave">
						<text class="save">保存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShowPhone">
			<view class="Hidden">
				<view class="HiddenText">
					<text class="setName">设置手机号</text>
				</view>
				<view class="HiddenInput">
					<input class="InputName" type="text" value="" placeholder="请输入" v-model="inputPhone"
						@input="bindInputPhone" />
				</view>
				<view class="HiddenOkQu">
					<view class="HiddenCancel" @click="onCancel">
						<text class="cancel">取消</text>
					</view>
					<view class="HiddenSave" @click="onSave">
						<text class="save">保存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShowWechat">
			<view class="Hidden">
				<view class="HiddenText">
					<text class="setName">设置微信号</text>
				</view>
				<view class="HiddenInput">
					<input class="InputName" type="text" value="" placeholder="请输入" v-model="inputWechat"
						@input="bindInputWechat" />
				</view>
				<view class="HiddenOkQu">
					<view class="HiddenCancel" @click="onCancel">
						<text class="cancel">取消</text>
					</view>
					<view class="HiddenSave" @click="onSave">
						<text class="save">保存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="saveBtn" @click="confirm">
			<view class="saveText">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	// import request from '../../utils/request.js'
	import request from '../../../utils/request.js'
	export default {
		data() {
			return {
				isShow: false,
				isShowInfo: false,
				isShowPhone: false,
				isShowWechat: false,
				userData: '',
				inputName: null,
				inputInfo: null,
				inputPhone: null,
				inputWechat: null,
				fileList: [],
				urlImg: [],
				ajxtrue: false, //手机号
			}
		},
		created() {
			this.userInfo()
		},
		methods: {
			//个人资料
			userInfo() {
				request.get('/api/personal/chaKan', {
					user_id: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.userData = res.data.info[0]
					this.inputName = res.data.info[0].nickname
					this.inputInfo = res.data.info[0].content
					this.inputPhone = res.data.info[0].mobile
					this.inputWechat=res.data.info[0].wechat_id
					console.log(res, 'res个人资料')
				}).catch(err => {

				})
			},
			//点击头像
			uploadImg() {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://ketao.shequtaoapp.com/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								'token': uni.getStorageSync('token') || ''
							},
							success: (uploadFileRes) => {
								let uploadList = JSON.parse(uploadFileRes.data).data
								that.fileList.push(uploadList.url)
								that.urlImg.push(uploadList.save_path)
							}
						});
					}
				});
			},
			//点击昵称
			onUserName() {
				this.isShow = true
			},
			onUserPhone() {
				this.isShowPhone = true
			},
			bindInput(e) {
				console.log(e)
				this.inputName = e.detail.value
			},
			bindInputPhone(e) {
				this.inputPhone = e.detail.value
			},
			bindInputWechat(e){
				this.inputWechat=e.detail.value
			},
			//手机号
			onUserPhone() {
				this.isShowPhone = true
			},
			//微信号
			onUserWechat() {
				this.isShowWechat = true
			},
			//点击简介
			onUserInfo() {
				this.isShowInfo = true
			},
			bindInputinfo(e) {
				this.inputInfo = e.detail.value
			},
			//点击取消
			onCancel() {
				this.isShow = false
				this.isShowInfo = false
				this.isShowPhone = false
				this.inputWechat=this.userData.wechat_id
				this.inputPhone=this.userData.mobile
			},
			//点击保存
			onSave() {
				this.confirm()
			},
			//点击会员
			onMerber() {
				uni.navigateTo({
					url: '/myPackage/pages/me/member'
				});
			},
			//校验手机号
			// blurPhone(){
			// 	var phone =this.inputPhone;
			// 	let that = this
			// 	if (!(/^1[34578]\d{9}$/.test(phone))) {
			// 		this.ajxtrue = true
			// 		if (phone.length >= 11||phone.length <11) {
			// 			wx.showToast({
			// 				title: '手机号有误',
			// 				icon: 'none',
			// 				duration: 2000
			// 			})
			// 			this.ajxtrue=false
			// 		}
			// 	} else {
			// 		// this.ajxtrue=true
			// 		// console.log('验证成功', that.ajxtrue)
			// 	}
			// },
			confirm() {
				if (this.inputName == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				} else if (this.inputPhone.length > 11 || this.inputPhone == '') {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}  else if(this.inputWechat==''){
					uni.showToast({
						title: '请输入正确的微信号',
						icon: 'none'
					})
				}
				else {
					request.get('/api/personal/xiuGai', {
						avatar: this.urlImg[this.urlImg.length - 1] ? (this.urlImg[this.urlImg.length - 1])
							.toString() : '',
						nickname: this.inputName,
						content: this.inputInfo,
						mobile: this.inputPhone,
						wechat_id:this.inputWechat
					}).then(res => {
						this.isShow = false
						this.isShowInfo = false
						this.isShowPhone = false
						this.isShowWechat=false
						uni.showToast({
							title: '更新成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)

					}).catch(err => {

					})
				}

			}
		}
	}
</script>

<style>
	@import url("/common/personal.css");
	@import url("/common/uni.css");

	.saveBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.saveText {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #FF814A;
		color: #fff;
		border-radius: 54rpx;
	}
</style>