<template>
	<view class="niu-calendar">
		<view class="niu-calendar-wrapper">
			<view class="niu-calendar-title">
				<view class="niu-calendar-left">
					当前选中: {{curYear}}
				</view>
				<view class="niu-calendar-right" @click="today">
					回到今年
				</view>
			</view>
			<view class="niu-calendar-content">
				<view class="niu-calendar-list">
					<view class="niu-calendar-item" :class="[curYear==year?'show':'', tagToday&&todayYear==year?'today':'', year<minYear?'disabled':'', year>maxYear?'disabled':'']" @click="choosYear(year)" v-for="(year,index) in years">
						<text>{{year}}</text>
						<text v-if="tagToday&&todayYear==year">今年</text>
					</view>
				</view>
				<view class="niu-calendar-pages">
					<view class="niu-calendar-page" @click="lastPage">
						上页
					</view>
					<view class="niu-calendar-page" @click="nextPage">
						下页
					</view>
				</view>
			</view>
			<view class="button" @click="confrim">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import { createYears } from "./util.js"
	let curYear = new Date().getFullYear();
	let last = [-11,12]
	export default {
		props: {
			minYear: {
				type: Number,
				default: 1990
			},
			maxYear: {
				type: Number,
				default: 2100
			},
			/**
			 * 突出今年
			 */
			tagToday: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				years: createYears(last),
				todayYear: curYear,
				curYear: curYear,
			}
		},
		methods: {
			confrim(){
				this.$emit("confrim", this.curYear)
			},
			choosYear(year){
				if(year<this.minYear||year>this.maxYear){
					uni.showToast({
						icon: "none",
						title: "该年份无法选择"
					})
					return
				}
				this.curYear = year
			},
			today(){
				let array = [-11,12]
				this.years = createYears(array)
			},
			lastPage() {
				let array = [last[0]-24,last[1]-24]
				this.years = createYears(array)
				last = array;
			},
			nextPage() {
				let array = [last[0]+24,last[1]+24]
				this.years = createYears(array)
				last = array;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.niu-calendar{
		overflow: hidden;
	}
	.niu-calendar-title{
		margin: 0 20rpx;
		line-height: 1;
		padding: 20rpx 0;
		display: flex;
		.niu-calendar-right{
			flex: 1;
			width: 0;
			text-align: right;
		}
	}
	.niu-calendar-pages{
		display: flex;
		.niu-calendar-page{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
		}
	}
	.niu-calendar-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.niu-calendar-item{
			flex-shrink: 0;
			width: calc(100% / 6);
			height: 80rpx;
			margin: 0 0;
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			&.disabled{
				color: #999;
			}
			&.today{
				color: red;
				font-weight: bold;
			}
			&.show{
				background-color: #1AAD19;
				border-radius: 10rpx;
				color: white;
				font-weight: bold;
			}
		}
	}
	.button{
		margin: 20rpx;
		background-color: #1AAD19;
		border-radius: 10rpx;
		text-align: center;
		line-height: 1;
		padding: 20rpx 0;
		font-weight: bold;
		color: white;
		font-size: 30rpx;
	}
</style>
