<template>
	<div class="calendar-container">
		<el-calendar ref="calendar">
			<template #header="{ date }">
				<div class="calendar-header">
					<span class="iconfont icon-left" @click="selectDate('prev-month')">&lt;</span>
					<span>{{ date }}</span>
					<span class="iconfont icon-right" @click="selectDate('next-month')">&gt;</span>
				</div>

			</template>
			<template #dateCell="{ data }">
				<div :class="data.isSelected ? 'is-selected' : ''">
					{{ data.day.split('-')[2] }}
				</div>
			</template>
		</el-calendar>
		<div class="calendar-bottom">
			<div class="calendar-tips">您今日无待办</div>
			<el-button type="primary" @click="setTask">马上去安排</el-button>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getApi, postApi } from "@/api/tobAcco_api.js";

const calendar = ref()
const selectDate = (val) => {
	if (!calendar.value) return
	calendar.value.selectDate(val)
}
const setTask = () => {

}
onMounted(() => {
	// setTimeItems()
	// getTableData()
})
</script>

<style lang="scss" scoped>
.calendar-container {
	margin-top: 10px;
	// height: calc(100% - 40px);
	// height: 290px;
	height: calc(100vh - 700px);

	.calendar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.icon-left,
		.icon-right {
			cursor: pointer;
			font-size: 18px;
			color: #000;
			font-weight: bold;

			&:hover {
				color: var(--el-color-primary);
			}
		}
	}

	.calendar-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		gap: 20px;

		.calendar-tips {
			flex: 1;
			height: 32px;
			background-color: #FFF0E6;
			color: #FE964A;
			padding: 6px 10px;
			border-radius: 4px;
		}
	}
}

::v-deep .el-calendar__header {
	border: none;
}

::v-deep .el-calendar__body {
	padding: 0;
}

::v-deep .el-calendar-table thead th {
	color: #006E4A;
	background-color: #BDEBD9;
}

::v-deep .el-calendar-table:not(.is-range) td.prev {
	border: none;
}

::v-deep .el-calendar-table td {
	border: none;
}

::v-deep .el-calendar-table .el-calendar-day {
	text-align: center;
	align-content: center;
}

::v-deep .el-calendar-table .el-calendar-day {
	// height: 38px;
	height: calc((100vh - 750px) / 6);
}

::v-deep .el-calendar-table tr td {
	border: none;
}
</style>
