<!--
@ 作者: 秦东
@ 时间: 2024-07-12 09:27:42
@ 备注: 日历
-->
<script lang='ts' setup>
import DateClass from '@/api/calendar/DateClass';
const props = defineProps({
	data: {
		type: Object,
		default() {
			return {};
		},
	},
	bodyHight:Number,
});
const  taday = ref<any>([]);
const curtteDayType = ref(1)
const curtteDay = ref(1)


const curttWeek = computed(()=>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	return DateClass.getWeek(DateClass.solarWeek(taday.value[0],taday.value[1],taday.value[2]))
})


const curtteMonth = computed(()=>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	if(taday.value.length >= 2){
		return taday.value[0]+"年"+taday.value[1]+"月"
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-07-12 11:12:12
@ 功能: 后退时间
*/
const backTime = () =>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
	taday.value  = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
	
}
/**
@ 作者: 秦东
@ 时间: 2024-07-12 14:04:06
@ 功能: 前进时间
*/
const forwardTime = () =>{
	if(taday.value.length <= 0){
		taday.value = DateClass.getCurrent()
	}
}
</script>
<template>
	<div class="calBox" :style="'height:calc(100vh - '+ props.bodyHight +'px)'">
		<!--日历头部-->
		<div class="calHead">
			<div>
				<i class="fa fa-calendar icont"></i>
				<el-text class="day">{{curtteMonth}}</el-text>
				<el-text class="week">{{curttWeek}}</el-text>
			</div>
			<div>
				<el-button-group class="ml-4">
					<el-button  size="small" >今天</el-button>
					<el-button :color="curtteDayType==1?'#a0cfff':''" @click="curtteDayType=1" size="small" >月</el-button>
					<el-button :color="curtteDayType==2?'#a0cfff':''" @click="curtteDayType=2" size="small" >周</el-button>
					<el-button :color="curtteDayType==3?'#a0cfff':''" @click="curtteDayType=3" size="small" >日</el-button>
					<el-button  size="small" class="fa fa-angle-left" @click="backTime()"></el-button>
					<el-button  size="small" class="fa fa-angle-right" @click="forwardTime()"></el-button>
				</el-button-group>
			</div>
		</div>
		<div class="weekNumber">
			{{DateClass.getMonday(taday[0],taday[1],taday[2],'e',0) }}
		</div>
	</div>
</template>
<style  lang='scss' scoped>
.calBox{
	width: 100%;
	.calHead{
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
		display: flex;
		align-items: center;
  		justify-content: space-between;
		.icont{
			font-size:20px;
		}
		.day{
			font-size:20px;
			padding: 0 10px;
			font-weight: bold;
		}
	}
	.weekNumber{

	}
}
</style>
