<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="height">
				<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="{current: index == value[0]}" class="item" v-for="(item,index) in heightList" :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>
	import * as DictApi from '@/api/dict.js'
	export default {
		data: function() {
			// const heightList = []
			// for (let i = 140; i <= 200; i++) {
			// 	heightList.push(i)
			// }
			return {
				title: 'picker-view',
				heightList: [],
				height: 165,

				value: [0],
				indicatorStyle: `height: 50px;color: #FFF;`,
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			bindChange: function(e) {
				this.value = e.detail.value
			},
			handleSubmit(){
				const userBase = uni.getStorageSync('UserBase') || {}
				userBase.yearlyPay = this.heightList[this.value[0]]
				console.log(userBase);
				uni.setStorageSync("UserBase", userBase)
				this.$push('/sub_pages/user/base/avatar/avatar')
			},
			loadData() {
				DictApi.listDictionary().then(res => {
					this.heightList = res.data.yearlyPay[0];
					this.$nextTick(()=>{
						this.value = [1]
					})
				})
			}
		}
	}
</script>

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