<template>
	<view class="com-plan-date calendar"> 
		<view class="list">
			<view  class="row" v-for="(row, rowIndex) in calendarRows" :key="rowIndex">
				<view  class="item" v-for="(item, itemIndex) in row" :key="itemIndex">
					<text  v-if="rowIndex === 0" class="text">{{ item }}</text>
					<!-- 显示日期 -->
					<view   @click="onViewDate(item, itemIndex)" class="text" v-else :class="{ active: rowIndex === 1 && itemIndex === activeIndex }">{{ item.day }}</view>
				</view>
			</view>
		</view> 
	</view>
</template>
<script>
	export default {
		name:"PlanDate",
		emits:['onSetDate'],
		data(){
			return {
				dataList:[],
				activeIndex:0,
				calendarRows:''
			}
		},
		created() {
			this.initDate();
		},
		methods:{
			
			onViewDate(e,index){
				this.activeIndex=index;
				console.log(e.date);
				this.$emit("onSetDate",e.date);
			}, 
		initDate() {
			
		    let _this = this;
		    let d = new Date();
		    let weeks = ['日', '一', '二', '三', '四', '五', '六'];
		
		    // 创建一个新的数组来存储日历的行
		    _this.calendarRows = [];
		
		    // 首行显示星期日到星期六
		    _this.calendarRows.push(weeks);
	
		    // 下面显示最近的14天
		    let datesRow = [];
		    for (var i = 0; i < 14; i++) {
		        let temp = {
		            'date': d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(),
		            'week': weeks[d.getDay()],
		            'day': d.getDate() < 10 ? '0' + d.getDate() : d.getDate(),
		        }
		         datesRow.push(temp);
		        
		                
		        
		                d.setDate(d.getDate() + 1);
		    }
		
		    // 如果日期少于7个，添加空元素
		    while (datesRow.length < 7) {
		        datesRow.push({});
		    }
		
		    _this.calendarRows.push(datesRow);
		}
		},
		
		
	}
</script>


<style scoped>
@import url(./PlanDate.scss);
</style>
