<template>
	<view class='container'>
		<view class="v-top" style="position: relative;">
			<image style="height: 100%;width: 100%;" :src="$config.cdnUrl+userInfo.avatar"></image>
			<u-navbar :autoBack="true" bgColor="transparent" leftIconColor="#000000">

			</u-navbar>
			<!-- <image @click="$wskj.goBack(1)" class="wh-30 pad-50" src="@/static/icon_back.png"
				style="position:absolute;top: 60rpx;left: 20px;"></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="$config.cdnUrl+userInfo.avatar"></image>
				<text style="color:white;font-size: 36rpx;">{{userInfo.nickname}}</text>
			</view>
		</view>
		<view class="v-bottom">
			<view class="flex flex-between-center plr-24 mt-30">
				<text
					style="color: white;">{{getAgeFromDateString(userInfo.birthday)}}岁/{{getConstellationFromStr(userInfo.birthday)}}</text>
				<image class="wh-57 br-30" :src="userInfo.sex==1?'/static/icon_sex_1.png':'/static/icon_sex_2.png' ">
				</image>
			</view>
			<view @click="onSubmit" class="btn">
				<button class="btn" open-type="share">分享</button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				userInfo: {},
			};
		},
		onLoad(options) {
			this.getUserInfo()

		},
		methods: {
			onSubmit() {

			},
			getUserInfo() {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].age = this.getAgeFromDateString(res.data[i].birthday)
					}
					this.userInfo = res.data
					console.log(this.userInfo);
				})
			},
			getAgeFromDateString(dateString) {
				const today = new Date(); // 当前日期
				const birthDate = new Date(dateString); // 出生日期
				let age = today.getFullYear() - birthDate.getFullYear(); // 计算年龄
				// 如果今天的日期还没到出生年份的下一个 birthDate.getMonth() + 1 月份和 birthDate.getDate() 日期，则年龄减一
				if (today.getMonth() < birthDate.getMonth() || (today.getMonth() === birthDate.getMonth() && today
						.getDate() <
						birthDate.getDate())) {
					age--;
				}
				return age;
			},
			getConstellationFromStr(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1; // 月份范围是0-11，所以要加1
				const day = date.getDate();

				if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) {
					return "白羊座";
				} else if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) {
					return "金牛座";
				} else if ((month === 5 && day >= 21) || (month === 6 && day <= 21)) {
					return "双子座";
				} else if ((month === 6 && day >= 22) || (month === 7 && day <= 22)) {
					return "巨蟹座";
				} else if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) {
					return "狮子座";
				} else if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) {
					return "处女座";
				} else if ((month === 9 && day >= 23) || (month === 10 && day <= 23)) {
					return "天秤座";
				} else if ((month === 10 && day >= 24) || (month === 11 && day <= 22)) {
					return "天蝎座";
				} else if ((month === 11 && day >= 23) || (month === 12 && day <= 21)) {
					return "射手座";
				} else if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) {
					return "摩羯座";
				} else if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) {
					return "水瓶座";
				} else if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) {
					return "双鱼座";
				}
			}
		},
	};
</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: #FE42C2;
		color: white;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin: 0 20rpx;
		margin-top: 100rpx;
	}
</style>