fineui/packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js

import {
    VerticalLayout,
    GridLayout,
    shortcut,
    Widget,
    createWidget,
    i18nText,
    toPix,
    createItems,
    isNull,
    isEmptyObject,
    isEmptyString,
    getDate,
    checkDateVoid,
    print,
    SIZE_CONSANTS
} from "@/core";
import { TextButton, Tab } from "@/base";
import { LinearSegment } from "@/case";
import { DynamicDateCard } from "./dynamicdate.card";
import { DateCalendarPopup } from "../date/calendar";
import { DynamicDateCombo } from "./dynamicdate.combo";
import { DynamicDateHelper } from "./dynamicdate.caculate";

@shortcut()
export class DynamicDatePopup extends Widget {
    static xtype = "bi.dynamic_date_popup";

    constants = {
        tabHeight: 40,
    };

    props = {
        baseCls: "bi-dynamic-date-popup",
        width: 272,
        supportDynamic: true,
        isPreview: false, // 是否是预览状态
    };

    static EVENT_CHANGE = "EVENT_CHANGE";
    static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE";
    static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE";
    static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW";

    _init() {
        super._init(...arguments);
        const opts = this.options;
        this.storeValue = {
            type: DynamicDateCombo.Static,
        };
        createWidget({
            element: this,
            type: VerticalLayout.xtype,
            items: [
                {
                    el: this._getTabJson(),
                },
                {
                    el: {
                        type: GridLayout.xtype,
                        items: [
                            [
                                {
                                    type: TextButton.xtype,
                                    cls: "bi-high-light bi-split-top",
                                    shadow: true,
                                    text: i18nText("BI-Basic_Clear"),
                                    textHeight: toPix(SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                                    listeners: [
                                        {
                                            eventName: TextButton.EVENT_CHANGE,
                                            action: () => {
                                                this.fireEvent(DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE);
                                            },
                                        }
                                    ],
                                },
                                {
                                    type: TextButton.xtype,
                                    cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                                    shadow: true,
                                    textHeight: toPix(SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                                    text: i18nText("BI-Multi_Date_Today"),
                                    disabled: this._checkTodayValid(),
                                    ref: _ref => {
                                        this.todayButton = _ref;
                                    },
                                    listeners: [
                                        {
                                            eventName: TextButton.EVENT_CHANGE,
                                            action: () => {
                                                this.fireEvent(DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE);
                                            },
                                        }
                                    ],
                                },
                                {
                                    type: TextButton.xtype,
                                    cls: "bi-high-light bi-split-top",
                                    textHeight: toPix(SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                                    shadow: true,
                                    text: i18nText("BI-Basic_OK"),
                                    listeners: [
                                        {
                                            eventName: TextButton.EVENT_CHANGE,
                                            action: () => {
                                                const type = this.dateTab.getSelect();
                                                if (type === DynamicDateCombo.Dynamic) {
                                                    this.dynamicPane.checkValidation(true) &&
                                                        this.fireEvent(DynamicDatePopup.BUTTON_OK_EVENT_CHANGE);
                                                } else {
                                                    this.fireEvent(DynamicDatePopup.BUTTON_OK_EVENT_CHANGE);
                                                }
                                            },
                                        }
                                    ],
                                }
                            ]
                        ],
                        height: SIZE_CONSANTS.TOOL_BAR_HEIGHT,
                    },
                }
            ],
        });
        this.setValue(opts.value);
    }

    _getTabJson() {
        const o = this.options;

        return {
            type: Tab.xtype,
            logic: {
                dynamic: true,
            },
            ref: _ref => {
                this.dateTab = _ref;
            },
            tab: {
                type: LinearSegment.xtype,
                invisible: !o.supportDynamic,
                cls: "bi-split-bottom",
                height: this.constants.tabHeight,
                items: createItems(
                    [
                        {
                            text: i18nText("BI-Multi_Date_YMD"),
                            value: DynamicDateCombo.Static,
                        },
                        {
                            text: i18nText("BI-Basic_Dynamic_Title"),
                            value: DynamicDateCombo.Dynamic,
                        }
                    ],
                    {
                        textAlign: "center",
                    }
                ),
            },
            cardCreator: v => {
                switch (v) {
                case DynamicDateCombo.Dynamic:
                    return {
                        type: DynamicDateCard.xtype,
                        cls: "dynamic-date-pane",
                        listeners: [
                            {
                                eventName: "EVENT_CHANGE",
                                action: () => {
                                    this._setInnerValue(this.year, v);
                                },
                            }
                        ],
                        min: this.options.min,
                        max: this.options.max,
                        ref: _ref => {
                            this.dynamicPane = _ref;
                        },
                    };
                case DynamicDateCombo.Static:
                default:
                    return {
                        type: DateCalendarPopup.xtype,
                        behaviors: o.behaviors,
                        min: this.options.min,
                        max: this.options.max,
                        listeners: [
                            {
                                eventName: DateCalendarPopup.EVENT_CHANGE,
                                action: () => {
                                    this.fireEvent(DynamicDatePopup.EVENT_CHANGE);
                                },
                            },
                            {
                                eventName: DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW,
                                action: () => {
                                    this.fireEvent(DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                },
                            }
                        ],
                        ref: _ref => {
                            this.ymd = _ref;
                        },
                    };
                }
            },
            listeners: [
                {
                    eventName: Tab.EVENT_CHANGE,
                    action: () => {
                        const v = this.dateTab.getSelect();
                        let date;
                        switch (v) {
                        case DynamicDateCombo.Static:
                            date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
                            this.ymd.setValue({
                                year: date.getFullYear(),
                                month: date.getMonth() + 1,
                                day: date.getDate(),
                            });
                            this._setInnerValue();
                            break;
                        case DynamicDateCombo.Dynamic:
                        default:
                            if (this.storeValue && this.storeValue.type === DynamicDateCombo.Dynamic) {
                                this.dynamicPane.setValue(this.storeValue.value);
                            } else {
                                this.dynamicPane.setValue({
                                    year: 0,
                                });
                            }
                            this._setInnerValue();
                            break;
                        }
                    },
                }
            ],
        };
    }

    _setInnerValue() {
        if (this.dateTab.getSelect() === DynamicDateCombo.Static) {
            this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            this.todayButton.setEnable(!this._checkTodayValid());
        } else {
            let date = DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue());
            date = print(date, "%Y-%X-%d");
            this.todayButton.setValue(date);
            this.todayButton.setEnable(false);
        }
    }

    _checkValueValid(value) {
        return isNull(value) || isEmptyObject(value) || isEmptyString(value);
    }

    _checkTodayValid() {
        const o = this.options;
        const today = getDate();

        return !!checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0];
    }

    setMinDate(minDate) {
        if (this.options.min !== minDate) {
            this.options.min = minDate;
            this.ymd && this.ymd.setMinDate(minDate);
            this.dynamicPane && this.dynamicPane.setMinDate(minDate);
        }
    }

    setMaxDate(maxDate) {
        if (this.options.max !== maxDate) {
            this.options.max = maxDate;
            this.ymd && this.ymd.setMaxDate(maxDate);
            this.dynamicPane && this.dynamicPane.setMaxDate(maxDate);
        }
    }

    setValue(v) {
        this.storeValue = v;
        v = v || {};
        const type = v.type || DynamicDateCombo.Static;
        const value = v.value || v;
        const { isPreview } = this.options;
        let date;

        // 如果是预览状态 直接打开静态页面
        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
        switch (type) {
        case DynamicDateCombo.Dynamic:
            if (isPreview) {
                date = DynamicDateHelper.getCalculation(value);
                this.ymd.setValue({
                    year: date.getFullYear(),
                    month: date.getMonth() + 1,
                    day: date.getDate(),
                });
            } else {
                this.dynamicPane.setValue(value);
            }
            this._setInnerValue();
            break;
        case DynamicDateCombo.Static:
        default:
            if (this._checkValueValid(value)) {
                const date = getDate();
                this.ymd.setValue({
                    year: date.getFullYear(),
                    month: date.getMonth() + 1,
                    day: date.getDate(),
                });
                this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            } else {
                this.ymd.setValue(value);
                this.todayButton.setValue(i18nText("BI-Multi_Date_Today"));
            }
            this.todayButton.setEnable(!this._checkTodayValid());
            break;
        }
    }

    getValue() {
        return {
            type: this.dateTab.getSelect(),
            value: this.dateTab.getValue(),
        };
    }
}