<template>
	<view class="page">
		<view class="bg">
			<image src="/static/bg.jpg"></image>
		</view>
		<view class="back" @click="home"><image src="../../static/left.png"></image></view>
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
			<view class="content" style="padding: 20rpx;">
				<view class="" style="background-color: rgba(255,255,255,0.6);border-radius: 20rpx;padding: 20rpx;">
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="">
							用户头像：
						</view>
						<view class="">
							<u-upload name="1" :fileList="fileList" @delete="deletePic" @afterRead="afterRead"  :previewFullImage="true" :maxCount="1"></u-upload>
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="">
							用户名：
						</view>
						<view class="">
							<template>
							  <u--input
								v-model="nickName"
							    placeholder="请输入名称"
							    border="bottom"
							    clearable
								style="width: 70vw;"
							  ></u--input>
							</template>
						</view>
					</view>
					<view class="" style="position: relative;position: fixed;bottom: 0;;width: 90vw;margin-bottom: 20rpx;">
						<u-button @click="tj" type="primary" style="border: 1px solid red;width: 100vw;" text="提交修改"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import BASE_URL from "@/common/config.js"
	export default {
		data() {
			return {
				BASE_URL,
				nvConfig:{
					title:"个人信息修改",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
					back:{
						hide:true
					},
				},
				fileList: [],
				nickName:"",
			};
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad() {
			uni.hideTabBar();
			this.hquserinfo();
		},
		methods: {
			// 获取用户信息
			hquserinfo(){
				var info = {
					userId:uni.getStorageSync("USERS_KEY").userId,
				}
				this.API.hquserinfo(info).then(res=>{
					console.log("获取用户信息",res);
					this.fileList.push({
						name:"1",
						fileId:res.newFileName,
						url: res.data.avatar
					})
					this.nickName = res.data.nickName;
				})
			},
			home(){
				uni.navigateBack({
				    delta: 1
				});
			},
			tj(){
				var info = {
					userId:uni.getStorageSync("USERS_KEY").userId,
					nickName:this.nickName,
					avatar:this.fileList[0].url
				}
				this.API.xguserinfo(info).then(res=>{
					console.log("修改用户信息",res);
					this.$refs.uToast.show({
						type: 'success',
						title: '成功主题(带图标)',
						message: "用户信息修改成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					setTimeout(() => {
					  uni.navigateBack({
					      delta: 1
					  });
					}, 2000);
				})
				
			},
			// 删除图片
			deletePic(event) {
				
			},
			// 上传图片
			async afterRead(event) {
				console.log(event);
				var res = await this.uploadImg(event.file.url)
				console.log("上传图片",res)
				res = JSON.parse(res.data)
				this.fileList = []
				this.fileList.push({
					name:res.fileName,
					fileId:res.newFileName,
					url: this.BASE_URL + res.fileName
				})
			},
			uploadImg(url) {
				return new Promise((r, e) => {
					uni.uploadFile({
						url: this.BASE_URL + "/common/upload",
						filePath: url,
						name: "file",
						success: (d) => r(d)
					})
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'myinfo.scss';
</style>
