"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _utils = require("../../ui/src/utils");
var _dom = require("../../ui/src/dom");
var _vn = require("../../ui/src/vn");
var _util = require("../../date-panel/src/util");
var _log = require("../../ui/src/log");
var _datePanel = _interopRequireDefault(require("../../date-panel/src/date-panel"));
var _button = _interopRequireDefault(require("../../button/src/button"));
var _buttonGroup = _interopRequireDefault(require("../../button/src/button-group"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  warnLog,
  errLog
} = (0, _log.createComponentLog)('date-picker');
const defaultMaskPlaceholder = '_';
const maskedTypes = ['year', 'month', 'date', 'datetime', 'time'];
const inputMaskedKeys = ['y', 'M', 'd', 'H', 'm', 'n', 's'];
const parseInputKayMaps = {};
inputMaskedKeys.forEach(key => {
  parseInputKayMaps[key] = true;
});
function createReactData() {
  return {
    initialized: false,
    panelIndex: 0,
    visiblePanel: false,
    isAniVisible: false,
    panelStyle: {},
    panelPlacement: '',
    isActivated: false,
    inputValue: '',
    labelFlag: 0
  };
}
function createInternalData() {
  return {
    // hpTimeout: undefined,
    // fsTimeout: undefined,
    inputLabel: '',
    laseFocusMasked: 0
  };
}
var _default = exports.default = (0, _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: () => (0, _ui.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: () => (0, _ui.getConfig)().datePicker.size || (0, _ui.getConfig)().size
    },
    multiple: Boolean,
    limitCount: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.limitCount
    },
    // date、week、month、quarter、year
    startDate: {
      type: [String, Number, Date],
      default: () => (0, _ui.getConfig)().datePicker.startDate
    },
    endDate: {
      type: [String, Number, Date],
      default: () => (0, _ui.getConfig)().datePicker.endDate
    },
    defaultDate: [String, Number, Date],
    defaultTime: [String, Number, Date],
    minDate: [String, Number, Date],
    maxDate: [String, Number, Date],
    startDay: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.startDay
    },
    labelFormat: String,
    valueFormat: String,
    timeFormat: String,
    editable: {
      type: Boolean,
      default: true
    },
    festivalMethod: {
      type: Function,
      default: () => (0, _ui.getConfig)().datePicker.festivalMethod
    },
    disabledMethod: {
      type: Function,
      default: () => (0, _ui.getConfig)().datePicker.disabledMethod
    },
    // week
    selectDay: {
      type: [String, Number],
      default: () => (0, _ui.getConfig)().datePicker.selectDay
    },
    showClearButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.showClearButton
    },
    showConfirmButton: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.showConfirmButton
    },
    autoClose: {
      type: Boolean,
      default: () => (0, _ui.getConfig)().datePicker.autoClose
    },
    maskedConfig: Object,
    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 = (0, _vue.inject)('$xeModal', null);
    const $xeDrawer = (0, _vue.inject)('$xeDrawer', null);
    const $xeTable = (0, _vue.inject)('$xeTable', null);
    const $xeForm = (0, _vue.inject)('$xeForm', null);
    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
    const xID = _xeUtils.default.uniqueId();
    const {
      computeSize
    } = (0, _ui.useSize)(props);
    const reactData = (0, _vue.reactive)(createReactData());
    const internalData = createInternalData();
    const refElem = (0, _vue.ref)();
    const refInputTarget = (0, _vue.ref)();
    const refInputPanel = (0, _vue.ref)();
    const refPanelWrapper = (0, _vue.ref)();
    const refDatePanel = (0, _vue.ref)();
    const refMaps = {
      refElem,
      refInput: refInputTarget
    };
    const $xeDatePicker = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps
    };
    const computeBtnTransfer = (0, _vue.computed)(() => {
      const {
        transfer
      } = props;
      const popupOpts = computePopupOpts.value;
      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        const globalTransfer = (0, _ui.getConfig)().datePicker.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    });
    const computeFormReadonly = (0, _vue.computed)(() => {
      const {
        readonly
      } = props;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.props.readonly;
        }
        return false;
      }
      return readonly;
    });
    const computeIsDisabled = (0, _vue.computed)(() => {
      const {
        disabled
      } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeIsTimeType = (0, _vue.computed)(() => {
      const {
        type
      } = props;
      return type === 'time';
    });
    const computeIsTimeOrDateTimeType = (0, _vue.computed)(() => {
      const {
        type
      } = props;
      const isTimeType = computeIsTimeType.value;
      return isTimeType || type === 'datetime';
    });
    const computeIsDatePickerType = (0, _vue.computed)(() => {
      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
      return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
    });
    const computeIsClearable = (0, _vue.computed)(() => {
      return props.clearable;
    });
    const computeIsDatePanelType = (0, _vue.computed)(() => {
      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
      return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
    });
    const computeDateListValue = (0, _vue.computed)(() => {
      const {
        modelValue,
        type,
        multiple
      } = props;
      const isDatePanelType = computeIsDatePanelType.value;
      const dateValueFormat = computeDateValueFormat.value;
      if (multiple && modelValue && isDatePanelType) {
        return _xeUtils.default.toValueString(modelValue).split(',').map(item => {
          const date = (0, _util.parseDateValue)(item, type, {
            valueFormat: dateValueFormat
          });
          if (_xeUtils.default.isValidDate(date)) {
            return date;
          }
          return date;
        });
      }
      return [];
    });
    const computeDateStartDate = (0, _vue.computed)(() => {
      return props.startDate ? _xeUtils.default.toStringDate(props.startDate) : null;
    });
    const computeDateEndDate = (0, _vue.computed)(() => {
      return props.endDate ? _xeUtils.default.toStringDate(props.endDate) : null;
    });
    const computeLimitMaxCount = (0, _vue.computed)(() => {
      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 0;
    });
    const computeDateMultipleValue = (0, _vue.computed)(() => {
      const dateListValue = computeDateListValue.value;
      const dateValueFormat = computeDateValueFormat.value;
      return dateListValue.map(date => _xeUtils.default.toDateString(date, dateValueFormat));
    });
    const computeOverCount = (0, _vue.computed)(() => {
      const {
        multiple
      } = props;
      const limitMaxCount = computeLimitMaxCount.value;
      const dateMultipleValue = computeDateMultipleValue.value;
      if (multiple && limitMaxCount) {
        return dateMultipleValue.length >= limitMaxCount;
      }
      return false;
    });
    const computeInputReadonly = (0, _vue.computed)(() => {
      const {
        type,
        editable,
        multiple
      } = props;
      const formReadonly = computeFormReadonly.value;
      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
    });
    const computeInpPlaceholder = (0, _vue.computed)(() => {
      const {
        placeholder
      } = props;
      if (placeholder) {
        return (0, _utils.getFuncText)(placeholder);
      }
      const globalPlaceholder = (0, _ui.getConfig)().datePicker.placeholder;
      if (globalPlaceholder) {
        return (0, _utils.getFuncText)(globalPlaceholder);
      }
      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
    });
    const computeInpImmediate = (0, _vue.computed)(() => {
      const {
        immediate
      } = props;
      return immediate;
    });
    const computeTimeOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.timeConfig, props.timeConfig);
    });
    const computePopupOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.popupConfig, props.popupConfig);
    });
    const computeShortcutOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.shortcutConfig, props.shortcutConfig);
    });
    const computeShortcutList = (0, _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 = (0, _vue.computed)(() => {
      const {
        labelFormat
      } = props;
      return labelFormat || (0, _ui.getI18n)(`vxe.input.date.labelFormat.${props.type}`);
    });
    const computeDateValueFormat = (0, _vue.computed)(() => {
      const {
        type,
        valueFormat
      } = props;
      return (0, _util.handleValueFormat)(type, valueFormat);
    });
    const computeDateMaskedFormat = (0, _vue.computed)(() => {
      const dateLabelFormat = computeDateLabelFormat.value;
      return dateLabelFormat;
    });
    const computeFirstDayOfWeek = (0, _vue.computed)(() => {
      const {
        startDay
      } = props;
      return _xeUtils.default.toNumber(startDay);
    });
    const computePanelLabel = (0, _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 = (0, _util.parseDateObj)(val, type, {
          valueFormat: dateValueFormat,
          labelFormat: dateLabelFormat,
          firstDay: firstDayOfWeek
        });
        return dateObj.label;
      }).join(', ');
    });
    const computeMaskedOpts = (0, _vue.computed)(() => {
      return Object.assign({}, (0, _ui.getConfig)().datePicker.maskedConfig, props.maskedConfig);
    });
    const computeMaskChar = (0, _vue.computed)(() => {
      const maskedOpts = computeMaskedOpts.value;
      const {
        maskPlaceholder
      } = maskedOpts;
      return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || defaultMaskPlaceholder;
    });
    const updateModelValue = () => {
      const {
        modelValue
      } = props;
      let val = '';
      if (modelValue) {
        if (_xeUtils.default.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
          val = new Date(modelValue);
        } else {
          val = modelValue;
        }
      }
      reactData.inputValue = val;
    };
    const handleInputLabel = (text, isUpdate) => {
      internalData.inputLabel = text;
      if (isUpdate) {
        reactData.labelFlag++;
      }
    };
    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 ((0, _util.hasTimestampValueType)(valueFormat)) {
        const dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        const timeNum = dateVal ? dateVal.getTime() : null;
        emitModel(timeNum);
        if (modelValue !== timeNum) {
          dispatchEvent('change', {
            value: timeNum
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
          }
        }
      } else if ((0, _util.hasDateValueType)(valueFormat)) {
        const dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        emitModel(dateVal);
        if (modelValue && dateVal ? _xeUtils.default.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
          dispatchEvent('change', {
            value: dateVal
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, dateVal);
          }
        }
      } else {
        emitModel(value);
        if (_xeUtils.default.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;
      handleInputLabel(value, true);
      dispatchEvent('input', {
        value
      }, evnt);
    };
    const changeEvent = evnt => {
      const inpImmediate = computeInpImmediate.value;
      if (!inpImmediate) {
        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 dateChange = (date, isReload) => {
      const {
        modelValue,
        multiple
      } = props;
      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
      const dateValueFormat = computeDateValueFormat.value;
      const firstDayOfWeek = computeFirstDayOfWeek.value;
      if (props.type === 'week') {
        const sWeek = _xeUtils.default.toNumber(props.selectDay);
        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
      }
      const inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
        firstDay: firstDayOfWeek
      });
      if (multiple) {
        const overCount = computeOverCount.value;
        // 如果为多选
        if (isTimeOrDateTimeType) {
          // 如果是datetime特殊类型
          const dateListValue = isReload ? [] : [...computeDateListValue.value];
          const datetimeRest = [];
          const eqIndex = _xeUtils.default.findIndexOf(dateListValue, val => _xeUtils.default.isDateSame(date, val, 'yyyyMMdd'));
          if (eqIndex === -1) {
            if (overCount) {
              // 如果超出最大多选数量
              return;
            }
            dateListValue.push(date);
          } else {
            dateListValue.splice(eqIndex, 1);
          }
          dateListValue.forEach(item => {
            if (item) {
              datetimeRest.push(item);
            }
          });
          handleChange(datetimeRest.map(date => _xeUtils.default.toDateString(date, dateValueFormat)).join(','), {
            type: 'update'
          });
        } else {
          const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
          // 如果是日期类型
          if (dateMultipleValue.some(val => _xeUtils.default.isEqual(val, inpVal))) {
            handleChange(dateMultipleValue.filter(val => !_xeUtils.default.isEqual(val, inpVal)).join(','), {
              type: 'update'
            });
          } else {
            if (overCount) {
              // 如果超出最大多选数量
              return;
            }
            handleChange(dateMultipleValue.concat([inpVal]).join(','), {
              type: 'update'
            });
          }
        }
      } else {
        // 如果为单选
        if (!_xeUtils.default.isEqual(modelValue, inpVal)) {
          handleChange(inpVal, {
            type: 'update'
          });
        }
      }
    };
    const dateRevert = () => {
      const panelLabel = computePanelLabel.value;
      handleInputLabel(panelLabel, true);
    };
    const afterCheckValue = inpVal => {
      const {
        type,
        editable,
        multiple,
        maskedConfig
      } = props;
      const {
        inputLabel
      } = internalData;
      const dateLabelFormat = computeDateLabelFormat.value;
      const maskedOpts = computeMaskedOpts.value;
      const dateStartDate = computeDateStartDate.value;
      const dateEndDate = computeDateEndDate.value;
      if (!inpVal) {
        handleChange('', {
          type: 'check'
        });
        return;
      }
      // 掩码格式处理
      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
        const allMaskedKeys = dateLabelFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g'));
        if (allMaskedKeys) {
          allMaskedKeys.forEach(formatKey => {
            const fkIndex = dateLabelFormat.indexOf(formatKey);
            if (fkIndex > -1) {
              const valStr = inpVal.slice(fkIndex, fkIndex + formatKey.length).replace(/\D/g, '');
              if (!valStr) {
                return;
              }
              let valNum = _xeUtils.default.toNumber(valStr);
              // 自动纠错最小值
              if (!valNum && ['MM', 'dd'].includes(formatKey)) {
                valNum = 1;
              }
              inpVal = inpVal.slice(0, fkIndex) + _xeUtils.default.padStart((0, _util.checkDateInputFormat)(valNum, formatKey), formatKey.length, '0') + inpVal.slice(fkIndex + formatKey.length);
            }
          });
        }
      }
      const $datePanel = refDatePanel.value;
      if ($datePanel) {
        return $datePanel.checkValue(inpVal);
      }
      let inpDateVal = (0, _util.parseDateValue)(inpVal, type, {
        valueFormat: dateLabelFormat
      });
      if (!_xeUtils.default.isValidDate(inpDateVal)) {
        dateRevert();
        return;
      }
      if (type === 'time') {
        inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
        if (inputLabel !== inpDateVal) {
          handleChange(inpDateVal, {
            type: 'check'
          });
        }
        handleInputLabel(inpDateVal, true);
        return;
      }
      if (dateEndDate && inpDateVal > dateEndDate) {
        inpDateVal = dateEndDate;
      }
      if (dateStartDate && inpDateVal < dateStartDate) {
        inpDateVal = dateStartDate;
      }
      let isChange = false;
      const firstDayOfWeek = computeFirstDayOfWeek.value;
      if (type === 'datetime') {
        const dateValue = reactData.inputValue;
        if (inpVal !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inpVal !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
          isChange = true;
        }
      } else {
        isChange = true;
      }
      const label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
        firstDay: firstDayOfWeek
      });
      handleInputLabel(label, true);
      if (isChange) {
        dateChange(inpDateVal);
      }
    };
    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 checkMaskedInputValue = (numStr, chunkFormat, isFull) => {
      const maskedOpts = computeMaskedOpts.value;
      const {
        align
      } = maskedOpts;
      const maskChar = computeMaskChar.value;
      const numVal = _xeUtils.default.toNumber(numStr);
      let restVal = (0, _util.checkDateInputFormat)(numVal, chunkFormat);
      if (isFull) {
        // 自动纠错最小值
        if (!restVal && ['MM', 'dd'].includes(chunkFormat)) {
          restVal = 1;
        }
      }
      let restStr = '' + restVal;
      if (numStr.length > restStr.length) {
        restStr = restStr.padStart(numStr.length, '0');
      }
      if (isFull) {
        return _xeUtils.default.padStart(restStr, chunkFormat.length, '0');
      }
      return _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](restStr, chunkFormat.length, maskChar);
    };
    const handleArrowInputDate = (evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow) => {
      const {
        type,
        multiple
      } = props;
      if (multiple) {
        return;
      }
      const targetElem = refInputTarget.value;
      if (!targetElem) {
        return;
      }
      const inpValue = targetElem.value;
      if (!inpValue) {
        return;
      }
      const dateMaskedFormat = computeDateMaskedFormat.value;
      const dateLabelFormat = computeDateLabelFormat.value;
      const firstDayOfWeek = computeFirstDayOfWeek.value;
      const maskChar = computeMaskChar.value;
      const selectionStart = targetElem.selectionStart || 0;
      let selectKey = dateMaskedFormat[selectionStart];
      if (!parseInputKayMaps[selectKey]) {
        selectKey = dateMaskedFormat[selectionStart - 1];
      }
      const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
      if (!skRest) {
        return;
      }
      if (isUpArrow || isDwArrow) {
        const chunkFormat = skRest[0] || '';
        const chunkStartIndex = skRest.index || 0;
        const chunkEndIndex = chunkStartIndex + chunkFormat.length;
        const chunkValue = inpValue.slice(chunkStartIndex, chunkEndIndex);
        if (parseInputKayMaps[selectKey]) {
          const chunkNum = ((0, _util.isAllSameChar)(chunkValue, maskChar) ? (0, _util.getChunkDefaultNum)(selectKey) : _xeUtils.default.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
          const restValue = inpValue.slice(0, chunkStartIndex) + checkMaskedInputValue('' + chunkNum, chunkFormat, true) + inpValue.slice(chunkEndIndex);
          evnt.preventDefault();
          if (restValue.indexOf(maskChar) === -1) {
            // 解析日期
            const inpDateVal = (0, _util.parseDateValue)(restValue, type, {
              valueFormat: dateLabelFormat
            });
            if (_xeUtils.default.isValidDate(inpDateVal)) {
              const label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
                firstDay: firstDayOfWeek
              });
              targetElem.value = label;
              handleInputLabel(label, false);
            }
          } else {
            targetElem.value = restValue;
            handleInputLabel(restValue, false);
          }
        }
        targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
      } else if (isLtArrow || isRtArrow) {
        const currKeyIndex = inputMaskedKeys.indexOf(selectKey);
        if (currKeyIndex > -1) {
          const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
          const currIndex = _xeUtils.default.findIndexOf(allMaskedKeys, key => selectKey === key[0]);
          const targetFormatKey = isLtArrow ? allMaskedKeys[currIndex - 1] || allMaskedKeys[0] : allMaskedKeys[currIndex + 1] || allMaskedKeys[allMaskedKeys.length - 1];
          const targetKey = targetFormatKey ? targetFormatKey[0] : '';
          const sktRest = dateMaskedFormat.match(new RegExp(targetKey + '+'));
          if (sktRest) {
            evnt.preventDefault();
            const mtStartIndex = sktRest.index || 0;
            const mtEndIndex = mtStartIndex + sktRest[0].length;
            targetElem.setSelectionRange(mtStartIndex, mtEndIndex);
          }
        }
      }
      internalData.isTriggerMasked = true;
    };
    const handleMaskedInputDate = evnt => {
      const {
        multiple
      } = props;
      if (multiple) {
        return;
      }
      const targetElem = refInputTarget.value;
      if (!targetElem) {
        return;
      }
      const isControlKey = (0, _dom.hasControlKey)(evnt);
      if (isControlKey) {
        return;
      }
      evnt.preventDefault();
      const eKey = evnt.key;
      const isDeleleKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
      const isBackspaceKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.BACKSPACE);
      const isNumKey = eKey >= '0' && eKey <= '9';
      const numKey = isNumKey ? evnt.key : '';
      if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
        return;
      }
      const {
        isTriggerMasked
      } = internalData;
      const maskedOpts = computeMaskedOpts.value;
      const {
        align
      } = maskedOpts;
      const dateMaskedFormat = computeDateMaskedFormat.value;
      const maskChar = computeMaskChar.value;
      let inpValue = targetElem.value || dateMaskedFormat;
      const selectionStart = targetElem.selectionStart || 0;
      const selectionEnd = targetElem.selectionEnd || 0;
      let selectKey = dateMaskedFormat[selectionStart];
      if (!parseInputKayMaps[selectKey]) {
        selectKey = dateMaskedFormat[selectionStart - 1];
      }
      const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
      if (!skRest) {
        return;
      }
      const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
      const chunkFormat = skRest[0] || '';
      const chunkStartIndex = skRest.index || 0;
      const chunkEndIndex = chunkStartIndex + chunkFormat.length;
      const currKeyIndex = allMaskedKeys.indexOf(selectKey);
      // 全选 | 如果无效字符
      const isAllSelected = !selectionStart && selectionEnd === inpValue.length && allMaskedKeys.length > 1;
      const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
      if (isAllSelected || isNotMasked) {
        inpValue = dateMaskedFormat;
      }
      let chunkValue = isDeleleKey ? '' : inpValue.slice(chunkStartIndex, chunkEndIndex);
      const chunkNums = chunkValue.match(/\d/g) || [];
      const chunkNumList = isTriggerMasked && !isBackspaceKey ? [] : chunkNums.slice(0);
      if (isNumKey) {
        chunkNumList.push(numKey);
        chunkValue = checkMaskedInputValue(chunkNumList.join(''), chunkFormat, false);
      } else if (isBackspaceKey) {
        chunkNumList.pop();
        chunkValue = _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](chunkNumList.join(''), chunkFormat.length, maskChar);
      }
      let restValue = inpValue.slice(0, chunkStartIndex) + chunkValue + inpValue.slice(chunkEndIndex);
      restValue = restValue.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
      targetElem.value = restValue;
      handleInputLabel(restValue, false);
      // 如果是全选/删除
      if (isAllSelected) {
        if (isBackspaceKey || isDeleleKey) {
          const firstMaskedKeys = allMaskedKeys[0];
          const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
          if (firstSkRest) {
            const firstChunkFormat = firstSkRest[0];
            targetElem.setSelectionRange(0, firstChunkFormat.length);
            internalData.isTriggerMasked = true;
            return;
          }
        }
      } else {
        if (isBackspaceKey && !chunkNums.length) {
          // 回退到上一个数字块
          for (let i = currKeyIndex - 1; i >= 0; i--) {
            const prveChunkKey = allMaskedKeys[i];
            const prveSkRest = dateMaskedFormat.match(new RegExp(`${prveChunkKey}+`));
            if (prveSkRest) {
              const prveChunkFormat = prveSkRest[0];
              const prveChunkStartIndex = prveSkRest.index || 0;
              const prveChunkEndIndex = prveChunkStartIndex + prveChunkFormat.length;
              let prveChunkValue = restValue.slice(prveChunkStartIndex, prveChunkEndIndex);
              const prveChunkNums = prveChunkValue.match(/\d/g) || [];
              if (prveChunkNums.length) {
                prveChunkNums.pop();
                prveChunkValue = _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](prveChunkNums.join(''), prveChunkFormat.length, maskChar);
                restValue = restValue.slice(0, prveChunkStartIndex) + prveChunkValue + restValue.slice(prveChunkEndIndex);
                targetElem.value = restValue;
                handleInputLabel(restValue, false);
                targetElem.setSelectionRange(prveChunkStartIndex, prveChunkEndIndex);
                return;
              }
            }
          }
          const firstMaskedKeys = allMaskedKeys[0];
          const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
          if (firstSkRest) {
            const firstChunkFormat = firstSkRest[0];
            restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
            targetElem.value = restValue;
            handleInputLabel(restValue, false);
            targetElem.setSelectionRange(0, firstChunkFormat.length);
            internalData.isTriggerMasked = true;
            return;
          }
          return;
        }
      }
      let maskStartIndex = skRest.index || 0;
      let maskEndIndex = maskStartIndex + skRest[0].length;
      // 如果输入完成，跳转下一个
      if (chunkNumList.length >= chunkValue.length) {
        const nextKeys = allMaskedKeys.slice(currKeyIndex + 1);
        if (currKeyIndex > -1) {
          const nextRest = nextKeys.length ? dateMaskedFormat.match(new RegExp(`(${nextKeys.join('|')})+`)) : null;
          // 如果当前数字块已输入，则跳转下一个数字块
          if (nextRest) {
            maskStartIndex = nextRest.index || 0;
            maskEndIndex = maskStartIndex + nextRest[0].length;
            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
          } else {
            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
          }
        }
        internalData.isTriggerMasked = true;
        return;
      }
      targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
      internalData.isTriggerMasked = false;
    };
    const handleMaskedSelectedDate = (evnt, isFocus) => {
      internalData.fsTimeout = undefined;
      const {
        type,
        multiple,
        modelValue
      } = props;
      if (multiple) {
        return;
      }
      if (!maskedTypes.includes(type)) {
        return;
      }
      const targetElem = refInputTarget.value;
      if (!targetElem) {
        return;
      }
      const {
        laseFocusMasked
      } = internalData;
      if (laseFocusMasked && Date.now() - laseFocusMasked < 100) {
        return;
      }
      const dateMaskedFormat = computeDateMaskedFormat.value;
      const maskChar = computeMaskChar.value;
      const selectionStart = targetElem.selectionStart || 0;
      const selectionEnd = targetElem.selectionEnd || 0;
      const inpValue = targetElem.value;
      const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
      // 如果为空
      if (!inpValue) {
        let restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
        // 还原值
        if (isFocus && modelValue) {
          const chunkNums = ('' + _xeUtils.default.toNumber(modelValue)).match(/\d/g) || [];
          let useNumIndex = 0;
          restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), txt => chunkNums[useNumIndex++] || txt);
        }
        const firstMaskedKeys = allMaskedKeys[0];
        const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
        if (firstSkRest) {
          evnt.preventDefault();
          const firstChunkFormat = firstSkRest[0];
          targetElem.value = restValue;
          handleInputLabel(restValue, false);
          targetElem.setSelectionRange(0, firstChunkFormat.length);
          internalData.laseFocusMasked = Date.now();
          return;
        }
      }
      // 全选 | 如果无效字符
      const isAllSelected = !selectionStart && selectionEnd === inpValue.length && allMaskedKeys.length > 1;
      const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
      if (isAllSelected || isNotMasked) {
        let restValue = '';
        // 还原值
        if (isNotMasked && inpValue) {
          const chunkNums = inpValue.match(/\d/g) || [];
          let useNumIndex = 0;
          restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), () => chunkNums[useNumIndex++] || maskChar);
        } else {
          dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
        }
        const firstMaskedKeys = allMaskedKeys[0];
        const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
        if (firstSkRest) {
          evnt.preventDefault();
          const firstChunkFormat = firstSkRest[0];
          targetElem.value = restValue;
          handleInputLabel(restValue, false);
          targetElem.setSelectionRange(0, firstChunkFormat.length);
          internalData.laseFocusMasked = Date.now();
          return;
        }
      }
      // 是否选择数字块
      let selectKey = dateMaskedFormat[selectionStart];
      if (!parseInputKayMaps[selectKey]) {
        selectKey = dateMaskedFormat[selectionStart - 1];
      }
      if (selectKey) {
        evnt.stopPropagation();
        const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
        if (skRest) {
          const chunkFormat = skRest[0] || '';
          const chunkStartIndex = skRest.index || 0;
          const chunkEndIndex = chunkStartIndex + chunkFormat.length;
          targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
          internalData.isTriggerMasked = true;
          internalData.laseFocusMasked = Date.now();
        }
      }
    };
    const blurEvent = evnt => {
      const {
        inputValue
      } = reactData;
      const inpImmediate = computeInpImmediate.value;
      const value = inputValue;
      if (!inpImmediate) {
        handleChange(value, evnt);
      }
      if (!reactData.visiblePanel) {
        const {
          inputLabel
        } = internalData;
        reactData.isActivated = false;
        // 未打开面板时才校验
        afterCheckValue(inputLabel);
      }
      dispatchEvent('blur', {
        value
      }, evnt);
      // 自动更新校验状态
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
      }
    };
    const focusEvent = evnt => {
      const {
        multiple,
        editable,
        maskedConfig
      } = props;
      const {
        fsTimeout
      } = internalData;
      const maskedOpts = computeMaskedOpts.value;
      const popupOpts = computePopupOpts.value;
      const {
        trigger
      } = popupOpts;
      reactData.isActivated = true;
      if (fsTimeout) {
        clearTimeout(fsTimeout);
      }
      if (!trigger || trigger === 'default') {
        datePickerOpenEvent(evnt);
      } else if (trigger === 'icon') {
        hidePanel();
      }
      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
        internalData.fsTimeout = setTimeout(() => {
          handleMaskedSelectedDate(evnt, true);
        }, 20);
      }
      triggerEvent(evnt);
    };
    const clickEvent = evnt => {
      const {
        multiple,
        editable,
        maskedConfig
      } = props;
      const {
        fsTimeout
      } = internalData;
      const maskedOpts = computeMaskedOpts.value;
      if (fsTimeout) {
        clearTimeout(fsTimeout);
      }
      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
        internalData.fsTimeout = setTimeout(() => {
          handleMaskedSelectedDate(evnt);
        }, 10);
      }
      triggerEvent(evnt);
    };
    const keydownEvent = evnt => {
      const {
        type,
        editable,
        maskedConfig
      } = props;
      const {
        visiblePanel
      } = reactData;
      const maskedOpts = computeMaskedOpts.value;
      const isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
      const isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
      const isLtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
      const isRtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
      const isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
      if (editable) {
        if (isEnter) {
          const {
            inputLabel
          } = internalData;
          if (visiblePanel) {
            hidePanel();
          }
          afterCheckValue(inputLabel);
        } else if (maskedTypes.includes(type)) {
          if ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled) {
            if (maskedOpts.isArrow && (isUpArrow || isDwArrow || isLtArrow || isRtArrow)) {
              handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow);
            } else if (maskedOpts.isMasked) {
              handleMaskedInputDate(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 isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
      handleChange(value, $event);
      if (!multiple && !isTimeOrDateTimeType) {
        if (autoClose) {
          hidePanel();
        }
      }
    };
    const panelConfirmEvent = params => {
      dispatchEvent('confirm', params, params.$event);
    };
    const panelRevertEvent = params => {
      handleInputLabel(params.label, true);
    };
    // 全局事件
    const handleGlobalMousedownEvent = evnt => {
      const {
        visiblePanel,
        isActivated
      } = reactData;
      const el = refElem.value;
      const panelWrapperElem = refPanelWrapper.value;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled && isActivated) {
        const currActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
        if (currActivated !== isActivated) {
          reactData.isActivated = currActivated;
        }
        if (!currActivated) {
          if (visiblePanel) {
            hidePanel();
            const {
              inputLabel
            } = internalData;
            afterCheckValue(inputLabel);
          }
        }
      }
    };
    const handleGlobalKeydownEvent = evnt => {
      const {
        isActivated,
        visiblePanel
      } = reactData;
      const isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        const isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
        const isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
        if (isTab) {
          if (isActivated) {
            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 ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
            updatePlacement();
          } else {
            hidePanel();
          }
        }
      }
    };
    const handleGlobalBlurEvent = () => {
      const {
        isActivated,
        visiblePanel
      } = reactData;
      if (visiblePanel) {
        hidePanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        afterCheckValue(internalData.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.default.toNumber(customZIndex);
      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
        reactData.panelIndex = (0, _utils.nextZIndex)();
      }
    };
    const updatePlacement = () => {
      const {
        placement
      } = props;
      const {
        panelIndex
      } = reactData;
      const targetElem = refInputTarget.value;
      const panelElem = refInputPanel.value;
      if (!panelElem) {
        return (0, _vue.nextTick)();
      }
      const btnTransfer = computeBtnTransfer.value;
      const popupOpts = computePopupOpts.value;
      const handleStyle = () => {
        const ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        const panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return (0, _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 = undefined;
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(() => {
          reactData.visiblePanel = true;
          updatePlacement();
        }, 10);
        updateZindex();
        return updatePlacement();
      }
      return (0, _vue.nextTick)();
    };
    const datePickerOpenEvent = evnt => {
      const formReadonly = computeFormReadonly.value;
      if (!formReadonly) {
        evnt.preventDefault();
        showPanel();
      }
    };
    const clickIconEvent = evnt => {
      const {
        visiblePanel
      } = reactData;
      const popupOpts = computePopupOpts.value;
      const {
        trigger
      } = popupOpts;
      if (!trigger || trigger === 'default' || trigger === 'icon') {
        if (visiblePanel) {
          hidePanel();
        } else {
          datePickerOpenEvent(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 = _ui.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 = (0, _util.getDateByCode)(code, value, type, {
                  valueFormat: dateValueFormat,
                  firstDay: firstDayOfWeek
                });
                value = restObj.value;
                shortcutParams.value = value;
                handleChange(value, $event);
                break;
              }
            default:
              errLog('vxe.error.notCommands', [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, (0, _ui.createEvent)(evnt, {
        $datePicker: $xeDatePicker
      }, params));
    };
    const emitModel = value => {
      emit('update:modelValue', value);
    };
    const datePickerMethods = {
      dispatchEvent,
      setModelValue(value) {
        reactData.inputValue = value;
        emitModel(value);
      },
      setModelValueByEvent(evnt, value) {
        handleChange(value || '', evnt);
      },
      focus() {
        const inputElem = refInputTarget.value;
        reactData.isActivated = true;
        inputElem.focus();
        return (0, _vue.nextTick)();
      },
      blur() {
        const inputElem = refInputTarget.value;
        inputElem.blur();
        reactData.isActivated = false;
        return (0, _vue.nextTick)();
      },
      select() {
        const inputElem = refInputTarget.value;
        inputElem.select();
        reactData.isActivated = false;
        return (0, _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 ((0, _utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
        return (0, _vue.h)('div', {
          class: `vxe-date-picker--layout-${pos}-wrapper`
        }, [(0, _vue.h)(_buttonGroup.default, {
          options: shortcutList,
          mode,
          align,
          vertical: isVertical,
          onClick: handleShortcutEvent
        })]);
      }
      return (0, _ui.renderEmptyElement)($xeDatePicker);
    };
    const renderPanel = () => {
      const popupOpts = computePopupOpts.value;
      if (popupOpts.enabled === false) {
        return (0, _ui.renderEmptyElement)($xeDatePicker);
      }
      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 isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
      const shortcutList = computeShortcutList.value;
      const timeOpts = computeTimeOpts.value;
      const dateStartDate = computeDateStartDate.value;
      const dateEndDate = computeDateEndDate.value;
      const {
        appendTo
      } = popupOpts;
      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 ? isTimeOrDateTimeType || multiple : showConfirmButton;
      const showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== 'time' : showClearButton;
      return (0, _vue.h)(_vue.Teleport, {
        to: (0, _dom.getPopupContainer)(appendTo),
        disabled: btnTransfer ? !initialized : true
      }, [(0, _vue.h)('div', {
        ref: refInputPanel,
        class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, ppClassName ? _xeUtils.default.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) ? [(0, _vue.h)('div', {
        ref: refPanelWrapper,
        class: ['vxe-date-picker--layout-all-wrapper', `type--${type}`, {
          [`size--${vSize}`]: vSize
        }]
      }, [topSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-top-wrapper'
      }, topSlot({})) : renderShortcutBtn('top'), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-layout-wrapper'
      }, [leftSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-left-wrapper'
      }, leftSlot({})) : renderShortcutBtn('left', true), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-content-wrapper'
      }, [headerSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-header-wrapper'
      }, headerSlot({})) : renderShortcutBtn('header'), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-body-wrapper'
      }, [(0, _vue.h)(_datePanel.default, {
        ref: refDatePanel,
        modelValue: reactData.inputValue,
        type: props.type,
        className: props.className,
        multiple: props.multiple,
        limitCount: props.limitCount,
        startDate: dateStartDate,
        endDate: dateEndDate,
        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,
        onRevert: panelRevertEvent
      })]), (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-wrapper'
      }, [(0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-custom'
      }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]), showClearBtn || showConfirmBtn ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-footer-btns'
      }, [showClearBtn ? (0, _vue.h)(_button.default, {
        size: 'mini',
        disabled: inputValue === '' || _xeUtils.default.eqNull(inputValue),
        content: (0, _ui.getI18n)('vxe.button.clear'),
        onClick: clearValueEvent
      }) : (0, _ui.renderEmptyElement)($xeDatePicker), showConfirmBtn ? (0, _vue.h)(_button.default, {
        size: 'mini',
        status: 'primary',
        content: (0, _ui.getI18n)('vxe.button.confirm'),
        onClick: confirmEvent
      }) : (0, _ui.renderEmptyElement)($xeDatePicker)]) : (0, _ui.renderEmptyElement)($xeDatePicker)])]), rightSlot ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--layout-right-wrapper'
      }, rightSlot({})) : renderShortcutBtn('right', true)]), bottomSlot ? (0, _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 ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--prefix',
        onClick: clickPrefixEvent
      }, [(0, _vue.h)('div', {
        class: 'vxe-date-picker--prefix-icon'
      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [(0, _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 (0, _vue.h)('div', {
        class: ['vxe-date-picker--suffix', {
          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
        }]
      }, [isClearable ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--clear-icon',
        onClick: clearValueEvent
      }, [(0, _vue.h)('i', {
        class: (0, _ui.getIcon)().INPUT_CLEAR
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0, _vue.h)('div', {
        class: 'vxe-date-picker--suffix-icon',
        onClick: clickSuffixEvent
      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [(0, _vue.h)('i', {
        class: suffixIcon
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker)]);
    };
    const renderExtraSuffixIcon = () => {
      return (0, _vue.h)('div', {
        class: 'vxe-date-picker--control-icon',
        onClick: clickIconEvent
      }, [(0, _vue.h)('i', {
        class: ['vxe-date-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
      })]);
    };
    const renderVN = () => {
      const {
        className,
        type,
        name,
        autoComplete
      } = props;
      const {
        inputValue,
        visiblePanel,
        isActivated,
        labelFlag
      } = reactData;
      const {
        inputLabel
      } = internalData;
      const vSize = computeSize.value;
      const isDisabled = computeIsDisabled.value;
      const formReadonly = computeFormReadonly.value;
      const panelLabel = computePanelLabel.value;
      if (formReadonly) {
        return (0, _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 (0, _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.default.eqNull(inputValue))
        }],
        spellcheck: false
      }, [prefix || (0, _ui.renderEmptyElement)($xeDatePicker), (0, _vue.h)('div', {
        class: 'vxe-date-picker--wrapper'
      }, [(0, _vue.h)('input', {
        ref: refInputTarget,
        class: 'vxe-date-picker--inner',
        value: labelFlag ? 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 || (0, _ui.renderEmptyElement)($xeDatePicker),
      // 下拉面板
      renderPanel()]);
    };
    (0, _vue.watch)(computePanelLabel, val => {
      handleInputLabel(val, true);
    });
    (0, _vue.watch)(() => props.modelValue, () => {
      updateModelValue();
    });
    updateModelValue();
    (0, _vue.nextTick)(() => {
      _ui.globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
      _ui.globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
      _ui.globalEvents.on($xeDatePicker, 'keydown', handleGlobalKeydownEvent);
      _ui.globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
      _ui.globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
    });
    (0, _vue.onMounted)(() => {
      const {
        type,
        multiple,
        maskedConfig
      } = props;
      if ((0, _utils.isEnableConf)(maskedConfig)) {
        if (multiple) {
          errLog('vxe.error.notSupportProp', ['multiple', 'control-config.enabled=true', 'control-config.enabled=false']);
        }
        if (!maskedTypes.includes(type)) {
          warnLog('vxe.error.notSupportProp', ['control-config.enabled=true', `type=${type}`, `type=${maskedTypes.join('|')}`]);
        }
      }
    });
    (0, _vue.onUnmounted)(() => {
      _ui.globalEvents.off($xeDatePicker, 'mousewheel');
      _ui.globalEvents.off($xeDatePicker, 'mousedown');
      _ui.globalEvents.off($xeDatePicker, 'keydown');
      _ui.globalEvents.off($xeDatePicker, 'blur');
      _ui.globalEvents.off($xeDatePicker, 'resize');
      _xeUtils.default.assign(reactData, createReactData());
      _xeUtils.default.assign(internalData, createInternalData());
    });
    (0, _vue.provide)('$xeDatePicker', $xeDatePicker);
    $xeDatePicker.renderVN = renderVN;
    return $xeDatePicker;
  },
  render() {
    return this.renderVN();
  }
});