<template>
    <div class="app-container">
        <FullCalendar ref="calendarRef" :options="calendarOptions" />
    </div>
</template>

<script setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interaction from "@fullcalendar/interaction";
import { ref, onMounted } from 'vue'
import { getApi, postApi } from "@/api/tobAcco_api.js";

const matchList = ref([]);
const calendarRef = ref(null);
onMounted(() => {
    getWorkListData()
})
// 获取工作代办列表
const getWorkListData = () => {
    matchList.value = []
    getApi({
        pageCurrent: 1,
        pageSize: 1000,
        zdlx: "02",
        clzt: '01'
    }, `/mosty-jcgl/rw/getRwPage`).then((res) => {
        if (res.records) {
            const events = res.records.map(item => ({
                id: item.id,
                title: item.info,
                start: item.addtime,
                allDay: false,
                color: "#FECACA",
            }));

            // 使用 FullCalendar 的 API 添加事件
            if (calendarRef.value) {
                const calendarApi = calendarRef.value.getApi();
                calendarApi.removeAllEvents(); // 清除现有事件
                events.forEach(event => {
                    calendarApi.addEvent(event);
                });
            }
        }
    });
}
const handleDateSelect = (e) => {
    // console.log(e, "handleDateSelect");
};

const handleEventClick = (e) => {
    // console.log(e, "handleEventClick");

};

const handleEvents = (e) => {
    // console.log(e, "handleEvents");
};
const eventDrop = (
    event,
    dayDelta,
    minuteDelta,
    allDay,
    revertFunc,
    jsEvent,
    ui,
    view
) => {

};
// 开始拖拽
const startDrag = (event, jsEvent, ui) => {
    console.log(event, 'ssss');
    let obj = event.event
    let id = obj.id
    let start = obj.startStr
    let end = obj.endStr
    console.log([start, end], '开始拖拽时间点');
}
// 拖拽结束
const stopDrag = (event, jsEvent, ui) => {
    console.log(event, 'endedb');
    let obj = event.event
    let start = obj.startStr
    let end = obj.endStr
    console.log([start, end], '结束拖拽时间点');
}
// 定义日历配置
const calendarOptions = {
    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interaction],
    locale: "zh-cn",
    firstDay: "1",
    initialView: "dayGridMonth", // 初始视图
    weekends: true, // 显示周末
    height: 280, //日历高度
    eventColor: "#3BB2E3", // 全部日历日程背景色
    themeSystem: "bootstrap", // 主题色(本地测试未能生效)
    timeGridEventMinHeight: "10", // 设置事件的最小高度
    aspectRatio: 1.15, // 设置日历单元格宽度与高度的比例。
    moreLinkText: (num) => `共${num}个待办`,
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        // right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
        right: "dayGridMonth,listWeek",
    },
    buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        list: '周列表',
        day: '日'
    },
    slotLabelFormat: {
        hour: "2-digit",
        minute: "2-digit",
        meridiem: false,
        hour12: false,
    },
    handleWindowResize: true,
    droppable: true, //可拖拽的
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    weekends: true,
    selectable: true, // 是否可以选中日历格
    selectMirror: true,
    selectMinDistance: 0, // 选中日历格的最小距离
    dayMaxEvents: true,
    weekends: true,
    navLinks: true, // 天链接
    selectHelper: false,
    slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
    select: handleDateSelect,
    eventClick: handleEventClick,
    eventsSet: handleEvents,
    eventDragStart: startDrag,
    eventDragStop: stopDrag,
    events: [],
};
</script>
<style lang="scss" scoped>
#app-container {
    height: 100%;
    overflow: auto;
}

:deep(.fc .fc-daygrid-more-link) {
    margin-top: -10px;
    color: red;
}
</style>