<template>
	<view class="page-wrap">
		<view class="page-bg">
			<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
			<view class="notice">
				请如实填写个人资料，真实的资料会更受欢迎
			</view>
			<view class="title">
				你的昵称是？
			</view>
			<view class="desc">
			</view>
			<view class="nickname">
				<u-input color="#FFFFFF" shape="circle" slot="value" class="nickname-input" v-model="nickname" type="nickname" maxlength="8" placeholder="请输入昵称" />
			</view>


			<view class="btn-wrapper">
				<u-button v-if="nickname == null || nickname == ''" text="继续" color="#837C8B"  shape="circle" ></u-button>
				<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	import * as UserProfileApi from '@/api/love-user-profile.js'
	import {
		dateFormat
	} from '@/utils/util.js'
	export default {
		data() {
			return {
				nickname: null,
				disabled: false,
				form: {
					userInfo: null
				},
				interest: null,
				fileList1: null
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				const app = this
				const userId = uni.getStorageSync('userId')
				UserProfileApi.getUserProfile(userId).then(res => {
					app.form = res.data
					const userInfo = res.data.userInfo
					app.form.avatar = userInfo.avatar
					app.form.nickname = userInfo.nickname
					app.form.comments = userInfo.comments
					app.form.sexName = userInfo.sexName
					app.form.birthday = userInfo.birthday
					app.interest = JSON.parse(app.form.interest)
					app.fileList1 = JSON.parse(app.form.images)
					app.isLogin = false
				}).catch(err => {
					app.$success(err)
				})
			},
			handleSubmit() {
				const userBase = uni.getStorageSync('UserBase') || {}
				userBase.nickname = this.nickname
				uni.setStorageSync("UserBase", userBase)
				this.updateUserInfo()
				// this.$push('/sub_pages/user/base/sex/sex')
			},
			updateUserInfo() {
				const app = this
				const userBase = uni.getStorageSync('UserBase') || {}
				app.form.interest = JSON.stringify(app.interest)
				this.form.province = userBase.province.label
				this.form.city = userBase.city.label
				this.form.region = userBase.region.label
				this.form.area = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
				this.form.sex = userBase.sex
				this.form.yearlyPay = userBase.yearlyPay
				this.form.nickname = userBase.nickname
				this.form.height = userBase.height
				this.form.birthday = userBase.birthday
				this.form.images = JSON.stringify(userBase.images)
				this.form.avatar = userBase.avatar
				// 同步user表
				this.form.userInfo.province = userBase.province.label
				this.form.userInfo.city = userBase.city.label
				this.form.userInfo.region = userBase.region.label
				this.form.userInfo.address = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
				this.form.userInfo.nickname = userBase.nickname
				this.form.userInfo.height = userBase.height
				this.form.userInfo.yearlyPay = userBase.yearlyPay
				this.form.userInfo.sex = userBase.sex
				this.form.userInfo.birthday = userBase.birthday
				this.form.userInfo.avatar = userBase.avatar
				
				// 计算年龄
				const birthdayYear = dateFormat('YYYY', new Date(userBase.birthday))
				const age = new Date().getFullYear() - birthdayYear
				this.form.age = age
				this.form.userInfo.age = age
				UserProfileApi.updateUserProfile(app.form).then(result => {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}).catch(err => {
					uni.$u.toast(err)
				})
				
			}
		}
	}
</script>

<style lang="scss">
	@import "../base.scss";

	.nickname{
		width: 690rpx;
		margin: 140rpx auto 0;
		&-input {
			background-color: #FFFFFF;
			color: #FFFFFF;
		}
	}
</style>