<template>
	<view class='container'>
		<view>
			<u-input class="user-input" style="padding: 20rpx;"  v-model="userNickName" maxlength="20"
				placeholder="请输入昵称" border="none" color="#ffffff" @change="handleChange"></u-input>
		</view>
		<view class="user-text">
			<text>{{nameLength}}/20 </text>
		</view>
		<view @click="onSubmit" class="btn">
			<text>确定</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				userNickName: '',
				nameLength: 0
			};
		},
		onLoad(options) {
			this.userNickName = this.user.userInfo.nickname
			this.nameLength = this.userNickName.length
		},
		computed: {
			...mapState(['user'])

		},
		methods: {
			handleChange(e) {
				this.nameLength = e.length
			},
			onSubmit() {
				if (!this.userNickName) {
					return this.$u.toast('请填写昵称')
				}
				uni.navigateBack()
				const params = {
					url: '/api/user/profile',
					loadingTip: '',
					data: {
						nickname: this.userNickName
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.$u.toast(res.msg || '修改成功')
					setTimeout(() => {
						this.$wskj.goBack(1)
					}, 600)
				}).catch(err => {
					// console.log(err)
					this.$u.toast(err.msg || '修改失败')
				})
			}
		},
	};
</script>

<style scoped>
	.container {
		height: 100%;
		padding: 30rpx 30rpx 0;
		background: #0F0F0F;
	}

	.btn {
		width: 94%;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		margin-left: -47%;
		background-color: #9FFF00;
		color: #000;
		font-size: 32rpx;
		border-radius: 50rpx;
	}

	.user-input {
		background: rgba(255, 255, 255, 0.04);
		border-radius: 20rpx;
		height: 100rpx;
	}

	.user-text {
		color: #878787;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
</style>