<template>
<div class="datepicker-days vue-show-imo">
<table class=" table-condensed">
	<thead>
	<tr>
	<th class="prev" @click="prev">
		<i class="fa fa-chevron-left fi-arrow-left"></i>
	</th>
	<th colspan="5" class="date-switch" @click="tomonth">{{month}} {{year}}</th>
	<th class="next" @click="next">
		<i class="fa fa-chevron-right fi-arrow-right"></i>
	</th>
	</tr>
	<tr>
		<th class="dow" v-for="week in weeks">{{week}}</th>
	</tr>
	</thead>
	<tbody>
		<tr v-for="week in calendar">
			<td :class="{today: day.date.toDateString() === new Date().toDateString(), selected: day.day === this.currentDay, not: ! day.day || day.day === 32}" v-for="day in week" track-by="$index" v-text="day.day === 32 ? '' : day.day" @click="selectDate(day)"></td>
		</tr>
	</tbody>
</table>
</div>
</template>
<script>
	export default {
		props:["dateTime","mo"],
		data(){
			return {
				// date: new Date(this.dateText),
				weeks: ['日', '一', '二', '三', '四', '五', '六'],
				months:['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
				currentDay: ""
			}
		},
		computed: {
			month() {
				return this.months[this.dateTime.month]
			},
			year() {
				return this.dateTime.year
			},
			calendar() {
				let result = []
				let calendar = []
				let date = this.dateTime
				let year = this.year
				let month = this.month
				let first = new Date(date.year, date.month, 1).getDay()
				let days = new Date(date.year, date.month + 1, 0).getDate()
				for (let i = 0; i < days; i++, first++) {
					calendar[first] = i + 1
				}
				calendar = calendar.filter((v) => v)
				// 切割
				first -= days
				result[0] = []
				let currentDay = first
				for (let i = 0; i < 7 - currentDay; i++, first++) {
					result[0][first] = {
						day: i + 1,
						date: new Date(`${year}/${month}/${i + 1}`)
					}
				}
				while(currentDay > -1) {
					result[0][currentDay - 1] = {
						day: 32,
						date: new Date(`${year}/${month}/32`)
					}
					currentDay--
				}
				let count = Math.ceil((days - (7 - first)) / 7)
				let lastDay = result[0].slice(-1)[0].day
				for (let i = 1; i <= count; i++) {
					result[i] = []
					for (let ii = 0; ii < 7; ii++) {
						result[i][ii] = {
							day: calendar[lastDay + ii],
							date: new Date(`${year}/${month}/${calendar[lastDay + ii]}`)
						}
					}
					lastDay += 7
				}
				//console.dir(result)
				return result
			}
		},
		methods: {
			prev() {
				this.currentDay = ""
				this.dateTime.month-=1
			},
			next() {
				this.currentDay = ""
				this.dateTime.month+=1
			},
			selectDate(value) {
				if (! value.day || value.day === 32) {
					return
				}
				this.dateTime.date=value.day
				this.mo=''
			},
			tomonth(){
				this.mo="month"
			}
		},
		ready() {
			this.currentDay = this.dateTime.date
		}
	}
</script>