<!--
@ 作者: 秦东
@ 时间: 2024-07-13 09:34:05
@ 备注: 月日历
-->
<script lang='ts' setup>
import Calendar from '@/api/calendar/Calendar';
import DateClass from '@/api/calendar/DateClass';

import { clockFactory } from '@/api/calendar/utils';

import CalendarItem from './calendarItem.vue';

const props = defineProps({
	bodyHight:Number,
	taDay:{
		type:Array,
		default() {
			return [2024,7,13];
		},
	}
});

const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
const emit = defineEmits(['getDate']);
function changeDate(time: dateBase) {
    selectedTime.value = time.date;
    emit('getDate', time);
}
//画板高度
const drawingBoardHeight = computed(()=>{
	return props.bodyHight + 50
})
//周期
const THeader = Calendar.title();
//日期
const TBody = computed(() =>
    Calendar.table(props.taDay)
);
</script>
<template>
	{{props.taDay}}
	<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
		<ul class="t-calendar-header">
            <li v-for="(item, index) in THeader" :key="index">
                {{ item }}
            </li>
        </ul>
		<div class="t-calendar-day">
			<template v-if="TBody.length">
				<div
                    class="t-calendar-row"
                    v-for="(item, index) in TBody"
                    :key="index"
                >
					<div
                        class="t-calendar-col"
                        v-for="(col, colIdx) in item"
                        :key="colIdx"
                    >
						<CalendarItem
                            :col="col"
                            :time="selectedTime"
                            @changeTargetDate="changeDate"
                        ></CalendarItem>
					</div>
				</div>
			</template>
            <template v-else>
                <div class="no-date">抱歉,暂无数据</div>
            </template>
			 
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.monthCalendarBox{
	width: 100%;
	margin-top: 10px;
	.t-calendar-header {
		display: flex;
        width: 100%;
        height: 42px;
        padding: 0;
        box-sizing: border-box;
        li {
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	flex: 1;
        	font-size: 0.95rem;
        }
    }
	.t-calendar-day {
		display: flex;
        flex-direction: column;
        width: 100%;
		height: calc(100% - 42px);
		.t-calendar-row {
			width: 100%;
            height: 60px;
            display: flex;
            flex: 1;
            border-bottom: 1px solid #ebeef5;
			.t-calendar-col{
				box-sizing: border-box;
                flex: 1;
                border-left: 1px solid #ebeef5;
                padding: 2px;
                font-size: 16px;
                transition: all 0.2s;
			}
			.t-calendar-col:last-child {
                border-right: 1px solid #ebeef5;
            }
		}
		.t-calendar-row:first-child {
        	border-top: 1px solid #ebeef5;
        }
	}
}
</style>
