<template>
	<el-card shadow="hover" header="我的日程" class="item-background">
		<template #header>
			<el-icon style="display: inline; vertical-align: middle"> <ele-Calendar /> </el-icon>
			<span style=""> 我的日程 </span>
			<el-button type="primary" icon="ele-CirclePlus" round plain @click="openAddSchedule" style="float: right">添加日程</el-button>
		</template>

		<div class="custome-canlendar">
			<el-calendar v-model="state.calendarValue" ref="calendar">
				<template #header="{ date }">
					<span>{{ date }}</span>
					<el-button-group>
						<el-button size="small" @click="selectDate('prev-month')"> 上个月 </el-button>
						<el-button size="small" @click="selectDate('today')">今天</el-button>
						<el-button size="small" @click="selectDate('next-month')"> 下个月 </el-button>
					</el-button-group>
				</template>
				<template #date-cell="{ data }">
					<div @click="handleClickDate(data)">
						<div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
						<div v-for="(item, key) in state.ScheduleData" :key="key">
							<el-badge v-if="FormatDate(data.day) == FormatDate(item.scheduleTime)" is-dot class="item"></el-badge>
						</div>
						<div style="font-size: 10px">
							{{ solarDate2lunar(data.day) }}
						</div>
					</div>
				</template>
			</el-calendar>
		</div>
		<div class="schedule-list">
			<div class="item" v-for="(item, index) in state.TodayScheduleData" :key="index">
				<el-icon v-if="item.status == 1" class="icon" @click="changeStatus(item)"> <ele-CircleCheck /> </el-icon>
				<el-icon v-else class="icon" @click="changeStatus(item)"> <ele-Edit /> </el-icon>

				<span class="content" style="padding-left: 10px" @click="openEditSchedule(item)">
					<span> {{ item.startTime }} - {{ item.endTime }} </span>
					<span :class="item.status == 1 ? 'finish' : 'no'" style="padding-left: 15px; font-weight: 600; color: var(--el-color-primary)">
						{{ item.content }}
					</span>
				</span>
				<span style="float: right">
					<el-icon class="icon" @click="delItem(item)"> <ele-CircleClose /> </el-icon>
				</span>
			</div>
		</div>

		<EditSchedule ref="editScheduleRef" :title="state.editTitle" @handleQuery="handleQuery"> </EditSchedule>
	</el-card>
</template>

<script lang="ts">
export default {
	title: '日程',
	icon: 'ele-Calendar',
	description: '日程演示',
};
</script>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
import type { CalendarDateType, CalendarInstance } from 'element-plus';
import calendarCom from '/@/utils/calendar.js';

import EditSchedule from '/@/views/home/widgets/components/scheduleEdit.vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysScheduleApi } from '/@/api-services/api';
import { SysSchedule } from '/@/api-services/models';

const calendar = ref<CalendarInstance>();
const editScheduleRef = ref<InstanceType<typeof EditSchedule>>();
const state = reactive({
	ScheduleData: [] as Array<SysSchedule>, // 日程列表数据
	TodayScheduleData: [] as Array<SysSchedule>, // 当天列表数据
	calendarValue: new Date(),
	queryParams: {
		scheduleTime: new Date(),
		startTime: new Date(),
		endTime: new Date(),
	},
	editTitle: '',
	currentMonth: '',
});

// 页面初始化
onMounted(async () => {
	await handleQuery();
});

// 查询操作
const handleQuery = async () => {
	state.queryParams.startTime = dayjs(GetMonthFirstDay(state.calendarValue)).add(-1, 'month').toDate();
	state.queryParams.endTime = dayjs(GetMonthLastDay(state.calendarValue)).add(1, 'month').toDate();

	let params = Object.assign(state.queryParams);
	var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
	state.ScheduleData = res.data.result ?? [];
	// if (state.ScheduleData.length > 0) {
	state.TodayScheduleData = state.ScheduleData.filter((item) => {
		return FormatDate(item.scheduleTime) == FormatDate(state.calendarValue);
	});
	state.currentMonth = dayjs(state.calendarValue).format('YYYYMM');
};

const selectDate = async (val: CalendarDateType) => {
	if (!calendar.value) return;
	calendar.value.selectDate(val);
	await handleQuery();
};
// 删除
const delItem = (row: any) => {
	ElMessageBox.confirm(`确定删日程：${row.startTime}-${row.endTime}【${row.content}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await getAPI(SysScheduleApi).apiSysScheduleDeletePost(row);
			await handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

// 修改状态
const changeStatus = async (row: any) => {
	await getAPI(SysScheduleApi)
		.apiSysScheduleSetStatusPost({ id: row.id, status: row.status == 1 ? 0 : 1 })
		.then(() => {
			row.status = row.status == 1 ? 0 : 1;
			ElMessage.success('日程状态设置成功');
		})
		.catch(() => {
			ElMessage.success('日程状态设置异常');
		});
};

// 农历转换
const solarDate2lunar = (solarDate: any) => {
	var solar = solarDate.split('-');
	var lunar = calendarCom.solar2lunar(solar[0], solar[1], solar[2]);
	// return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn;
	return lunar.IMonthCn + lunar.IDayCn;
};

// 按天查询
const handleQueryByDate = async (date: any) => {
	state.queryParams.startTime = FormatDateDelHMS(date);
	state.queryParams.endTime = FormatDateEndHMS(date);
	let params = Object.assign(state.queryParams);
	var res = await getAPI(SysScheduleApi).apiSysSchedulePagePost(params);
	state.TodayScheduleData = res.data.result ?? [];
};

// 打开新增页面
const openAddSchedule = () => {
	var timerange = GetRecentTime();

	state.editTitle = '添加日程';
	editScheduleRef.value?.openDialog({ id: undefined, status: 0, orderNo: 100, scheduleTime: state.queryParams.scheduleTime, startTime: timerange.startTime, endTime: timerange.endTime });
};

// 打开编辑页面
const openEditSchedule = async (row: any) => {
	if (row.status == 1) return;
	state.editTitle = '编辑日程';
	editScheduleRef.value?.openDialog(row, true);
};

// 点击日历中的日期
const handleClickDate = async (data: any) => {
	if (state.currentMonth != dayjs(data.day).format('YYYYMM')) {
		await handleQuery();
	}
	await handleQueryByDate(data.day);
	state.queryParams.scheduleTime = data.day;
};

// 获取当月第一天
const GetMonthFirstDay = (date: any) => {
	var newDate = new Date(date);
	newDate.setDate(1);
	newDate.setHours(0);
	newDate.setMinutes(0);
	newDate.setSeconds(0);
	return newDate;
};

// 获取当月最后一天
const GetMonthLastDay = (date: any) => {
	var newDate = new Date(date);
	newDate.setMonth(newDate.getMonth() + 1);
	newDate.setDate(0);
	newDate.setHours(0);
	newDate.setMinutes(0);
	newDate.setSeconds(0);
	return newDate;
};

// 去掉时分秒的日期
const FormatDateDelHMS = (date: any) => {
	var newDate = new Date(date);
	newDate.setHours(0);
	newDate.setMinutes(0);
	newDate.setSeconds(0);
	return newDate;
};

const FormatDateEndHMS = (date: any) => {
	var newDate = new Date(date);
	newDate.setHours(23);
	newDate.setMinutes(59);
	newDate.setSeconds(59);
	return newDate;
};

// 格式化日期
const FormatDate = (date: any) => {
	return dayjs(date).format('YYYY-MM-DD');
};

// 获取最近的初始时间  EndTime默认为StartTime + 1(hour)
const GetRecentTime = () => {
	var date = new Date();
	// 计算最近的开始时间
	var currentHour = date.getHours();
	var currentMin = date.getMinutes();

	var starHour = dayjs(date).format('HH');
	var endHour = dayjs(date).format('HH');
	var starMin = '00';
	var endMin = '00';
	// 如果当前时间已经23 那么starHour和endHour都是23
	if (currentHour == 23) {
		starHour = '23';
		endHour = '23';
		starMin = '00';
		endMin = '45';
	} else {
		// 判断分钟数属于那个层级
		if (currentMin < 15) {
			starMin = '15';
			endMin = '15';
			// 计算结束时间
			date.setHours(date.getHours() + 1);
			endHour = dayjs(date).format('HH');
		} else if (currentMin >= 15 && currentMin < 30) {
			starMin = '30';
			endMin = '30';

			// 计算结束时间
			date.setHours(date.getHours() + 1);
			endHour = dayjs(date).format('HH');
		} else if (currentMin >= 30 && currentMin < 45) {
			starMin = '45';
			endMin = '45';
			// 计算结束时间
			date.setHours(date.getHours() + 1);
			endHour = dayjs(date).format('HH');
		} else if (currentMin >= 45) {
			// 分钟 : 00
			starMin = '00';
			endMin = '00';

			// 开始时间+1
			date.setHours(date.getHours() + 1);
			starHour = dayjs(date).format('HH');
			// 计算结束时间
			date.setHours(date.getHours() + 1);
			endHour = dayjs(date).format('HH');
		}
	}
	return { startTime: starHour + ':' + starMin, endTime: endHour + ':' + endMin };
};
</script>

<style lang="scss" scoped>
.custome-canlendar {
	position: relative;
	text-align: center;

	:deep(.el-calendar) {
		.el-calendar-table .el-calendar-day {
			width: 100%;
			height: 100%;
		}

		.el-calendar__body {
			padding: 5px 0;
		}

		.el-calendar-table .el-calendar-day {
			position: relative;
		}

		td .spandate {
			margin: auto;
			width: 26px;
			height: 26px;
			line-height: 26px;
			border-radius: 50%;
		}
		td.is-selected .spandate {
			width: 26px;
			height: 26px;
			line-height: 26px;
			border-radius: 50%;
			color: #fff;
			background-color: var(--el-color-primary);
		}
		/*小红点样式*/
		.el-badge {
			position: absolute;
			left: 0;
			bottom: -8px;
			width: 100%;
		}
	}
}

// 日程列表
.schedule-list {
	overflow-y: auto;
	height: 150px;
	.item {
		position: relative;
		margin-bottom: 5px;
		padding: 0 11px;
		line-height: 24px;
		background-color: #f1f1f1;
		cursor: pointer;

		&::before {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			content: '';
			width: 3px;
			background: var(--el-color-primary);
		}

		.date {
			margin-right: 5px;
			font-size: 14px;
		}
		.content {
			color: #666;
			font-size: 14px;
		}
		.icon {
			display: inline;
			vertical-align: middle;
			color: var(--el-color-primary);
		}
		.finish {
			text-decoration: line-through 2px var(--el-color-danger) !important;
		}
	}
}
</style>
