<!-- 全县值班 -->
<template>
  <div class="calendar">
    <div class="card" ref="cal" @date-click="handleDateClick"></div>
  </div>
</template>

<script setup>
import { ref, nextTick, defineEmits, onMounted, watch } from "vue";
import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
const emit = defineEmits(["calClick"]);
const props = defineProps({
  //数据
  list: Array,
  //是否可点击日程
  isClick: Boolean
});
const Tcalendar = ref(null);
function initCalendar() {
  Tcalendar.value = new Calendar(cal.value, {
    // timeZone: 'UTC',
    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
      left: "todayCustom",
      center: "title",
      right: "prevMonthCustom,nextMonthCustom"
    },
    //自定义按钮
    customButtons:{
      prevMonthCustom:{
        text:'上月',
        click:function(){
          Tcalendar.value.prev()
          Tcalendar.value.render();
        }
      },
      nextMonthCustom:{
        text:'下月',
        click:function(){
          Tcalendar.value.next()
          Tcalendar.value.render();
        }
      },
      todayCustom:{
        text:'今天',
        click:function(){
          Tcalendar.value.today()
          Tcalendar.value.render();
        }
      }
    },
    locale: "zh-cn",
    weekNumbers: true, //是否显示一年第几周
    selectable: props.isClick, //是否可点击日程 || 日期
    dayMaxEvents: true, // 是否可显示弹窗
    events: props.list,
    displayEventTime: true, // 是否显示时间
    eventClick: function (info) {
      emit("calClick", info.event._def.extendedProps.myData);
    }
  });
  Tcalendar.value.render();
}
watch(
  () => props.list,
  () => {
    initCalendar()
  },{deep:true}
);
const data = ref({});
const cal = ref(null);
onMounted(() => {
  initCalendar();
});
</script>

<style lang="scss" scoped>
.calendar {
  height: calc(100% - 60px);
  .card {
    height: 100%;
    width: 100%;
  }
}
::v-deep .el-dialog__body,::v-deep.fc-toolbar-title {
  color: #ffffff;
}

::v-deep .fc-h-event .fc-event-title-container {
  text-align: center;
}
::v-deep .fc-theme-standard .fc-scrollgrid {
  border: 1px solid #295ead;
}
::v-deep .fc-theme-standard td,
::v-deep .fc-theme-standard th {
  border: 0 none;
}
::v-deep .fc-theme-standard td {
  border-right: 1px solid #295ead;
}
::v-deep .fc-theme-standard th {
  background: #0b4372;
  padding: 3px 0;
}
::v-deep .fc-scrollgrid-sync-table tr:nth-child(even) {
  background: #062555;
}
</style>
