<template>

	<RefreshView ref="mescrollRef" :hasBack="true" text="修改用户号" :useDownScroll="false" :useUpScroll="false">

		<view class="top">
			<text class="top_text">填写新的用户号</text>
			<text class="top_text2">用户号长度为6-20位以内，且不能重复，建议避免包含涉及到个人隐私的信息。</text>
		</view>

		<view style="height: 5rpx;width: 100%;background-color: #eee;margin-top: 30rpx;"></view>

		<view class="inputLay">
			<text class="inputText">新的用户号</text>
			<input class="input" type="text" @input="nameText" placeholder="请输入新的用户号" :value="loginName"></input>
		</view>

		<view style="height: 5rpx;width: 100%;background-color: #eee;margin-top: 28rpx;"></view>

		<text class="btn" @click="verify()">保存</text>

	</RefreshView>

</template>

<script>
	export default {
		data() {
			return {
				loginName: ""
			}
		},
		onLoad(options) {
			this.loginName = options.loginName
			console.log('=======', options)
			console.log('=======', options.loginName)
		},
		methods: {
			nameText(e) {
				this.loginName = e.detail.value
				console.log(this.loginName)
			},
			verify() {
				let _this = this
				_this.HTTP({
					url: 'aos/v1/aosUser/verifyLoginNameIsExist/' + _this.loginName,
					method: 'GET',
					paramsType: "FORM",
					toast: true,
					loading: true
				}).then((res) => {
					console.log('=======', res)
					if (200 == res.code)
						this.save()

				});

			},
			save() {
				let _this = this
				_this.HTTP({
					url: 'aos/v1/aosUser/modifyLoginName',
					method: 'PUT',
					paramsType: "FORM",
					data: {
						sysUserSid: getApp().globalData.sysUserSid,
						loginName: _this.loginName,
					},
					toast: true,
					loading: true
				}).then((res) => {
					console.log('=======', res)
					// 保存
					uni.navigateBack({
						delta: 1
					})

				});
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		flex-direction: column;
		margin-top: 100rpx;
		justify-items: center;
		align-items: center;

		.top_text {
			font-size: 40rpx;
			color: #101010;
			font-weight: 500;
			font-family: sans-serif;
		}

		.top_text2 {
			margin-left: 90rpx;
			margin-right: 90rpx;
			margin-top: 28rpx;
			font-size: 32rpx;
			color: #101010;
		}
	}

	.inputLay {
		display: flex;
		flex-direction: row;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;

		.input {
			margin-left: 40rpx;
			flex: 1;
		}
	}

	.btn {
		justify-content: center;
		width: 100%;
		display: flex;
		margin-top: 100rpx;
		padding: 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #007AFF;
		text-align: center;
	}
</style>
