<template>
	<view class="user-config-info-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 用户信息表单 -->
			<form @submit="formSubmit">
				<!-- 头像 -->
				<view class="line">
					<view class="width-100 text-30 text-1a">头像</view>
					<view class="flex-one">
						<button hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
							<view class="flex align-center justify-end">
								<image class="head_img jc-avatar-80" :src="userHeader ? userHeader : greyHeadImg"
									style="margin: 0;"></image>
								<text class="margin-left-10 tyIcon-fanhui text-26 text-98"></text>
							</view>
						</button>

					</view>
				</view>

				<!-- 昵称 -->
				<view class="line">
					<view class="width-100 text-30 text-1a">昵称</view>
					<view class="flex-one flex align-center justify-end">
						<input type="nickname" name="nick_name"
							class="width-100p line-height-120 text-right text-28 text-1a" maxlength="20"
							v-model="userName" placeholder="请输入昵称" placeholder-class="text-28 text-b3"></input>
					</view>
				</view>
				<view class="bottomBox">
					<view class=" line-height-90 radius-45 bg-2f9 text-center text-32 text-bold text-ff"
						@click="submit">保存</view>

				</view>

			</form>
		</view>


	</view>
</template>

<script>
	import file from "@/components/hzjc/utils/functions/file.js"
	export default {
		data() {
			return {
				// 灰色头像
				greyHeadImg: '/static/user/headimg_no.png',
				userHeader: '',
				userName: ''
			}
		},

		onReady() {

			this.rq.getData("fire/api/Fire/userCenter").then(res => {
				if (res.code == 0) {
					this.userHeader = res.data.user_info.head_img;
					this.userName = res.data.user_info.nick_name;
				}
			})
		},

		methods: {

			chooseAvatar(e) {
				// 上传
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})

				let tempFile = e.detail.avatarUrl
				let files = []


				// 原文件名称
				let localFileName,
					// 上传后文件名称
					fileName

				// 获取源文件名称
				let pos = tempFile.lastIndexOf('/')
				if (pos != -1) {
					localFileName = tempFile.substring(pos + 1)
				}

				// 上传后文件名称为随机文件名
				let suffix = this.cn.getSuffix(localFileName)
				fileName = this.cn.getRandomStr(10) + suffix

				files.push({
					// 图片的本地文件路径列表
					path: tempFile,
					// 上传后的文件名
					fileName: fileName
				})

				// 上传至OSS服务器
				file.uploadFilesToOss(files, [], {}, false, 'image').then(res => {
					uni.hideLoading()
					console.log(1008, res)
					this.userHeader = res[0]
				}).catch(err => {
					uni.hideLoading()
				})
			},





			//提交
			submit(e) {
				if (!this.userHeader) {
					this.cn.toast("请选择头像")
					return false
				}
				if (!this.userName) {
					this.cn.toast("请填写昵称")
					return false
				}
				this.rq.getData('base/user/api/User/updateUserInfo', {
					head_img: this.userHeader,
					nick_name: this.userName,
				}).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(res => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.line {
		margin-left: 30rpx;
		padding-right: 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ededed;
	}

	.info {
		width: 200rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: right;
	}

	.sign {
		width: 100%;
		height: 200rpx;
		line-height: 40rpx;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
</style>
