<template>
	<view class="user-profile column items-center">
		<view style="margin-top: 20vh;" class="user-head" :style="{'background-image':`url(${user.photo?user.photo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png'})`}">
			<button class="editor-box" open-type="chooseAvatar" @chooseavatar="avatarChangeHandle">
				<u-icon name="pen_" size="20" custom-prefix="tffont" color="#121212"></u-icon>
			</button>
		</view>
		<view class="row items-center" style="width: 100%;border-top: 1px solid #f1f2f4;border-bottom: 1px solid #f1f2f4;margin-top: 60rpx;">
			<u-field class="col" :labelWidth="180" :padding="10" type="nickname" :maxlength='12' @input="changeNicknameHandle" v-model="user.name" label="昵称" placeholder="请输入你的昵称信息"></u-field>
			<u-button v-if="saveVisible" size="mini" class="q-mr-md" type="success" @click="saveNicknameHandle">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				saveVisible:false
			}
		},
		onLoad() {
			if(uni.getStorageSync('b2b_user')){
				this.user = uni.getStorageSync('b2b_user')
			} else {
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			avatarChangeHandle(e){
				const { avatarUrl } = e.detail;
				if(!avatarUrl) return
				uni.showLoading({
					title:'正在上传头像...'
				})
				const mallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
				const url = 'https://mallapi.oytour.com' + '/api/File/UploadTencent?MallBaseId=' + mallBaseId
				uni.uploadFile({
					url,
					filePath: avatarUrl,        // 用户选择的头像文件路径
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data);
						this.user.photo = data.data
						uni.hideLoading()
						this.saveUserProfileHandle()
					},
					fail: function(res) {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败!',
							icon: 'none'
						})
						
					}
				});
			},
			changeNicknameHandle(){
				const {name} = uni.getStorageSync('b2b_user')
				if(this.user.name == '') this.user.name = name
				this.saveVisible = this.user.name !=name

			},
			saveNicknameHandle(){
				if(this.user.name!='' && this.saveVisible) this.saveUserProfileHandle()
			},
			saveUserProfileHandle(){
				const {name,photo} = this.user
				const parameters = { Name:name, Photo:photo}
				uni.showLoading({
					title:'正在保存用户资料'
				})
				this.apipost("HPSLUpdateUserInfo_post", parameters, r =>{
					uni.hideLoading()
					if(r.resultCode == 1){
						uni.setStorageSync('b2b_user',this.user)
						return;
					}
					uni.showToast({
						icon:'none',
						title:'用户资料更新失败'
					})
				},e=>{
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title:'用户资料更新失败'
					})
				})
			}
		}
	}
</script>

<style>
@import url('../../asset/css/flex.css');

.user-profile {
	height: 100vh;
}
.user-profile .user-head{
	width: 160rpx;
	height: 160rpx;
	border-radius: 20rpx;
	position: relative;
	background-image: url('');
	background-size: cover;
}
.user-profile .user-head .editor-box{
	width: 40rpx;
	height: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: -20rpx;
	top: -20rpx;
	background-color: #FFF;
	border-radius: 40rpx;
	box-shadow: 0 0 20rpx #00000033;
	border: none;
	outline: none;
	padding: 0;
}
</style>
