Vue.component('ibiz-calendar', {
    template: `
        <div><div>
    `,
    props: ['control'],
    data: function () {
        let data: any = {
            calendar: null,
            http: IBizHttp.getInstance(),
        };
        return data;
    },
    methods: {
        formateDate(date: any) {
            const d = new Date(date)
            const resDate = d.getFullYear() + '-' + this.complement((d.getMonth() + 1)) + '-' + this.complement(d.getDate())
            const resTime = this.complement(d.getHours()) + ':' + this.complement(d.getMinutes()) + ':' + this.complement(d.getSeconds())
            return `${resDate} ${resTime}`;
        },
        complement(s: number) {
            return s < 10 ? '0' + s : s
        },
        calendarRender() {
            let _this = this;
            const calendarType: string = _this.control.getCalendarType();
            const height = _this.control.getHeight();
            let headerRight: string[] = [];
            let defaultView: string = 'dayGridMonth';
            if (Object.is(calendarType, 'MONTH')) {
                headerRight.push('dayGridMonth');
                defaultView = 'dayGridMonth';
            } else if (Object.is(calendarType, 'WEEK')) {
                headerRight.push('dayGridWeek');
                defaultView = 'dayGridWeek';
            } else if (Object.is(calendarType, 'DAY')) {
                headerRight.push('dayGridDay');
                defaultView = 'dayGridDay';
            } else {
                headerRight.push('dayGridMonth');
                headerRight.push('dayGridWeek');
                headerRight.push('dayGridDay');
            }

            let isClicked: boolean = false;
            let isDblClicked: boolean = false;

            this.calendar = new FullCalendar.Calendar(_this.$el, {
                plugins: ['interaction', 'dayGrid'],
                header: {
                    left: 'prevYear,prev,next,nextYear, today',
                    center: 'title',
                    right: headerRight.join(','),
                },
                eventLimit: true,
                locale: 'zh-cn',
                editable: true,
                defaultView: defaultView,
                height: height,
                businessHours: true,
                events: (info: any, successCallback: any, failureCallback: any) => {
                    const params: any = {
                        srfctrlid: _this.control.getName(),
                        srfaction: 'fetch',
                    };
                    const url: string = _this.control.getBackendUrl();
                    _this.http.post(url, params).subscribe((data: any) => {
                        if (data.ret == 0) {
                            data.items.forEach((item: any, index: number) => {
                                item.start = item.begintime;
                                item.end = item.endtime;
                                item.title = item.text;
                                item.textColor = item.color;
                                item.color = item.bkcolor;
                            });
                            successCallback(data.items);
                        } else {
                            failureCallback([]);
                        }
                    }, (error: any) => {
                        failureCallback([]);
                    });
                },
                eventDrop: (arg: any) => {
                    const event: any = arg.event;
                    const params: any = {
                        srfaction: 'update',
                        srfctrlid: _this.control.getName(),
                        srfitemid: event.id,
                        begintime: this.formateDate(event.start),
                        endtime: this.formateDate(event.end),
                    };
                    const url: string = _this.control.getBackendUrl();
                    _this.http.post(url, params).subscribe((data: any) => {
                        if (data.ret == 0) {
                            console.log(data);
                        } else {
                        }
                    }, (error: any) => {

                    });
                },
                eventClick: (arg: any) => {
                    if (isClicked) {
                        isDblClicked = true;
                        isClicked = false;
                    } else {
                        isClicked = true;
                    }
                    setTimeout(() => {
                        isClicked = false;
                        isDblClicked = false;
                    }, 200);
                    if (!isDblClicked) {
                        return;
                    }
                    if (arg.event) {
                        _this.control.fire(IBizCalendar.ROWDBLCLICK, [{ srfkey: arg.event.id }]);
                    }
                },
                dateClick: (arg: any) => {
                    if (isClicked) {
                        isDblClicked = true;
                        isClicked = false;
                    } else {
                        isClicked = true;
                    }
                    setTimeout(() => {
                        isClicked = false;
                        isDblClicked = false;
                    }, 200);
                    if (!isDblClicked) {
                        return;
                    }
                    _this.control.fire(IBizCalendar.ROWDBLCLICKNEWDATA, [{ begintime: `${arg.dateStr} 00:00:00` }]);
                },
            });
            this.calendar.render();
        },
    },
    mounted: function () {
        if (!this.calendar) {
            this.calendarRender();
        }
    },
    watch: {
        'control.refreshCount': function (newVal: number, oldVal: number) {
            if (this.calendar && newVal > 1) {
                this.calendar.refetchEvents();
            }
        }
    },
});