<style lang=sass>
@import "../../assets/components/_datepicker.scss";
</style>
<template>
<div class="vue-datepicker" :id="datepickerId" :class="{'vue-datepicker-show':visible}">
	<div class="vue-datepicker-actions">
	<div class="vue-datepicker-btn-left vue-datepicker-cancel"><span @click="close">{{cancelText}}</span></div>
	<div class="vue-datepicker-btn-right  vue-datepicker-ok" @click="changeDate"><span>{{okText}}</span></div>
	</div>
	<div class="vue-datepicker-container">
		<div class="vue-datepicker-list vue-datepicker-year">
			<div class="vue-datepicker-l"></div>
			<div class="vue-datepicker-whl">
				<div :id="datepickerYearId" class="vue-datepicker-wrapper year-wrapper">
					<div class="vue-datepicker-scroll">
						<div v-for="item in years" data-index="{{$index}}" data-role="year" class="vue-datepicker-item" :class="item.value==selectedYear?selectedCls:''" data-value="{{item.value}}" >{{item.text}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="vue-datepicker-list vue-datepicker-month">
			<div class="vue-datepicker-l"></div>
			<div class="vue-datepicker-whl">
				<div :id="datepickerMonthId" class="vue-datepicker-wrapper month-wrapper">
					<div class="vue-datepicker-scroll">
						<div v-for="item in months" data-index="{{$index}}" data-role="month" class="vue-datepicker-item" :class="item.value==selectedMonth?selectedCls:''" data-value="{{item.value}}" >{{item.text}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="vue-datepicker-list vue-datepicker-date">
			<div class="vue-datepicker-l"></div>
			<div class="vue-datepicker-whl">
				<div :id="datepickerDateId" class="vue-datepicker-wrapper date-wrapper">
					<div class="vue-datepicker-scroll">
						<div v-for="item in dates" data-index="{{$index}}" data-role="date" class="vue-datepicker-item" :class="item.value==selectedDate?selectedCls:''" data-value="{{item.value}}" >{{item.text}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="vue-datepicker-mask" v-show="visible"></div>
</template>

<script>
import Utils from "../../lib/calendar/utils"
import dateUtil from "../../lib/date"
import Config from "../../lib/calendar/config"
import iScroll from "../../lib/iscroll"


export default{
	props:{
		name:{
			type:String,
			default:"picker"
		},
		minDate:{
			type:String
		},
		maxDate:{
			type:String
		},
		visible:{
			type:Boolean,
			default:false,
			twoWay:true
		},
		defaultDate:String
	},
	data(){
		return {
			yearScroll:null,
			monthScroll:null,
			dateScroll:null,
			years:[],
			months:[],
			dates:[],
			today:dateUtil.today(),
			showCount:5,
			itemHeight:40,
			cancelText:"取消",
			okText:"确定",
			selected:null,
			visibleCls:"vue-datepicker-show",
			selectedCls:"vue-datepicker-selected",
			datepickerId:null,
			datepickerYearId:null,
			datepickerMonthId:null,
			datepickerDateId:null,
			selectedYear:null,
			selectedMonth:null,
			selectedDate:null
		}
	},
	watch:{
		visible(val){
			console.log(this.visible)
			let self=this;
			if(val==true){
				self.monthScroll.refresh();
				self.dateScroll.refresh();
			}
		},
		selectedYear(val){
			let self=this;
			let len=self.years.length;
			for(let i=0;i<len;i++){
				if(val&&self.years[i].value==val){
					let y=i*self.itemHeight;
					self.yearScroll.scrollTo(0,-y);
					self.dateScroll.refresh();
					return false;
				}
			}
		},
		selectedMonth(val){
			let self=this;
			let len=self.months.length;
			for(let i=0;i<len;i++){
				if(val&&self.months[i].value==val){
					let y=i*self.itemHeight;
					self.monthScroll.scrollTo(0,-y);
					self.dateScroll.refresh();
					return false;
				}
			}

		},
		selectedDate(val){
			let self=this;
			let len=self.dates.length;
			for(let i=0;i<len;i++){
				if(val&&self.dates[i].value==val){
					let y=i*self.itemHeight;
					self.dateScroll.scrollTo(0,-y);
					return false;
				}
			}
		}
	},
	created(){
		let uid=new Date().getTime();
		let self=this;
		self.datepickerId="datepicker_"+self.name+"_"+uid;
		self.datepickerYearId="datepicker_"+self.name+"_"+uid+"_year";
		self.datepickerMonthId="datepicker_"+self.name+"_"+uid+"_month";
		self.datepickerDateId="datepicker_"+self.name+"_"+uid+"_date";
		let today=self.today;

		self.minDate=self.minDate?dateUtil.parse(self.minDate):dateUtil.addYear(-100,today);
		self.maxDate=self.maxDate?dateUtil.parse(self.maxDate):dateUtil.addYear(10,today);
		this.selected=dateUtil.format(today,"yyyy-mm-dd");

		self.initYears();
		self.initMonths();
		self.initDates(today);

		
	},
	ready(){
		let self=this;

		let height=this.itemHeight;
		self.yearScroll=new iScroll("#"+this.datepickerYearId);
		self.monthScroll=new iScroll("#"+this.datepickerMonthId);
		self.dateScroll=new iScroll("#"+this.datepickerDateId);
		let yearPageY,monthPageY,datePageY;

		self.yearScroll.on("scrollEnd",function(){
			let y=Math.abs(Math.round(this.y/height));
			if(yearPageY!=y){
				yearPageY=y;
				self.setYear(yearPageY)
			}else{
				self.yearScroll.scrollTo(0,-yearPageY*height)
			}
			
		});

		self.monthScroll.on("scrollEnd",function(){
			let y=Math.abs(Math.round(this.y/height));
			if(monthPageY!=y){
				monthPageY=y;
				self.setMonth(monthPageY)
			}else{
				self.monthScroll.scrollTo(0,-monthPageY*height)
			}

		});

		self.dateScroll.on("scrollEnd",function(){
			let y=Math.abs(Math.round(this.y/height));
			if(datePageY!=y){
				datePageY=y;
				self.setDate(datePageY)
			}else{
				self.dateScroll.scrollTo(0,-datePageY*height)
			}
		});

		this.selectedYear=Utils.getThisYear();
		this.selectedMonth=Utils.getThisMonth();
		this.selectedDate=Utils.getThisDate();
	},
	computed:{
		selected(){
			return this.selectedYear+"-"+this.selectedMonth+"-"+this.selectedDate;
		}
	},
	
	methods:{
		setYear(index){
			let len=this.years.length;
			for(let i=0;i<len;i++){
				if(i==index){
					this.selectedYear=this.years[i].value;
					this.initDates(dateUtil.getDateByYearAndMonth(this.selectedYear,this.selectedMonth));
					return false;
				}
				
			}
		},
		setMonth(index){
			let len=this.months.length;
			for(let i=0;i<len;i++){
				if(i==index){
					this.selectedMonth=this.months[i].value;
					this.initDates(dateUtil.getDateByYearAndMonth(this.selectedYear,this.selectedMonth));
					return false;
				}
				
			}
		},
		setDate(index){
			let len=this.dates.length;
			for(let i=0;i<len;i++){
				if(i==index){
					this.selectedDate=this.dates[i].value;
					return false;
				}
				
			}
		},
		initYears(){
			let self=this;
			let i=0;
			let today=self.today;
			let m=Math.abs(self.minDate.getFullYear()-self.maxDate.getFullYear());
			self.years=[];
			
			while(i<=m){
				let date=dateUtil.addYear(i,self.minDate);
				self.years.push({
					value:date.getFullYear(),
					text:date.getFullYear()+"年"
				});
				i++;
			}

		},
		initMonths(){
			let self=this;
			let i=1;
			self.months=[];
			
			while(i<=12){
				self.months.push({
					value:i<10?"0"+i:i,
					text:i+"月"
				});
				i++;
			}
			
		},
		initDates(date){
			let self=this;
			let i=1;
			let count=parseInt(this.showCount/2);
			let days=dateUtil.getDaysByDate(date);
			self.dates=[];
			
			while(i<=days.length){
				self.dates.push({
					value:i<10?"0"+i:i,
					text:i+"日"
				});
				i++;
			}
			
			if(self.selectedDate>days.length){
				self.selectedDate=days[days.length-1];
			}

		},
		changeDate(){
			this.close();
			this.$emit("change",this.selected);
		},
		close(){
			this.visible=false;
		}
	}
}

</script>