<template>
	<view class='container'>
		<view class="v-top" style="position: relative;">
			<image style="height: 100%;width: 100%;" src="../../pages/my/address.png"></image>
			<image @click="$wskj.goBack(1)" class="wh-30 pad-50" src="@/static/icon_back.png" style="position:absolute;top: 0px;left: 0px;"></image>
			<view class="v-center flex-column plr-24"
				style="position:absolute;bottom: 0px;left: 0px;height: 330rpx;width: 100%;justify-content: space-between;">
				<image class="wh-173 br-20" src="@/static/logo.png"></image>
				<text style="color:white;font-size: 36rpx;">旅行的小七仔</text>
			</view>
		</view>
		<view class="v-bottom">
			<view class="flex flex-between-center plr-24 mt-30">
				<text style="color: white;">19岁/巨蟹座</text>
				<image class="wh-57 br-30" src="@/static/logo.png"></image>
			</view>
			<view @click="onSubmit" class="btn">
				<text>分享</text>
			</view>
		</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%;
		height: 100%;
		background: #0F0F0F;
		display: flex;
		flex-direction: column;
	}

	.v-top {

		flex: 3;
	}

	.v-center {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 52%, #0F0F0F 100%);
		flex: 1;
	}

	.v-bottom {
		background-color: #0F0F0F;
		flex: 1;
	}

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

	.btn {
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		background-color: #9FFF00;
		color: #000;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin: 0 20rpx;
		margin-top: 100rpx;
	}
</style>