<template>
	<view class='container'>
		<view class="mt-50">
			<view>
				<text style="color: #FF0000;">*</text><text style="color:#FFFFFF;">姓名</text>
			</view>
			<u-input class="user-input" style="padding:0 20rpx;" v-model="userName" placeholder="请输入姓名" border="none"
				color="#000"></u-input>
		</view>
		<view class="mt-50">
			<view>
				<text style="color: #FF0000;">*</text><text style="color:#FFFFFF;">身份证号</text>
			</view>
			<u-input class="user-input" style="padding:0 20rpx;" v-model="userNumber" type="idcard" maxlength="18"
				placeholder="请输入身份证号" border="none" color="#000" @change="handleIdcardChange"></u-input>
		</view>

		<view @click="onSubmit" class="btn">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				userName: '',
				userNumber: ''
			};
		},
		onLoad(options) {
			//this.userNickName = this.user.userInfo.nickname

		},
		computed: {
			...mapState(['user'])

		},
		methods: {
			handleIdcardChange(e) {
				const idcardValue = e;
				console.log('输入的身份证号码为：', idcardValue);
				// 这里可以添加更多验证身份证号码合法性等业务逻辑
				// 比如通过正则表达式验证格式是否正确等
				const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!reg.test(idcardValue)&&idcardValue.length==18) {
					uni.showToast({
						title: '身份证号码格式不正确，请重新输入',
						icon: 'none'
					});
				}
			},
			onSubmit() {
				if (!this.userNickName) {
					return this.$u.toast('请填写昵称')
				}
				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;
	}



	.user-input {
		background: #FFFFFF;
		border-radius: 10rpx;
		height: 85rpx;
		margin-top: 24rpx;
	}

	.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;
	}
</style>