"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../ui/index.js");
const utils = require("../../ui/src/utils.js");
const dom = require("../../ui/src/dom.js");
const vn = require("../../ui/src/vn.js");
const util = require("../../date-panel/src/util.js");
const log = require("../../ui/src/log.js");
const datePanel = require("../../date-panel/src/date-panel.js");
const button = require("../../button/src/button.js");
const buttonGroup = require("../../button/src/button-group.js");
const commands = require("../../../../@vxe-ui/core/es/src/commands.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const i18n = require("../../../../@vxe-ui/core/es/src/i18n.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const icon = require("../../../../@vxe-ui/core/es/src/icon.js");
const VxeDatePickerComponent = comp.defineVxeComponent({
  name: "VxeDatePicker",
  props: {
    modelValue: [String, Number, Date],
    immediate: {
      type: Boolean,
      default: true
    },
    name: String,
    type: {
      type: String,
      default: "date"
    },
    clearable: {
      type: Boolean,
      default: () => config.getConfig().datePicker.clearable
    },
    readonly: {
      type: Boolean,
      default: null
    },
    disabled: {
      type: Boolean,
      default: null
    },
    placeholder: String,
    autoComplete: {
      type: String,
      default: "off"
    },
    form: String,
    className: String,
    zIndex: Number,
    size: {
      type: String,
      default: () => config.getConfig().datePicker.size || config.getConfig().size
    },
    multiple: Boolean,
    limitCount: {
      type: [String, Number],
      default: () => config.getConfig().datePicker.limitCount
    },
    // date、week、month、quarter、year
    startDate: {
      type: [String, Number, Date],
      default: () => config.getConfig().datePicker.startDate
    },
    endDate: {
      type: [String, Number, Date],
      default: () => config.getConfig().datePicker.endDate
    },
    defaultDate: [String, Number, Date],
    defaultTime: [String, Number, Date],
    minDate: [String, Number, Date],
    maxDate: [String, Number, Date],
    startDay: {
      type: [String, Number],
      default: () => config.getConfig().datePicker.startDay
    },
    labelFormat: String,
    valueFormat: String,
    timeFormat: String,
    editable: {
      type: Boolean,
      default: true
    },
    festivalMethod: {
      type: Function,
      default: () => config.getConfig().datePicker.festivalMethod
    },
    disabledMethod: {
      type: Function,
      default: () => config.getConfig().datePicker.disabledMethod
    },
    // week
    selectDay: {
      type: [String, Number],
      default: () => config.getConfig().datePicker.selectDay
    },
    showClearButton: {
      type: Boolean,
      default: () => config.getConfig().datePicker.showClearButton
    },
    showConfirmButton: {
      type: Boolean,
      default: () => config.getConfig().datePicker.showConfirmButton
    },
    autoClose: {
      type: Boolean,
      default: () => config.getConfig().datePicker.autoClose
    },
    prefixIcon: String,
    suffixIcon: String,
    placement: String,
    transfer: {
      type: Boolean,
      default: null
    },
    timeConfig: Object,
    popupConfig: Object,
    shortcutConfig: Object,
    // 已废弃 startWeek，被 startDay 替换
    startWeek: Number
  },
  emits: [
    "update:modelValue",
    "input",
    "change",
    "keydown",
    "keyup",
    "click",
    "focus",
    "blur",
    "clear",
    "confirm",
    "prefix-click",
    "suffix-click",
    "date-prev",
    "date-today",
    "date-next",
    "shortcut-click"
  ],
  setup(props, context) {
    const { slots, emit } = context;
    const $xeModal = vue.inject("$xeModal", null);
    const $xeDrawer = vue.inject("$xeDrawer", null);
    const $xeTable = vue.inject("$xeTable", null);
    const $xeForm = vue.inject("$xeForm", null);
    const formItemInfo = vue.inject("xeFormItemInfo", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const reactData = vue.reactive({
      initialized: false,
      panelIndex: 0,
      visiblePanel: false,
      isAniVisible: false,
      panelStyle: {},
      panelPlacement: "",
      isActivated: false,
      inputValue: "",
      inputLabel: ""
    });
    const internalData = {
      hpTimeout: void 0
    };
    const refElem = vue.ref();
    const refInputTarget = vue.ref();
    const refInputPanel = vue.ref();
    const refPanelWrapper = vue.ref();
    const refDatePanel = vue.ref();
    const refMaps = {
      refElem,
      refInput: refInputTarget
    };
    const $xeDatePicker = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps
    };
    const computeBtnTransfer = vue.computed(() => {
      const { transfer } = props;
      const popupOpts = computePopupOpts.value;
      if (XEUtils.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        const globalTransfer = config.getConfig().datePicker.transfer;
        if (XEUtils.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    });
    const computeFormReadonly = vue.computed(() => {
      const { readonly } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = vue.computed(() => {
      const { disabled } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeIsDateTimeType = vue.computed(() => {
      const { type } = props;
      return type === "time" || type === "datetime";
    });
    const computeIsDatePickerType = vue.computed(() => {
      const isDateTimeType = computeIsDateTimeType.value;
      return isDateTimeType || ["date", "week", "month", "quarter", "year"].indexOf(props.type) > -1;
    });
    const computeIsClearable = vue.computed(() => {
      return props.clearable;
    });
    const computeInputReadonly = vue.computed(() => {
      const { type, editable, multiple } = props;
      const formReadonly = computeFormReadonly.value;
      return formReadonly || multiple || !editable || type === "week" || type === "quarter";
    });
    const computeInpPlaceholder = vue.computed(() => {
      const { placeholder } = props;
      if (placeholder) {
        return utils.getFuncText(placeholder);
      }
      const globalPlaceholder = config.getConfig().datePicker.placeholder;
      if (globalPlaceholder) {
        return utils.getFuncText(globalPlaceholder);
      }
      return i18n.getI18n("vxe.base.pleaseSelect");
    });
    const computeInpImmediate = vue.computed(() => {
      const { immediate } = props;
      return immediate;
    });
    const computeTimeOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().datePicker.timeConfig, props.timeConfig);
    });
    const computePopupOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().datePicker.popupConfig, props.popupConfig);
    });
    const computeShortcutOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().datePicker.shortcutConfig, props.shortcutConfig);
    });
    const computeShortcutList = vue.computed(() => {
      const shortcutOpts = computeShortcutOpts.value;
      const { options } = shortcutOpts;
      if (options) {
        return options.map((option, index) => {
          return Object.assign({
            name: `${option.name || option.code || index}`
          }, option);
        });
      }
      return [];
    });
    const computeDateLabelFormat = vue.computed(() => {
      const { labelFormat } = props;
      return labelFormat || i18n.getI18n(`vxe.input.date.labelFormat.${props.type}`);
    });
    const computeDateValueFormat = vue.computed(() => {
      const { type, valueFormat } = props;
      return util.handleValueFormat(type, valueFormat);
    });
    const computeFirstDayOfWeek = vue.computed(() => {
      const { startDay } = props;
      return XEUtils.toNumber(startDay);
    });
    const computePanelLabel = vue.computed(() => {
      const { type, multiple } = props;
      const { inputValue } = reactData;
      const dateLabelFormat = computeDateLabelFormat.value;
      const dateValueFormat = computeDateValueFormat.value;
      const firstDayOfWeek = computeFirstDayOfWeek.value;
      const vals = inputValue ? multiple ? inputValue.split(",") : [inputValue] : [];
      return vals.map((val) => {
        const dateObj = util.parseDateObj(val, type, {
          valueFormat: dateValueFormat,
          labelFormat: dateLabelFormat,
          firstDay: firstDayOfWeek
        });
        return dateObj.label;
      }).join(", ");
    });
    const updateModelValue = () => {
      const { modelValue } = props;
      let val = "";
      if (modelValue) {
        if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
          val = new Date(modelValue);
        } else {
          val = modelValue;
        }
      }
      reactData.inputValue = val;
    };
    const triggerEvent = (evnt) => {
      const { inputValue } = reactData;
      dispatchEvent(evnt.type, { value: inputValue }, evnt);
    };
    const handleChange = (value, evnt) => {
      const { type, modelValue, valueFormat } = props;
      const dateValueFormat = computeDateValueFormat.value;
      reactData.inputValue = value;
      if (util.hasTimestampValueType(valueFormat)) {
        const dateVal = util.parseDateValue(value, type, { valueFormat: dateValueFormat });
        const timeNum = dateVal ? dateVal.getTime() : null;
        emit("update:modelValue", timeNum);
        if (modelValue !== timeNum) {
          dispatchEvent("change", { value: timeNum }, evnt);
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
          }
        }
      } else if (util.hasDateValueType(valueFormat)) {
        const dateVal = util.parseDateValue(value, type, { valueFormat: dateValueFormat });
        emit("update:modelValue", dateVal);
        if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
          dispatchEvent("change", { value: dateVal }, evnt);
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, dateVal);
          }
        }
      } else {
        emit("update:modelValue", value);
        if (XEUtils.toValueString(modelValue) !== value) {
          dispatchEvent("change", { value }, evnt);
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
          }
        }
      }
    };
    const inputEvent = (evnt) => {
      const inputElem = evnt.target;
      const value = inputElem.value;
      reactData.inputLabel = value;
      dispatchEvent("input", { value }, evnt);
    };
    const changeEvent = (evnt) => {
      const inpImmediate = computeInpImmediate.value;
      if (!inpImmediate) {
        triggerEvent(evnt);
      }
    };
    const focusEvent = (evnt) => {
      reactData.isActivated = true;
      const isDatePickerType = computeIsDatePickerType.value;
      if (isDatePickerType) {
        datePickerOpenEvent(evnt);
      }
      triggerEvent(evnt);
    };
    const clickPrefixEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const { inputValue } = reactData;
        dispatchEvent("prefix-click", { value: inputValue }, evnt);
      }
    };
    const hidePanel = () => {
      return new Promise((resolve) => {
        reactData.visiblePanel = false;
        internalData.hpTimeout = setTimeout(() => {
          reactData.isAniVisible = false;
          resolve();
        }, 350);
      });
    };
    const clearValueEvent = (evnt, value) => {
      const isDatePickerType = computeIsDatePickerType.value;
      if (isDatePickerType) {
        hidePanel();
      }
      handleChange("", evnt);
      dispatchEvent("clear", { value }, evnt);
    };
    const clickSuffixEvent = (evnt) => {
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const { inputValue } = reactData;
        dispatchEvent("suffix-click", { value: inputValue }, evnt);
      }
    };
    const blurEvent = (evnt) => {
      const $datePanel = refDatePanel.value;
      const { inputValue } = reactData;
      const inpImmediate = computeInpImmediate.value;
      const value = inputValue;
      if (!inpImmediate) {
        handleChange(value, evnt);
      }
      if (!reactData.visiblePanel) {
        reactData.isActivated = false;
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
      }
      dispatchEvent("blur", { value }, evnt);
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
      }
    };
    const keydownEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const keyupEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const confirmEvent = (evnt) => {
      const $datePanel = refDatePanel.value;
      if ($datePanel) {
        $datePanel.confirmByEvent(evnt);
      }
      hidePanel();
    };
    const panelChangeEvent = (params) => {
      const { multiple, autoClose } = props;
      const { value, $event } = params;
      const isDateTimeType = computeIsDateTimeType.value;
      handleChange(value, $event);
      if (!multiple && !isDateTimeType) {
        if (autoClose) {
          hidePanel();
        }
      }
    };
    const panelConfirmEvent = (params) => {
      dispatchEvent("confirm", params, params.$event);
    };
    const handleGlobalMousedownEvent = (evnt) => {
      const $datePanel = refDatePanel.value;
      const { visiblePanel, isActivated } = reactData;
      const el = refElem.value;
      const panelWrapperElem = refPanelWrapper.value;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled && isActivated) {
        reactData.isActivated = dom.getEventTargetNode(evnt, el).flag || dom.getEventTargetNode(evnt, panelWrapperElem).flag;
        if (!reactData.isActivated) {
          if (visiblePanel) {
            hidePanel();
            if ($datePanel) {
              $datePanel.checkValue(reactData.inputLabel);
            }
          }
        }
      }
    };
    const handleGlobalKeydownEvent = (evnt) => {
      const { visiblePanel } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const isTab = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.TAB);
        const isEsc = event.globalEvents.hasKey(evnt, event.GLOBAL_EVENT_KEYS.ESCAPE);
        if (isTab) {
          reactData.isActivated = false;
        }
        if (visiblePanel) {
          if (isEsc || isTab) {
            hidePanel();
          }
        }
      }
    };
    const handleGlobalMousewheelEvent = (evnt) => {
      const { visiblePanel } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        if (visiblePanel) {
          const panelWrapperElem = refPanelWrapper.value;
          if (dom.getEventTargetNode(evnt, panelWrapperElem).flag) {
            updatePlacement();
          } else {
            hidePanel();
          }
        }
      }
    };
    const handleGlobalBlurEvent = () => {
      const $datePanel = refDatePanel.value;
      const { isActivated, visiblePanel } = reactData;
      if (visiblePanel) {
        hidePanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
        const targetElem = refInputTarget.value;
        if (targetElem) {
          targetElem.blur();
        }
      }
    };
    const handleGlobalResizeEvent = () => {
      const { visiblePanel } = reactData;
      if (visiblePanel) {
        updatePlacement();
      }
    };
    const updateZindex = () => {
      const popupOpts = computePopupOpts.value;
      const customZIndex = popupOpts.zIndex || props.zIndex;
      if (customZIndex) {
        reactData.panelIndex = XEUtils.toNumber(customZIndex);
      } else if (reactData.panelIndex < utils.getLastZIndex()) {
        reactData.panelIndex = utils.nextZIndex();
      }
    };
    const updatePlacement = () => {
      const { placement } = props;
      const { panelIndex } = reactData;
      const targetElem = refInputTarget.value;
      const panelElem = refInputPanel.value;
      const btnTransfer = computeBtnTransfer.value;
      const popupOpts = computePopupOpts.value;
      const handleStyle = () => {
        const ppObj = dom.updatePanelPlacement(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          teleportTo: btnTransfer
        });
        const panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return vue.nextTick().then(handleStyle);
    };
    const showPanel = () => {
      const { visiblePanel } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled && !visiblePanel) {
        if (!reactData.initialized) {
          reactData.initialized = true;
        }
        if (internalData.hpTimeout) {
          clearTimeout(internalData.hpTimeout);
          internalData.hpTimeout = void 0;
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(() => {
          reactData.visiblePanel = true;
          updatePlacement();
        }, 10);
        updateZindex();
        return updatePlacement();
      }
      return vue.nextTick();
    };
    const datePickerOpenEvent = (evnt) => {
      const formReadonly = computeFormReadonly.value;
      if (!formReadonly) {
        evnt.preventDefault();
        showPanel();
      }
    };
    const clickEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const handleShortcutEvent = ({ option, $event }) => {
      const { type } = props;
      const { inputValue } = reactData;
      const shortcutOpts = computeShortcutOpts.value;
      const { autoClose } = shortcutOpts;
      const { code, clickMethod } = option;
      let value = inputValue;
      const shortcutParams = {
        $datePicker: $xeDatePicker,
        option,
        value,
        code
      };
      if (!clickMethod && code) {
        const gCommandOpts = commands.commands.get(code);
        const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
        if (dpCommandMethod) {
          dpCommandMethod(shortcutParams);
        } else {
          const dateValueFormat = computeDateValueFormat.value;
          const firstDayOfWeek = computeFirstDayOfWeek.value;
          switch (code) {
            case "now":
            case "prev":
            case "next":
            case "minus":
            case "plus": {
              const restObj = util.getDateByCode(code, value, type, {
                valueFormat: dateValueFormat,
                firstDay: firstDayOfWeek
              });
              value = restObj.value;
              shortcutParams.value = value;
              handleChange(value, $event);
              break;
            }
            default:
              log.errLog("vxe.error.notCommands", [`[date-picker] ${code}`]);
              break;
          }
        }
      } else {
        const optClickMethod = clickMethod || shortcutOpts.clickMethod;
        if (optClickMethod) {
          optClickMethod(shortcutParams);
        }
      }
      if (autoClose) {
        hidePanel();
      }
      dispatchEvent("shortcut-click", shortcutParams, $event);
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, event.createEvent(evnt, { $datePicker: $xeDatePicker }, params));
    };
    const datePickerMethods = {
      dispatchEvent,
      setModelValue(value) {
        reactData.inputValue = value;
        emit("update:modelValue", value);
      },
      setModelValueByEvent(evnt, value) {
        handleChange(value || "", evnt);
      },
      focus() {
        const inputElem = refInputTarget.value;
        reactData.isActivated = true;
        inputElem.focus();
        return vue.nextTick();
      },
      blur() {
        const inputElem = refInputTarget.value;
        inputElem.blur();
        reactData.isActivated = false;
        return vue.nextTick();
      },
      select() {
        const inputElem = refInputTarget.value;
        inputElem.select();
        reactData.isActivated = false;
        return vue.nextTick();
      },
      showPanel,
      hidePanel,
      updatePlacement
    };
    Object.assign($xeDatePicker, datePickerMethods);
    const renderShortcutBtn = (pos, isVertical) => {
      const shortcutOpts = computeShortcutOpts.value;
      const { position, align, mode } = shortcutOpts;
      const shortcutList = computeShortcutList.value;
      if (utils.isEnableConf(shortcutOpts) && shortcutList.length && (position || "left") === pos) {
        return vue.h("div", {
          class: `vxe-date-picker--layout-${pos}-wrapper`
        }, [
          vue.h(buttonGroup.default, {
            options: shortcutList,
            mode,
            align,
            vertical: isVertical,
            onClick: handleShortcutEvent
          })
        ]);
      }
      return index_esm.renderEmptyElement();
    };
    const renderPanel = () => {
      const { type, multiple, showClearButton, showConfirmButton } = props;
      const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, inputValue } = reactData;
      const vSize = computeSize.value;
      const btnTransfer = computeBtnTransfer.value;
      const shortcutOpts = computeShortcutOpts.value;
      const isClearable = computeIsClearable.value;
      const isDateTimeType = computeIsDateTimeType.value;
      const shortcutList = computeShortcutList.value;
      const timeOpts = computeTimeOpts.value;
      const popupOpts = computePopupOpts.value;
      const { position } = shortcutOpts;
      const headerSlot = slots.header;
      const footerSlot = slots.footer;
      const topSlot = slots.top;
      const bottomSlot = slots.bottom;
      const leftSlot = slots.left;
      const rightSlot = slots.right;
      const ppClassName = popupOpts.className;
      const hasShortcutBtn = shortcutList.length > 0;
      const showConfirmBtn = showConfirmButton === null ? isDateTimeType || multiple : showConfirmButton;
      const showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== "time" : showClearButton;
      return vue.h(vue.Teleport, {
        to: "body",
        disabled: btnTransfer ? !initialized : true
      }, [
        vue.h("div", {
          ref: refInputPanel,
          class: ["vxe-table--ignore-clear vxe-date-picker--panel", `type--${type}`, ppClassName ? XEUtils.isFunction(ppClassName) ? ppClassName({ $datePicker: $xeDatePicker }) : ppClassName : "", {
            [`size--${vSize}`]: vSize,
            "is--transfer": btnTransfer,
            "ani--leave": isAniVisible,
            "ani--enter": visiblePanel,
            "show--top": !!(topSlot || headerSlot || hasShortcutBtn && (position === "top" || position === "header")),
            "show--bottom": !!(bottomSlot || footerSlot || hasShortcutBtn && (position === "bottom" || position === "footer")),
            "show--left": !!(leftSlot || hasShortcutBtn && position === "left"),
            "show--right": !!(rightSlot || hasShortcutBtn && position === "right")
          }],
          placement: panelPlacement,
          style: panelStyle
        }, initialized && (visiblePanel || isAniVisible) ? [
          vue.h("div", {
            ref: refPanelWrapper,
            class: ["vxe-date-picker--layout-all-wrapper", `type--${type}`, {
              [`size--${vSize}`]: vSize
            }]
          }, [
            topSlot ? vue.h("div", {
              class: "vxe-date-picker--layout-top-wrapper"
            }, topSlot({})) : renderShortcutBtn("top"),
            vue.h("div", {
              class: "vxe-date-picker--layout-body-layout-wrapper"
            }, [
              leftSlot ? vue.h("div", {
                class: "vxe-date-picker--layout-left-wrapper"
              }, leftSlot({})) : renderShortcutBtn("left", true),
              vue.h("div", {
                class: "vxe-date-picker--layout-body-content-wrapper"
              }, [
                headerSlot ? vue.h("div", {
                  class: "vxe-date-picker--layout-header-wrapper"
                }, headerSlot({})) : renderShortcutBtn("header"),
                vue.h("div", {
                  class: "vxe-date-picker--layout-body-wrapper"
                }, [
                  vue.h(datePanel.default, {
                    ref: refDatePanel,
                    modelValue: reactData.inputValue,
                    type: props.type,
                    className: props.className,
                    multiple: props.multiple,
                    limitCount: props.limitCount,
                    startDate: props.startDate,
                    endDate: props.endDate,
                    defaultDate: props.defaultDate,
                    defaultTime: props.defaultTime,
                    minDate: props.minDate,
                    maxDate: props.maxDate,
                    startDay: props.startDay,
                    labelFormat: props.labelFormat,
                    valueFormat: props.valueFormat,
                    timeFormat: props.timeFormat,
                    timeConfig: timeOpts,
                    festivalMethod: props.festivalMethod,
                    disabledMethod: props.disabledMethod,
                    selectDay: props.selectDay,
                    onChange: panelChangeEvent,
                    onConfirm: panelConfirmEvent
                  })
                ]),
                vue.h("div", {
                  class: "vxe-date-picker--layout-footer-wrapper"
                }, [
                  vue.h("div", {
                    class: "vxe-date-picker--layout-footer-custom"
                  }, footerSlot ? footerSlot({}) : [renderShortcutBtn("footer")]),
                  showClearBtn || showConfirmBtn ? vue.h("div", {
                    class: "vxe-date-picker--layout-footer-btns"
                  }, [
                    showClearBtn ? vue.h(button.default, {
                      size: "mini",
                      disabled: inputValue === "" || XEUtils.eqNull(inputValue),
                      content: i18n.getI18n("vxe.button.clear"),
                      onClick: clearValueEvent
                    }) : index_esm.renderEmptyElement(),
                    showConfirmBtn ? vue.h(button.default, {
                      size: "mini",
                      status: "primary",
                      content: i18n.getI18n("vxe.button.confirm"),
                      onClick: confirmEvent
                    }) : index_esm.renderEmptyElement()
                  ]) : index_esm.renderEmptyElement()
                ])
              ]),
              rightSlot ? vue.h("div", {
                class: "vxe-date-picker--layout-right-wrapper"
              }, rightSlot({})) : renderShortcutBtn("right", true)
            ]),
            bottomSlot ? vue.h("div", {
              class: "vxe-date-picker--layout-bottom-wrapper"
            }, bottomSlot({})) : renderShortcutBtn("bottom")
          ])
        ] : [])
      ]);
    };
    const renderPrefixIcon = () => {
      const { prefixIcon } = props;
      const prefixSlot = slots.prefix;
      return prefixSlot || prefixIcon ? vue.h("div", {
        class: "vxe-date-picker--prefix",
        onClick: clickPrefixEvent
      }, [
        vue.h("div", {
          class: "vxe-date-picker--prefix-icon"
        }, prefixSlot ? vn.getSlotVNs(prefixSlot({})) : [
          vue.h("i", {
            class: prefixIcon
          })
        ])
      ]) : null;
    };
    const renderSuffixIcon = () => {
      const { suffixIcon } = props;
      const { inputValue } = reactData;
      const suffixSlot = slots.suffix;
      const isDisabled = computeIsDisabled.value;
      const isClearable = computeIsClearable.value;
      return vue.h("div", {
        class: ["vxe-date-picker--suffix", {
          "is--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }]
      }, [
        isClearable ? vue.h("div", {
          class: "vxe-date-picker--clear-icon",
          onClick: clearValueEvent
        }, [
          vue.h("i", {
            class: icon.getIcon().INPUT_CLEAR
          })
        ]) : index_esm.renderEmptyElement(),
        renderExtraSuffixIcon(),
        suffixSlot || suffixIcon ? vue.h("div", {
          class: "vxe-date-picker--suffix-icon",
          onClick: clickSuffixEvent
        }, suffixSlot ? vn.getSlotVNs(suffixSlot({})) : [
          vue.h("i", {
            class: suffixIcon
          })
        ]) : index_esm.renderEmptyElement()
      ]);
    };
    const renderExtraSuffixIcon = () => {
      return vue.h("div", {
        class: "vxe-date-picker--control-icon",
        onClick: datePickerOpenEvent
      }, [
        vue.h("i", {
          class: ["vxe-date-picker--date-picker-icon", icon.getIcon().DATE_PICKER_DATE]
        })
      ]);
    };
    const renderVN = () => {
      const { className, type, name, autoComplete } = props;
      const { inputValue, inputLabel, visiblePanel, isActivated } = reactData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const panelLabel = computePanelLabel.value;
      if (formReadonly) {
        return vue.h("div", {
          ref: refElem,
          class: ["vxe-date-picker--readonly", `type--${type}`, className]
        }, panelLabel);
      }
      const inputReadonly = computeInputReadonly.value;
      const inpPlaceholder = computeInpPlaceholder.value;
      const isClearable = computeIsClearable.value;
      const prefix = renderPrefixIcon();
      const suffix = renderSuffixIcon();
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-date-picker", `type--${type}`, className, {
          [`size--${vSize}`]: vSize,
          "is--prefix": !!prefix,
          "is--suffix": !!suffix,
          "is--visible": visiblePanel,
          "is--disabled": isDisabled,
          "is--active": isActivated,
          "show--clear": isClearable && !isDisabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }],
        spellcheck: false
      }, [
        prefix || index_esm.renderEmptyElement(),
        vue.h("div", {
          class: "vxe-date-picker--wrapper"
        }, [
          vue.h("input", {
            ref: refInputTarget,
            class: "vxe-date-picker--inner",
            value: inputLabel,
            name,
            type: "text",
            placeholder: inpPlaceholder,
            readonly: inputReadonly,
            disabled: isDisabled,
            autocomplete: autoComplete,
            onKeydown: keydownEvent,
            onKeyup: keyupEvent,
            onClick: clickEvent,
            onInput: inputEvent,
            onChange: changeEvent,
            onFocus: focusEvent,
            onBlur: blurEvent
          })
        ]),
        suffix || index_esm.renderEmptyElement(),
        // 下拉面板
        renderPanel()
      ]);
    };
    vue.watch(computePanelLabel, (val) => {
      reactData.inputLabel = val;
    });
    vue.watch(() => props.modelValue, () => {
      updateModelValue();
    });
    vue.nextTick(() => {
      event.globalEvents.on($xeDatePicker, "mousewheel", handleGlobalMousewheelEvent);
      event.globalEvents.on($xeDatePicker, "mousedown", handleGlobalMousedownEvent);
      event.globalEvents.on($xeDatePicker, "keydown", handleGlobalKeydownEvent);
      event.globalEvents.on($xeDatePicker, "blur", handleGlobalBlurEvent);
      event.globalEvents.on($xeDatePicker, "resize", handleGlobalResizeEvent);
    });
    vue.onUnmounted(() => {
      event.globalEvents.off($xeDatePicker, "mousewheel");
      event.globalEvents.off($xeDatePicker, "mousedown");
      event.globalEvents.off($xeDatePicker, "blur");
      event.globalEvents.off($xeDatePicker, "resize");
    });
    updateModelValue();
    vue.provide("$xeDatePicker", $xeDatePicker);
    $xeDatePicker.renderVN = renderVN;
    return $xeDatePicker;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeDatePickerComponent;
