import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { AppCalendarUtil } from '../../util/AppCalendarUtil';
import * as moment from 'moment';

@Component({
    selector: 'app-calendar',
    templateUrl: './app-calendar.html',
    styleUrls: ['app-calendar.scss']
})
export class AppCalendar implements OnInit {
    @Input()
    set data(val: any[]) {
        if (val) {
            this.items = val;
            this.items.forEach((item: any) => {
                // const date: Date = moment(item.begintime, this.dateFormat).toDate();
                const date: Date = new Date(item.begintime);
                this.dateIsData[`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`] = true;
            });
        }
    }
    /**
     * 设置当前选中时间
     *
     * @memberof AppCalendar
     */
    @Input()
    set activeDate(val: {year: number, month: number, day: number}) {
        if (val) {
            this.year = val.year;
            this.month = val.month;
            this.day = val.day;
        }
    }
    /**
     * 选中时间变更事件
     *
     * @type {EventEmitter<{year: number, month: number, day: number}>}
     * @memberof AppCalendar
     */
    @Output()
    activeDateChange: EventEmitter<{year: number, month: number, day: number}> = new EventEmitter();
    /**
     * 数据
     *
     * @type {any[]}
     * @memberof AppCalendar
     */
    public items: any[] = [];
    /**
     * 当前日期是否有数据
     *
     * @type {*}
     * @memberof AppCalendar
     */
    public dateIsData: any = {};
    /**
     * 日历工具类
     *
     * @type {AppCalendarUtil}
     * @memberof AppCalendar
     */
    public calendarUtil: AppCalendarUtil = new AppCalendarUtil();
    /**
     * 日历当前显示年份
     *
     * @type {number}
     * @memberof AppCalendar
     */
    public year: number;
    /**
     * 日历当前显示月份
     *
     * @type {number}
     * @memberof AppCalendar
     */
    public month: number;
    /**
     * 日历当前选中天
     *
     * @type {number}
     * @memberof AppCalendar
     */
    public day: number;
    /**
     * 日历显示内容
     *
     * @type {any[]}
     * @memberof AppCalendar
     */
    public content: any[] = [];
    /**
     * 是否为月显示模式
     *
     * @type {boolean}
     * @memberof AppCalendar
     */
    public isMonthMode: boolean = true;
    /**
     * 日期格式
     *
     * @type {string}
     * @memberof AppCalendar
     */
    public dateFormat: string = 'YYYY-MM-DD HH:mm:ss';

    /**
     * Creates an instance of AppCalendar.
     * @memberof AppCalendar
     */
    constructor() {
        this.year = this.calendarUtil.year;
        this.month = this.calendarUtil.month;
        this.day = this.calendarUtil.day;
        this.showMonthDaysChange();
    }

    public ngOnInit() { }

    /**
     * 设置当前激活天
     *
     * @param {*} item
     * @param {number} month
     * @memberof AppCalendar
     */
    public activeDay(item: any, month: number): void {
        if (item && item.day) {
            this.day = item.day;
        }
        if (this.month !== month) {
            if (this.month > month) {
                this.monthChange(false);
            } else {
                this.monthChange(true);
            }
            this.showMonthDaysChange();
        }
        this.onChange();
    }

    /**
     * 发送选中时间变更事件
     *
     * @memberof AppCalendar
     */
    public onChange(): void {
        this.activeDateChange.emit({
            year: this.year,
            month: this.month,
            day: this.day
        });
    }

    /**
     * 改变当前显示模式
     *
     * @memberof AppCalendar
     */
    public showModeChange() {
        this.isMonthMode = !this.isMonthMode;
        this.showMonthDaysChange();
    }

    /**
     * 获取当前显示
     *
     * @memberof AppCalendar
     */
    public showMonthDaysChange(): void {
        const arr: any[] = this.calendarUtil.getDaysCurrentMonth(this.month, this.year);
        this.content = [];
        if (this.isMonthMode) {
            this.content.push(...arr);
        } else {
            this.content.push(arr.find((items: any[]) => {
                const num: number = items.findIndex((item) => (item.day === this.day && item.month === this.month));
                return num !== -1;
            }));
        }
    }

    /**
     * 上个月
     *
     * @memberof AppCalendar
     */
    public lastMonth(): void {
        if (this.isMonthMode) {
            this.monthChange(false);
            this.showMonthDaysChange();
        } else {
            // this.weeksChange(false);
        }
    }

    /**
     * 下个月
     *
     * @memberof AppCalendar
     */
    public nextMonth(): void {
        if (this.isMonthMode) {
            this.monthChange(true);
            this.showMonthDaysChange();
        } else {
            // this.weeksChange(true);
        }
    }

    /**
     * 月份变更
     *
     * @param {boolean} [isNext=true] 下个月 or 上个月
     * @memberof AppCalendar
     */
    public monthChange(isNext: boolean = true): void {
        if (this.month === 0) {
            this.month = isNext ? 1 : 11;
            if (!isNext) {
                --this.year;
            }
        } else if (this.month === 11) {
            this.month = isNext ? 0 : 10;
            if (isNext) {
                ++this.year;
            }
        } else {
            this.month = isNext ? this.month + 1 : this.month - 1;
        }
        this.onChange();
    }

    /**
     * 获取天样式
     *
     * @param {*} item
     * @param {number} month
     * @returns {*}
     * @memberof AppCalendar
     */
    public getDayClass(item: any, month: number): any {
        const classNames: any = {};
        classNames.active = item.day === this.day && item.month === this.month;
        classNames['no-current-month'] = item.month !== month;
        return classNames;
    }

    /**
     * 是否有数据
     *
     * @param {*} item
     * @returns {boolean}
     * @memberof AppCalendar
     */
    public isData(item: any): boolean {
        if (item) {
            const r = this.dateIsData[`${item.year}-${item.month}-${item.day}`];
            return r ? true : false;
        }
        return false;
    }

}