<template>
	<view class="page-wrap">
		<view class="page-bg">
			<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
			<view class="notice">
				请如实填写个人资料，真实的资料会更受欢迎
			</view>
			<view class="title">
				你的生日是？
			</view>
			<view class="desc">
				给你推荐年龄相近的异性
			</view>
			<view class="birthday">
				<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class"  mask-class="mask-class" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="{current: item == year}" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="{current: index == month - 1}" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="{current: index == day - 1}" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			
			
			<view class="btn-wrapper">
				<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled" shape="circle"
					@click="handleSubmit"></u-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
		 
	</view>
</template>

<script>
	export default {
		data: function() {
			const date = new Date()
			const years = []
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1950; i <= date.getFullYear() - 18; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const year = years[40]
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [40, month - 1, day - 1],
				indicatorStyle: `height: 50px;color: #FFF;`
			}
		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			handleSubmit(){
				
				const userBase = uni.getStorageSync('UserBase') || {}
				userBase.birthday = [this.year,this.month,this.day].join("-")
				uni.setStorageSync("UserBase", userBase)
				this.$push('/sub_pages/user/base/height/height')
			}
		}
	}
</script>

<style lang="scss">
	@import "../base.scss";
	.birthday{
		margin-top: 100rpx;
	}
	
</style>