<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
		<view class="onecontent">
			<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
			<view class="onecontentbox">
				<image class="onecontentboximage" :src="userHeadImg" mode="" @click="uploadImg"></image>
				<view class="onecontentboxitem flex-between">
					<view class="onecontentboxitemtext">
						昵称
					</view>
					<input class="onecontentboxiteminput" v-model="userName" type="text" placeholder="请输入昵称">
				</view>
				<view class="onecontentboxitem flex-between" style="border-top: 1rpx dotted  #333333;">
					<view class="onecontentboxitemtext">
						手机号
					</view>
					<input class="onecontentboxiteminput" disabled v-model="userInfo.telephone" type="text"
						placeholder="请输入手机号">
				</view>
			</view>
			<view class="onecontentboxitemnamber" @click="sumbit">
				保存
			</view>
		</view>

	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		onLoad() {
			this.userInfo = uni.cache.get('userInfo')
			this.userName = this.userInfo.nickName
			this.userHeadImg = this.userInfo.headImg
		},
		data() {
			return {
				titlename: '完善信息',
				opacity: false,
				form: {
					address: '', //地址
					type: '', //品类
					orderBy: '', //1.理我最近 2.销量优先 3.价格优先
					other: '', //附近1KM 1选中 0不选中
					page: 1, //页数
					size: 10, //页容量
					status: 'loadmore',
				},
				userInfo: uni.cache.get('userInfo'),
				userHeadImg: "",
				userName: ''
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacitys = false
			} else {
				this.opacitys = true
			}
		},
		methods: {
			uploadImg() {
				let _this = this
				uni.chooseImage({
					crop: {
						width: 200,
						height: 200
					},
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: uni.conf.baseUrl + '/common/upload',
							filePath: tempFilePaths[0],
							header: {
								environment: 'app',
								type: 'android',
								version: '1.7.3',
							},
							name: "file",
							formData: {
								file: chooseImageRes.tempFiles[0],
							},
							success: (uploadFileRes) => {
								let {
									data
								} = JSON.parse(uploadFileRes.data)
								this.userHeadImg = data
							},
						});
					},
				})
			},
			async sumbit() {
				let res = await this.api.upUserInfo({
					headImg: this.userHeadImg,
					nickName: this.userName
				})
				if(res.code == 0){
					uni.navigateBack()
				}
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		.onecontent {
			padding: 0 28rpx;
			width: 100%;
			height: 446rpx;
			background: linear-gradient(180deg, #FFD158 0%, #F9F9F9 100%);

			.onecontentbox {
				position: relative;
				margin-top: 116rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 75rpx 32rpx 0rpx 32rpx;

				.onecontentboximage {
					position: absolute;
					left: 50%;
					top: -60rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					transform: translateX(-50%);
				}

				.onecontentboxitem {
					padding: 24rpx 0;

					.onecontentboxitemtext {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}

					.onecontentboxiteminput {
						text-align: right;
						flex: auto;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						height: 100%;
					}
				}
			}

			.onecontentboxitemnamber {
				margin-top: 84rpx;
				text-align: center;
				width: 100%;
				padding: 20rpx 0;
				background: #FFD158;
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}
</style>