<script setup>
import { ref, reactive, onMounted } from 'vue'

import '@fullcalendar/core/vdom'; // solve problem with Vite
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import moment from 'moment'

const props = defineProps({
    showMark:{
        type:Boolean,
        default:true
    },
    markText:{
        type:Object,
        default:{
            date:'2024-04',
            type:'当前品种'
        }
    },

})
const emit = defineEmits(["dateClick","eventClick"])
let FullCalendarRef = ref(null)
let calendarApi = ref(null)
let calendarOptions = ref({
    height:'100%',
    locale: "zh-cn",
    plugins: [ dayGridPlugin, interactionPlugin ],
    initialView:'dayGridMonth',
    headerToolbar:false,//不显示头部信息
    weekNumberCalculation:'ISO',//从周一开始
    dayHeaderFormat:{ //https://fullcalendar.io/docs/v5/date-formatting
        weekday:'narrow', //头部星期显示为一 二 三...
    },
    fixedWeekCount:false,
    eventOrder:'sort',
    dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
        return arg.date.getDate()
    },
    dateClick:handleDateClick,
    eventClick:handleEventClick
})
function handleDateClick(info){
    emit("dateClick",info)
}
function handleEventClick(info){
    emit("eventClick",info)
}

onMounted(()=>{
    calendarApi.value = FullCalendarRef.value.getApi()

})
defineExpose({ calendarApi });
</script>

<template>
    <div class="base-calendar-wrap">
        <FullCalendar :options="calendarOptions" ref="FullCalendarRef" class="full-calendar-wrap">
            <template #eventContent="arg">
                <div class="popper-content"
                    :style="{fontWeight:arg.event.extendedProps.font_bold?'bold':'normal'}"
                >
                   {{arg.event.title||''}}
                </div>
            </template>
        </FullCalendar>
        <div class="water-mark" v-if="showMark">
            <p>{{ moment(markText.date).format("YYYY-MM") }}</p>
            <p>{{ markText.type }}</p>
        </div>
    </div>
    
</template>

<style scoped lang="scss">
.base-calendar-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
    position:relative;
    .full-calendar-wrap{
        z-index: 2;
        flex: 1;
        :deep(.fc-daygrid-day-top){ //日期偏左显示
            flex-direction: row;
        }
        :deep(.fc-daygrid-event){
            border-radius: 0;
            margin:0 !important;
        }
        /* :deep(.fc-col-header){
            width:100% !important;
        }
        :deep(.fc-daygrid-body){
            width:100% !important;
        }
        :deep(.fc-scrollgrid-sync-table){
            width:100% !important;
        } */
        :deep(.fc-daygrid-day-number){
            font-size: 12px;
            line-height: 12px;
            padding:0 2px;
        }
        :deep(.fc-scrollgrid-sync-inner){
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
        }
        :deep(.fc-daygrid-day-frame.fc-scrollgrid-sync-inner){
            display: block;
        }
        :deep(.fc-col-header-cell-cushion ){
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        :deep(.fc-scroller){
            overflow:auto !important; //x,y轴在横屏情况下会对调,默认可滚动
            &::-webkit-scrollbar{
                width: 0;
            }
        }
        :deep(.fc-scrollgrid){
            border:none;
            .fc-scrollgrid-section-header{
                th{
                    border:none !important;
                }
                .fc-col-header-cell{
                    //font-weight: 500;
                    .fc-scrollgrid-sync-inner{
                        justify-content: flex-start;
                    }
                }
            }
            .fc-scrollgrid-section-body{
                td{
                    border: none !important;
                    border-left:3px solid #E3B377 !important;
                }
            }
        }
        :deep(.fc-daygrid-day-events){
            min-height: 32px !important;
            margin-top: 0 !important;
        }
        :deep(.fc-more-popover){
            display:none !important;
        }
        :deep(.fc-daygrid-day-bottom){
            font-size: 12px;
            display: none;
        }
        :deep(.fc-daygrid-more-link.fc-more-link){
            font-size: 12px;
        }
        .popper-content{
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* height: 16px; */
        }
    }
    .water-mark{
        z-index: 1;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 64px;
        opacity: 0.3;
        p{
            margin:0;
            padding:0;
        }
    }
}
</style>
