<template>
	<view style="">
		<view class="" style="position: fixed;bottom: 0;background-color: rgba(0, 0,0, .5);top: 0;left: 0;right: 0;">
			<view class="" style="position: absolute;bottom: 0;left: 0;right: 0; background-color: #FFFFFF;padding-top: 20rpx;">
				<view class="disjbac pad-zy20">
					<view @tap="chooseEv(0)" class="pad-sx10 pad-zy30 bacf5 radius10 col9">取消</view>
					<view @tap="chooseEv(1)" class="pad-sx10 pad-zy30 pbackc radius10 colf">选择</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item < 10 ? '0'+item : item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item < 10 ? '0'+item : item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item">-</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item < 10 ? '0'+item : item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item < 10 ? '0'+item : item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"time-date",
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1,9999, 9999 , month - 1, day - 1],
				indicatorStyle: `height: 50px;`,
				timestr:''
			};
		},
		mounted() {},
		methods:{
			bindChange: function (e) {
				const val = e.detail.value
				this.timestr = `${this.years[val[0]]}-${this.months[val[1]] < 10 ? '0'+this.months[val[1]] : '0'+this.months[val[1]]}-${this.days[val[2]] < 10 ? '0'+this.days[val[2]] : this.days[val[2]]},${this.years[val[4]]}-${this.months[val[5]] < 10 ? '0'+this.months[val[5]] : this.months[val[5]]}-${this.days[val[6]] < 10 ? '0'+this.days[val[6]] : this.days[val[6]]}`
			},
			chooseEv(index){
				this.$emit('chooseEv',{time:this.timestr,num:index});
			}
		}
	}
</script>

<style>
.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	height: 50px!important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
</style>