<template>
	<div class="mui-content-padded vongi-cytx-time">
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li v-for="i in weekDay" class="mui-table-view-cell mui-media">
				<span class="color999">{{ i }}</span>
			</li>
		</ul>
		<div class="vongi-cytx-date vongi-center">2020年10月</div>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li v-for="item in canlender" class="mui-table-view-cell mui-media">
				<a :class="today==item.date?'mui-active':''">
					<span>{{ item.dateNum }}</span>
					<div class="mui-media-body"></div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'DrugCalendar',
		data() {
			return {
				msg: [],
				weekDay: ["日", "一", "二", "三", "四", "五", "六"],
				canlenderObj: null,
				canlender: [],
				currentDate: new Date(),
			};
		},

		methods: {
			//切换月
			editMonth(type) {
				const num = type === "sub" ? -1 : 1;
				this.currentDate.setMonth(this.currentDate.getMonth() + num);
				this.canlender = [];
				this.init(this.currentDate);
			},
			//切换日
			editDate(date, type = "add", number = 1) {
				const types = type === 'add' ? 1 : -1
				const dates = date.getDate()
				const newDate = new Date(date)
				newDate.setDate(dates + number * types)
				return newDate
			},
			//获取日
			formatDate(date) {
				return parseUnixTime(date, '{y}-{m}-{d}');
			},
			//初始化
			init(date = new Date()) {
				// 把当前日期定位到一号
				const currentDate = new Date(date)
				currentDate.setDate(1)

				// 获取当前年月
				this.year = currentDate.getFullYear()
				this.month = currentDate.getMonth()

				// 获取星期
				const currentWeek = currentDate.getDay()

				// 第一排放入一号的日期
				this.canlender.push({
					date: this.formatDate(currentDate),
					dateNum: currentDate.getDate()
				})

				// 根据一号的日期向前补齐
				for (let i = 0; i < currentWeek; i++) {
					const date = this.editDate(currentDate, 'sub', i + 1)
					this.canlender.unshift({
						date: this.formatDate(date),
						dateNum: date.getDate()
					})
				}

				// 根据一号日期向后补齐，总共放六周日期
				for (let i = 1; i < 42 - currentWeek; i++) {
					const date = this.editDate(currentDate, 'add', i)
					this.canlender.push({
						date: this.formatDate(date),
						dateNum: date.getDate()
					})
				}
				//console.log(this.canlender)
			},
		},
		mounted() {
			this.init();
		},
		computed: {
			today: {
				// getter
				get: function() {
					return this.formatDate(currentTimeStamp());
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped>
	.week-day div,
	.date-container div {
		display: inline;
	}
</style>
