<template>
	<view class="back_view">
		<view class="item_view margin_top_30">
			<text class="item_title">选择工龄</text>
		</view>
		<view 
		class="item_view" 
		v-for="(item,ikey) in ageList":key="ikey"
		@click="itemClick(item,ikey)">
			<text :class="selected_index == ikey ? 'item_title select_color' : 'item_title default_color' ">{{item.title}}</text>
		</view>
		<view class="bottom_view">
			<view class="bottom_btn" @click="confirmClick()">
				<text class="bottom_title">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ageList:[],
				selected_index:999,
				selected_age:'',
			}
		},
		onLoad(e) {
			
			this.getAgeData()
		},
		methods: {
			
			getAgeData: function () {
				this.ageList = [
					{'title':'1年'},
					{'title':'2年'},
					{'title':'3年'},
					{'title':'4年'},
					{'title':'5年'},
				]
			},
			
			itemClick: function (item, ikey) {
				this.selected_age = item.title
				this.selected_index = ikey
				console.log(item.title)
				console.log(ikey)
			},
			
			confirmClick: function () {
				
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面 
				prevPage.$vm.age = this.selected_age;
				uni.navigateBack({
					
				})
				
				
			}
			

			
			
			
		}
	}
</script>

<style>
	.back_view{
		background-color: #F3F3F3;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.item_view{
		background-color: #FFFFFF;
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #F3F3F3;
	}
	
	.item_title{
		font-size: 30rpx;
	}
	
	.default_color{
		color: #333333;
	}
	
	.select_color{
		color: #2272FF;
	}
	
	.margin_top_30{
		margin-top: 30rpx;
	}
	
	.bottom_view{
		width: 100%;
		height: 170rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
	}
	
	.bottom_btn{
		background-color: #2272FF;
		width: 600rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #999999;
	}
	
	.bottom_title{
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
</style>
