<template>
  <PageWrapper dense fixedHeight contentFullHeight>
    <div class="schedule-box">
      <FullCalendar :options="scheduleData" />
      <ScheduleModal @register="registerModal" @success="handleSuccess" />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import FullCalendar from '@fullcalendar/vue3';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  import { CalendarOptions } from '@fullcalendar/core';
  import { getScheduleList } from '/@/api/system/schedule';
  import ScheduleModal from './components/ScheduleModal.vue';
  import { useModal } from '/@/components/Modal';
  import { PageWrapper } from '/@/components/Page';

  const handleDateClick = (day) => {
    openModal(true, { date: day.dateStr });
  };

  const handleEventClick = ({ event }) => {
    openModal(true, { eventId: event.id });
  };
  const [registerModal, { openModal }] = useModal();

  const scheduleData = ref<CalendarOptions>({
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    dateClick: handleDateClick,
    eventClick: handleEventClick,
    locale: 'zh-cn',
    themeSystem: '#000',
    headerToolbar: {
      left: '',
      center: 'prev,title,next',
      right: '',
    },
    events: [],
  });

  onMounted(() => {
    handleSuccess();
  });

  const handleSuccess = async () => {
    scheduleData.value.events = await getScheduleList();
  };
</script>
<style lang="less">
  .schedule-box {
    border-radius: 16px;
    height: 100%;

    .fc-toolbar-title {
      font-size: 20px;
      font-weight: normal;
    }

    .fc .fc-toolbar.fc-header-toolbar {
      background: #f7fbff;
      border-radius: 16px 16px 0 0;
      border: 1px solid #e9edf2;
      height: 80px;
      margin: 0;
    }

    .fc-toolbar-chunk > div {
      display: flex;
    }

    .fc-button,
    .fc-button:active,
    .fc-button:hover {
      background-color: transparent !important;
      border: none !important;
      color: #333 !important;
      box-shadow: none !important;
      padding: 0 10px;
    }

    .fc-direction-ltr {
      background: #fff;
      height: 100%;
      border-radius: 16px;
    }

    .fc-scrollgrid-sync-inner {
      text-align: right;
    }

    .fc .fc-col-header-cell-cushion {
      color: #c3c8cf;
      font-size: 12px;
      padding: 16px 16px 22px 0;
      font-weight: normal;
    }

    .fc .fc-daygrid-day-number {
      color: #333;
      font-size: 12px;
      padding: 16px 16px 10px 4px;
    }

    .fc-direction-ltr .fc-daygrid-event.fc-event-end {
      background: rgb(28 141 255 / 8%);
      border-radius: 4px;
      padding: 0 8px;
      border: 0;
      height: 32px;
      line-height: 32px;
      margin: 0 8px 10px;
      text-align: left;

      &.fc-event-past {
        background: rgb(255 84 97 / 8%);
        color: #ff5461;

        .fc-event-main {
          color: #ff5461;
        }
      }

      &.fc-event-future {
        background: rgb(39 192 122 / 8%);
        color: #27c07a;
      }
    }

    .fc-h-event .fc-event-main {
      color: #1c8dff;
    }

    .fc-direction-ltr .fc-daygrid-event .fc-event-time {
      margin: 0;
      flex: none;
      font-weight: normal;
    }

    .fc .fc-daygrid-day.fc-day-today {
      background: transparent;

      .fc-daygrid-day-frame {
        background: rgb(255 119 0 / 8%);
        border-radius: 4px;
        margin: 8px;
        min-height: calc(100% - 16px);
      }
    }

    .fc-daygrid-event-dot {
      display: none;
    }

    .fc-event-title {
      font-weight: normal;
    }

    .fc-theme-standard .fc-scrollgrid {
      border: 0;

      td,
      th {
        border: 0;
      }

      .fc-col-header th {
        border: 1px solid #e9edf2;
      }
    }

    .fc-theme-standard .fc-scrollgrid-sync-table tbody tr {
      td {
        border: 1px solid #e9edf2;
      }

      &:last-child {
        td {
          border-bottom: 0;

          &:first-child {
            border-bottom-left-radius: 16px;
          }

          &:last-child {
            border-bottom-right-radius: 16px;
          }
        }
      }
    }
  }
</style>
