"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
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 }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeDatePicker',
  mixins: [_ui.globalMixins.sizeMixin],
  model: {
    prop: 'value',
    event: 'modelValue'
  },
  props: {
    value: [String, Number, Date],
    immediate: {
      type: Boolean,
      default: true
    },
    name: String,
    type: {
      type: String,
      default: 'date'
    },
    clearable: {
      type: Boolean,
      default: function _default() {
        return (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: function _default() {
        return (0, _ui.getConfig)().datePicker.size || (0, _ui.getConfig)().size;
      }
    },
    multiple: Boolean,
    limitCount: {
      type: [String, Number],
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.limitCount;
      }
    },
    // date、week、month、quarter、year
    startDate: {
      type: [String, Number, Date],
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.startDate;
      }
    },
    endDate: {
      type: [String, Number, Date],
      default: function _default() {
        return (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: function _default() {
        return (0, _ui.getConfig)().datePicker.startDay;
      }
    },
    labelFormat: String,
    valueFormat: String,
    timeFormat: String,
    editable: {
      type: Boolean,
      default: true
    },
    festivalMethod: {
      type: Function,
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.festivalMethod;
      }
    },
    disabledMethod: {
      type: Function,
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.disabledMethod;
      }
    },
    // week
    selectDay: {
      type: [String, Number],
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.selectDay;
      }
    },
    showClearButton: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.showClearButton;
      }
    },
    showConfirmButton: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.showConfirmButton;
      }
    },
    autoClose: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().datePicker.autoClose;
      }
    },
    prefixIcon: String,
    suffixIcon: String,
    placement: String,
    transfer: {
      type: Boolean,
      default: null
    },
    timeConfig: Object,
    popupConfig: Object,
    shortcutConfig: Object,
    // 已废弃 startWeek，被 startDay 替换
    startWeek: Number
  },
  inject: {
    $xeModal: {
      default: null
    },
    $xeDrawer: {
      default: null
    },
    $xeTable: {
      default: null
    },
    $xeForm: {
      default: null
    },
    formItemInfo: {
      from: 'xeFormItemInfo',
      default: null
    }
  },
  provide: function provide() {
    var $xeDatePicker = this;
    return {
      $xeDatePicker: $xeDatePicker
    };
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      initialized: false,
      panelIndex: 0,
      visiblePanel: false,
      isAniVisible: false,
      panelStyle: {},
      panelPlacement: '',
      isActivated: false,
      inputValue: '',
      inputLabel: ''
    };
    var internalData = {
      hpTimeout: undefined
    };
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeBtnTransfer: function computeBtnTransfer() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var $xeTable = $xeDatePicker.$xeTable;
      var $xeModal = $xeDatePicker.$xeModal;
      var $xeDrawer = $xeDatePicker.$xeDrawer;
      var $xeForm = $xeDatePicker.$xeForm;
      var transfer = props.transfer;
      var popupOpts = $xeDatePicker.computePopupOpts;
      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
        return popupOpts.transfer;
      }
      if (transfer === null) {
        var globalTransfer = (0, _ui.getConfig)().datePicker.transfer;
        if (_xeUtils.default.isBoolean(globalTransfer)) {
          return globalTransfer;
        }
        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
          return true;
        }
      }
      return transfer;
    },
    computeFormReadonly: function computeFormReadonly() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var $xeForm = $xeDatePicker.$xeForm;
      var readonly = props.readonly;
      if (readonly === null) {
        if ($xeForm) {
          return $xeForm.readonly;
        }
        return false;
      }
      return readonly;
    },
    computeIsDisabled: function computeIsDisabled() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var $xeForm = $xeDatePicker.$xeForm;
      var disabled = props.disabled;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.disabled;
        }
        return false;
      }
      return disabled;
    },
    computeIsDateTimeType: function computeIsDateTimeType() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var type = props.type;
      return type === 'time' || type === 'datetime';
    },
    computeIsDatePickerType: function computeIsDatePickerType() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var isDateTimeType = $xeDatePicker.computeIsDateTimeType;
      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
    },
    computeIsClearable: function computeIsClearable() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      return props.clearable;
    },
    computeInputReadonly: function computeInputReadonly() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var type = props.type,
        editable = props.editable,
        multiple = props.multiple;
      var formReadonly = $xeDatePicker.computeFormReadonly;
      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
    },
    computeInpPlaceholder: function computeInpPlaceholder() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var placeholder = props.placeholder;
      if (placeholder) {
        return (0, _utils.getFuncText)(placeholder);
      }
      var globalPlaceholder = (0, _ui.getConfig)().datePicker.placeholder;
      if (globalPlaceholder) {
        return (0, _utils.getFuncText)(globalPlaceholder);
      }
      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
    },
    computeInpImmediate: function computeInpImmediate() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var immediate = props.immediate;
      return immediate;
    },
    computeTimeOpts: function computeTimeOpts() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      return Object.assign({}, (0, _ui.getConfig)().datePicker.timeConfig, props.timeConfig);
    },
    computePopupOpts: function computePopupOpts() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      return Object.assign({}, (0, _ui.getConfig)().datePicker.popupConfig, props.popupConfig);
    },
    computeShortcutOpts: function computeShortcutOpts() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      return Object.assign({}, (0, _ui.getConfig)().datePicker.shortcutConfig, props.shortcutConfig);
    },
    computeShortcutList: function computeShortcutList() {
      var $xeDatePicker = this;
      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
      var options = shortcutOpts.options;
      if (options) {
        return options.map(function (option, index) {
          return Object.assign({
            name: "".concat(option.name || option.code || index)
          }, option);
        });
      }
      return [];
    },
    computeDateLabelFormat: function computeDateLabelFormat() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var labelFormat = props.labelFormat;
      return labelFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
    },
    computeDateValueFormat: function computeDateValueFormat() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var type = props.type,
        valueFormat = props.valueFormat;
      return (0, _util.handleValueFormat)(type, valueFormat);
    },
    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var startDay = props.startDay;
      return _xeUtils.default.toNumber(startDay);
    },
    computePanelLabel: function computePanelLabel() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var type = props.type,
        multiple = props.multiple;
      var inputValue = reactData.inputValue;
      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
      var vals = inputValue ? multiple ? inputValue.split(',') : [inputValue] : [];
      return vals.map(function (val) {
        var dateObj = (0, _util.parseDateObj)(val, type, {
          valueFormat: dateValueFormat,
          labelFormat: dateLabelFormat,
          firstDay: firstDayOfWeek
        });
        return dateObj.label;
      }).join(', ');
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeDatePicker = this;
      $xeDatePicker.$emit(type, (0, _ui.createEvent)(evnt, {
        $datePicker: $xeDatePicker
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeDatePicker = this;
      var _events = $xeDatePicker._events;
      if (_events && _events.modelValue) {
        $xeDatePicker.$emit('modelValue', value);
      } else {
        $xeDatePicker.$emit('model-value', value);
      }
    },
    updateModelValue: function updateModelValue() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var modelValue = props.value;
      var val = '';
      if (modelValue) {
        if (_xeUtils.default.isNumber(modelValue) && /^[0-9]{11,15}$/.test("".concat(modelValue))) {
          val = new Date(modelValue);
        } else {
          val = modelValue;
        }
      }
      reactData.inputValue = val;
    },
    triggerEvent: function triggerEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var inputValue = reactData.inputValue;
      $xeDatePicker.dispatchEvent(evnt.type, {
        value: inputValue
      }, evnt);
    },
    handleChange: function handleChange(value, evnt) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var $xeForm = $xeDatePicker.$xeForm;
      var formItemInfo = $xeDatePicker.formItemInfo;
      var type = props.type,
        modelValue = props.value,
        valueFormat = props.valueFormat;
      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
      reactData.inputValue = value;
      if ((0, _util.hasTimestampValueType)(valueFormat)) {
        var dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        var timeNum = dateVal ? dateVal.getTime() : null;
        $xeDatePicker.emitModel(timeNum);
        if (modelValue !== timeNum) {
          $xeDatePicker.dispatchEvent('change', {
            value: timeNum
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
          }
        }
      } else if ((0, _util.hasDateValueType)(valueFormat)) {
        var _dateVal = (0, _util.parseDateValue)(value, type, {
          valueFormat: dateValueFormat
        });
        $xeDatePicker.emitModel(_dateVal);
        if (modelValue && _dateVal ? _xeUtils.default.toStringDate(modelValue).getTime() !== _dateVal.getTime() : modelValue !== _dateVal) {
          $xeDatePicker.dispatchEvent('change', {
            value: _dateVal
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, _dateVal);
          }
        }
      } else {
        $xeDatePicker.emitModel(value);
        if (_xeUtils.default.toValueString(modelValue) !== value) {
          $xeDatePicker.dispatchEvent('change', {
            value: value
          }, evnt);
          // 自动更新校验状态
          if ($xeForm && formItemInfo) {
            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
          }
        }
      }
    },
    inputEvent: function inputEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var inputElem = evnt.target;
      var value = inputElem.value;
      reactData.inputLabel = value;
      $xeDatePicker.dispatchEvent('input', {
        value: value
      }, evnt);
    },
    changeEvent: function changeEvent(evnt) {
      var $xeDatePicker = this;
      var inpImmediate = $xeDatePicker.computeInpImmediate;
      if (!inpImmediate) {
        $xeDatePicker.triggerEvent(evnt);
      }
    },
    focusEvent: function focusEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var popupOpts = $xeDatePicker.computePopupOpts;
      var trigger = popupOpts.trigger;
      reactData.isActivated = true;
      if (!trigger || trigger === 'default') {
        $xeDatePicker.datePickerOpenEvent(evnt);
      }
      $xeDatePicker.triggerEvent(evnt);
    },
    clickPrefixEvent: function clickPrefixEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      if (!isDisabled) {
        var inputValue = reactData.inputValue;
        $xeDatePicker.dispatchEvent('prefix-click', {
          value: inputValue
        }, evnt);
      }
    },
    hidePanel: function hidePanel() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var internalData = $xeDatePicker.internalData;
      return new Promise(function (resolve) {
        reactData.visiblePanel = false;
        internalData.hpTimeout = setTimeout(function () {
          reactData.isAniVisible = false;
          resolve();
        }, 350);
      });
    },
    clearValueEvent: function clearValueEvent(evnt, value) {
      var $xeDatePicker = this;
      var isDatePickerType = $xeDatePicker.computeIsDatePickerType;
      if (isDatePickerType) {
        $xeDatePicker.hidePanel();
      }
      $xeDatePicker.handleChange('', evnt);
      $xeDatePicker.dispatchEvent('clear', {
        value: value
      }, evnt);
    },
    clickSuffixEvent: function clickSuffixEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      if (!isDisabled) {
        var inputValue = reactData.inputValue;
        $xeDatePicker.dispatchEvent('suffix-click', {
          value: inputValue
        }, evnt);
      }
    },
    blurEvent: function blurEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var $xeForm = $xeDatePicker.$xeForm;
      var formItemInfo = $xeDatePicker.formItemInfo;
      var $datePanel = $xeDatePicker.$refs.refDatePanel;
      var inputValue = reactData.inputValue;
      var inpImmediate = $xeDatePicker.computeInpImmediate;
      var value = inputValue;
      if (!inpImmediate) {
        $xeDatePicker.handleChange(value, evnt);
      }
      if (!reactData.visiblePanel) {
        reactData.isActivated = false;
        // 未打开面板时才校验
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
      }
      $xeDatePicker.dispatchEvent('blur', {
        value: value
      }, evnt);
      // 自动更新校验状态
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
      }
    },
    keydownEvent: function keydownEvent(evnt) {
      var $xeDatePicker = this;
      $xeDatePicker.triggerEvent(evnt);
    },
    keyupEvent: function keyupEvent(evnt) {
      var $xeDatePicker = this;
      $xeDatePicker.triggerEvent(evnt);
    },
    confirmEvent: function confirmEvent(evnt) {
      var $xeDatePicker = this;
      var $datePanel = $xeDatePicker.$refs.refDatePanel;
      if ($datePanel) {
        $datePanel.confirmByEvent(evnt);
      }
      $xeDatePicker.hidePanel();
    },
    panelChangeEvent: function panelChangeEvent(params) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var multiple = props.multiple,
        autoClose = props.autoClose;
      var value = params.value,
        $event = params.$event;
      var isDateTimeType = $xeDatePicker.computeIsDateTimeType;
      $xeDatePicker.handleChange(value, $event);
      if (!multiple && !isDateTimeType) {
        if (autoClose) {
          $xeDatePicker.hidePanel();
        }
      }
    },
    panelConfirmEvent: function panelConfirmEvent(params) {
      var $xeDatePicker = this;
      $xeDatePicker.dispatchEvent('confirm', params, params.$event);
    },
    // 全局事件
    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var $datePanel = $xeDatePicker.$refs.refDatePanel;
      var visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      var el = $xeDatePicker.$refs.refElem;
      var panelWrapperElem = $xeDatePicker.$refs.refPanelWrapper;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      if (!isDisabled && isActivated) {
        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
        if (!reactData.isActivated) {
          if (visiblePanel) {
            $xeDatePicker.hidePanel();
            if ($datePanel) {
              $datePanel.checkValue(reactData.inputLabel);
            }
          }
        }
      }
    },
    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      if (!isDisabled) {
        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
        if (isTab) {
          reactData.isActivated = false;
        }
        if (visiblePanel) {
          if (isEsc || isTab) {
            $xeDatePicker.hidePanel();
          }
        }
      }
    },
    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      if (!isDisabled) {
        if (visiblePanel) {
          var panelWrapperElem = $xeDatePicker.$refs.refPanelWrapper;
          if ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
            $xeDatePicker.updatePlacement();
          } else {
            $xeDatePicker.hidePanel();
          }
        }
      }
    },
    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var $datePanel = $xeDatePicker.$refs.refDatePanel;
      var isActivated = reactData.isActivated,
        visiblePanel = reactData.visiblePanel;
      if (visiblePanel) {
        $xeDatePicker.hidePanel();
      }
      if (isActivated) {
        reactData.isActivated = false;
      }
      if (visiblePanel || isActivated) {
        if ($datePanel) {
          $datePanel.checkValue(reactData.inputLabel);
        }
        var targetElem = $xeDatePicker.$refs.refInputTarget;
        if (targetElem) {
          targetElem.blur();
        }
      }
    },
    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var visiblePanel = reactData.visiblePanel;
      if (visiblePanel) {
        $xeDatePicker.updatePlacement();
      }
    },
    // 弹出面板
    updateZindex: function updateZindex() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var popupOpts = $xeDatePicker.computePopupOpts;
      var 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)();
      }
    },
    updatePlacement: function updatePlacement() {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var placement = props.placement;
      var panelIndex = reactData.panelIndex;
      var targetElem = $xeDatePicker.$refs.refInputTarget;
      var panelElem = $xeDatePicker.$refs.refInputPanel;
      var btnTransfer = $xeDatePicker.computeBtnTransfer;
      var popupOpts = $xeDatePicker.computePopupOpts;
      var handleStyle = function handleStyle() {
        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
          placement: popupOpts.placement || placement,
          defaultPlacement: popupOpts.defaultPlacement,
          teleportTo: btnTransfer
        });
        var panelStyle = Object.assign(ppObj.style, {
          zIndex: panelIndex
        });
        reactData.panelStyle = panelStyle;
        reactData.panelPlacement = ppObj.placement;
      };
      handleStyle();
      return $xeDatePicker.$nextTick().then(handleStyle);
    },
    showPanel: function showPanel() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var internalData = $xeDatePicker.internalData;
      var visiblePanel = reactData.visiblePanel;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      var btnTransfer = $xeDatePicker.computeBtnTransfer;
      var panelElem = $xeDatePicker.$refs.refInputPanel;
      if (!isDisabled && !visiblePanel) {
        if (!reactData.initialized) {
          reactData.initialized = true;
          if (btnTransfer) {
            if (panelElem) {
              document.body.appendChild(panelElem);
            }
          }
        }
        if (internalData.hpTimeout) {
          clearTimeout(internalData.hpTimeout);
          internalData.hpTimeout = undefined;
        }
        reactData.isActivated = true;
        reactData.isAniVisible = true;
        setTimeout(function () {
          reactData.visiblePanel = true;
          $xeDatePicker.updatePlacement();
        }, 10);
        $xeDatePicker.updateZindex();
        return $xeDatePicker.updatePlacement();
      }
      return $xeDatePicker.$nextTick();
    },
    datePickerOpenEvent: function datePickerOpenEvent(evnt) {
      var $xeDatePicker = this;
      var formReadonly = $xeDatePicker.computeFormReadonly;
      if (!formReadonly) {
        evnt.preventDefault();
        $xeDatePicker.showPanel();
      }
    },
    clickIconEvent: function clickIconEvent(evnt) {
      var $xeDatePicker = this;
      var popupOpts = $xeDatePicker.computePopupOpts;
      var trigger = popupOpts.trigger;
      if (!trigger || trigger === 'default' || trigger === 'icon') {
        $xeDatePicker.datePickerOpenEvent(evnt);
      }
    },
    clickEvent: function clickEvent(evnt) {
      var $xeDatePicker = this;
      $xeDatePicker.triggerEvent(evnt);
    },
    handleShortcutEvent: function handleShortcutEvent(_ref) {
      var option = _ref.option,
        $event = _ref.$event;
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var type = props.type;
      var inputValue = reactData.inputValue;
      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
      var autoClose = shortcutOpts.autoClose;
      var code = option.code,
        clickMethod = option.clickMethod;
      var value = inputValue;
      var shortcutParams = {
        $datePicker: $xeDatePicker,
        option: option,
        value: value,
        code: code
      };
      if (!clickMethod && code) {
        var gCommandOpts = _ui.commands.get(code);
        var dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
        if (dpCommandMethod) {
          dpCommandMethod(shortcutParams);
        } else {
          var dateValueFormat = $xeDatePicker.computeDateValueFormat;
          var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
          switch (code) {
            case 'now':
            case 'prev':
            case 'next':
            case 'minus':
            case 'plus':
              {
                var restObj = (0, _util.getDateByCode)(code, value, type, {
                  valueFormat: dateValueFormat,
                  firstDay: firstDayOfWeek
                });
                value = restObj.value;
                shortcutParams.value = value;
                $xeDatePicker.handleChange(value, $event);
                break;
              }
            default:
              (0, _log.errLog)('vxe.error.notCommands', ["[date-picker] ".concat(code)]);
              break;
          }
        }
      } else {
        var optClickMethod = clickMethod || shortcutOpts.clickMethod;
        if (optClickMethod) {
          optClickMethod(shortcutParams);
        }
      }
      if (autoClose) {
        $xeDatePicker.hidePanel();
      }
      $xeDatePicker.dispatchEvent('shortcut-click', shortcutParams, $event);
    },
    setModelValue: function setModelValue(value) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      reactData.inputValue = value;
      $xeDatePicker.emitModel(value);
    },
    setModelValueByEvent: function setModelValueByEvent(evnt, value) {
      var $xeDatePicker = this;
      $xeDatePicker.handleChange(value || '', evnt);
    },
    focus: function focus() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var inputElem = $xeDatePicker.$refs.refInputTarget;
      reactData.isActivated = true;
      inputElem.focus();
      return $xeDatePicker.$nextTick();
    },
    blur: function blur() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var inputElem = $xeDatePicker.$refs.refInputTarget;
      inputElem.blur();
      reactData.isActivated = false;
      return $xeDatePicker.$nextTick();
    },
    select: function select() {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      var inputElem = $xeDatePicker.$refs.refInputTarget;
      inputElem.select();
      reactData.isActivated = false;
      return $xeDatePicker.$nextTick();
    },
    //
    // Render
    //
    renderShortcutBtn: function renderShortcutBtn(h, pos, isVertical) {
      var $xeDatePicker = this;
      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
      var position = shortcutOpts.position,
        align = shortcutOpts.align,
        mode = shortcutOpts.mode;
      var shortcutList = $xeDatePicker.computeShortcutList;
      if ((0, _utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
        return h('div', {
          class: "vxe-date-picker--layout-".concat(pos, "-wrapper")
        }, [h(_buttonGroup.default, {
          props: {
            options: shortcutList,
            mode: mode,
            align: align,
            vertical: isVertical
          },
          on: {
            click: $xeDatePicker.handleShortcutEvent
          }
        })]);
      }
      return (0, _ui.renderEmptyElement)($xeDatePicker);
    },
    renderPanel: function renderPanel(h) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var slots = $xeDatePicker.$scopedSlots;
      var reactData = $xeDatePicker.reactData;
      var type = props.type,
        multiple = props.multiple,
        showClearButton = props.showClearButton,
        showConfirmButton = props.showConfirmButton;
      var initialized = reactData.initialized,
        isAniVisible = reactData.isAniVisible,
        visiblePanel = reactData.visiblePanel,
        panelPlacement = reactData.panelPlacement,
        panelStyle = reactData.panelStyle,
        inputValue = reactData.inputValue;
      var vSize = $xeDatePicker.computeSize;
      var btnTransfer = $xeDatePicker.computeBtnTransfer;
      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
      var isClearable = $xeDatePicker.computeIsClearable;
      var isDateTimeType = $xeDatePicker.computeIsDateTimeType;
      var shortcutList = $xeDatePicker.computeShortcutList;
      var timeOpts = $xeDatePicker.computeTimeOpts;
      var popupOpts = $xeDatePicker.computePopupOpts;
      var position = shortcutOpts.position;
      var headerSlot = slots.header;
      var footerSlot = slots.footer;
      var topSlot = slots.top;
      var bottomSlot = slots.bottom;
      var leftSlot = slots.left;
      var rightSlot = slots.right;
      var ppClassName = popupOpts.className;
      var hasShortcutBtn = shortcutList.length > 0;
      var showConfirmBtn = showConfirmButton === null ? isDateTimeType || multiple : showConfirmButton;
      var showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== 'time' : showClearButton;
      return h('div', {
        ref: 'refInputPanel',
        class: ['vxe-table--ignore-clear vxe-date-picker--panel', "type--".concat(type), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(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'))],
        attrs: {
          placement: panelPlacement
        },
        style: panelStyle
      }, initialized && (visiblePanel || isAniVisible) ? [h('div', {
        ref: 'refPanelWrapper',
        class: ['vxe-date-picker--layout-all-wrapper', "type--".concat(type), ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
          $datePicker: $xeDatePicker
        }) : ppClassName : '', _defineProperty({}, "size--".concat(vSize), vSize)]
      }, [topSlot ? h('div', {
        class: 'vxe-date-picker--layout-top-wrapper'
      }, topSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'top'), h('div', {
        class: 'vxe-date-picker--layout-body-layout-wrapper'
      }, [leftSlot ? h('div', {
        class: 'vxe-date-picker--layout-left-wrapper'
      }, leftSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'left', true), h('div', {
        class: 'vxe-date-picker--layout-body-content-wrapper'
      }, [headerSlot ? h('div', {
        class: 'vxe-date-picker--layout-header-wrapper'
      }, headerSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'header'), h('div', {
        class: 'vxe-date-picker--layout-body-wrapper'
      }, [h(_datePanel.default, {
        ref: 'refDatePanel',
        props: {
          value: 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
        },
        on: {
          change: $xeDatePicker.panelChangeEvent,
          confirm: $xeDatePicker.panelConfirmEvent
        }
      })]), h('div', {
        class: 'vxe-date-picker--layout-footer-wrapper'
      }, [h('div', {
        class: 'vxe-date-picker--layout-footer-custom'
      }, footerSlot ? footerSlot({}) : [$xeDatePicker.renderShortcutBtn(h, 'footer')]), showClearBtn || showConfirmBtn ? h('div', {
        class: 'vxe-date-picker--layout-footer-btns'
      }, [showClearBtn ? h(_button.default, {
        props: {
          size: 'mini',
          disabled: inputValue === '' || _xeUtils.default.eqNull(inputValue),
          content: (0, _ui.getI18n)('vxe.button.clear')
        },
        on: {
          click: $xeDatePicker.clearValueEvent
        }
      }) : (0, _ui.renderEmptyElement)($xeDatePicker), showConfirmBtn ? h(_button.default, {
        props: {
          size: 'mini',
          status: 'primary',
          content: (0, _ui.getI18n)('vxe.button.confirm')
        },
        on: {
          click: $xeDatePicker.confirmEvent
        }
      }) : (0, _ui.renderEmptyElement)($xeDatePicker)]) : (0, _ui.renderEmptyElement)($xeDatePicker)])]), rightSlot ? h('div', {
        class: 'vxe-date-picker--layout-right-wrapper'
      }, rightSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'right', true)]), bottomSlot ? h('div', {
        class: 'vxe-date-picker--layout-bottom-wrapper'
      }, bottomSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'bottom')])] : []);
    },
    renderPrefixIcon: function renderPrefixIcon(h) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var slots = $xeDatePicker.$scopedSlots;
      var prefixIcon = props.prefixIcon;
      var prefixSlot = slots.prefix;
      return prefixSlot || prefixIcon ? h('div', {
        class: 'vxe-date-picker--prefix',
        on: {
          click: $xeDatePicker.clickPrefixEvent
        }
      }, [h('div', {
        class: 'vxe-date-picker--prefix-icon'
      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [h('i', {
        class: prefixIcon
      })])]) : null;
    },
    renderSuffixIcon: function renderSuffixIcon(h) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var slots = $xeDatePicker.$scopedSlots;
      var reactData = $xeDatePicker.reactData;
      var suffixIcon = props.suffixIcon;
      var inputValue = reactData.inputValue;
      var suffixSlot = slots.suffix;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      var isClearable = $xeDatePicker.computeIsClearable;
      return h('div', {
        class: ['vxe-date-picker--suffix', {
          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
        }]
      }, [isClearable ? h('div', {
        class: 'vxe-date-picker--clear-icon',
        on: {
          click: $xeDatePicker.clearValueEvent
        }
      }, [h('i', {
        class: (0, _ui.getIcon)().INPUT_CLEAR
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker), $xeDatePicker.renderExtraSuffixIcon(h), suffixSlot || suffixIcon ? h('div', {
        class: 'vxe-date-picker--suffix-icon',
        on: {
          click: $xeDatePicker.clickSuffixEvent
        }
      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [h('i', {
        class: suffixIcon
      })]) : (0, _ui.renderEmptyElement)($xeDatePicker)]);
    },
    renderExtraSuffixIcon: function renderExtraSuffixIcon(h) {
      var $xeDatePicker = this;
      return h('div', {
        class: 'vxe-date-picker--control-icon',
        on: {
          click: $xeDatePicker.clickIconEvent
        }
      }, [h('i', {
        class: ['vxe-date-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
      })]);
    },
    renderVN: function renderVN(h) {
      var $xeDatePicker = this;
      var props = $xeDatePicker;
      var reactData = $xeDatePicker.reactData;
      var className = props.className,
        type = props.type,
        name = props.name,
        autoComplete = props.autoComplete;
      var inputValue = reactData.inputValue,
        inputLabel = reactData.inputLabel,
        visiblePanel = reactData.visiblePanel,
        isActivated = reactData.isActivated;
      var vSize = $xeDatePicker.computeSize;
      var isDisabled = $xeDatePicker.computeIsDisabled;
      var formReadonly = $xeDatePicker.computeFormReadonly;
      var panelLabel = $xeDatePicker.computePanelLabel;
      if (formReadonly) {
        return h('div', {
          ref: 'refElem',
          class: ['vxe-date-picker--readonly', "type--".concat(type), className]
        }, panelLabel);
      }
      var inputReadonly = $xeDatePicker.computeInputReadonly;
      var inpPlaceholder = $xeDatePicker.computeInpPlaceholder;
      var isClearable = $xeDatePicker.computeIsClearable;
      var prefix = $xeDatePicker.renderPrefixIcon(h);
      var suffix = $xeDatePicker.renderSuffixIcon(h);
      return h('div', {
        ref: 'refElem',
        class: ['vxe-date-picker', "type--".concat(type), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(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)))],
        attrs: {
          spellcheck: false
        }
      }, [prefix || (0, _ui.renderEmptyElement)($xeDatePicker), h('div', {
        class: 'vxe-date-picker--wrapper'
      }, [h('input', {
        ref: 'refInputTarget',
        class: 'vxe-date-picker--inner',
        domProps: {
          value: inputLabel
        },
        attrs: {
          name: name,
          type: 'text',
          placeholder: inpPlaceholder,
          readonly: inputReadonly,
          disabled: isDisabled,
          autocomplete: autoComplete
        },
        on: {
          keydown: $xeDatePicker.keydownEvent,
          keyup: $xeDatePicker.keyupEvent,
          click: $xeDatePicker.clickEvent,
          input: $xeDatePicker.inputEvent,
          change: $xeDatePicker.changeEvent,
          focus: $xeDatePicker.focusEvent,
          blur: $xeDatePicker.blurEvent
        }
      })]), suffix || (0, _ui.renderEmptyElement)($xeDatePicker),
      // 下拉面板
      $xeDatePicker.renderPanel(h)]);
    }
  },
  watch: {
    computePanelLabel: function computePanelLabel(val) {
      var $xeDatePicker = this;
      var reactData = $xeDatePicker.reactData;
      reactData.inputLabel = val;
    },
    value: function value() {
      var $xeDatePicker = this;
      $xeDatePicker.updateModelValue();
    }
  },
  created: function created() {
    var $xeDatePicker = this;
    $xeDatePicker.updateModelValue();
    _ui.globalEvents.on($xeDatePicker, 'mousewheel', $xeDatePicker.handleGlobalMousewheelEvent);
    _ui.globalEvents.on($xeDatePicker, 'mousedown', $xeDatePicker.handleGlobalMousedownEvent);
    _ui.globalEvents.on($xeDatePicker, 'keydown', $xeDatePicker.handleGlobalKeydownEvent);
    _ui.globalEvents.on($xeDatePicker, 'blur', $xeDatePicker.handleGlobalBlurEvent);
    _ui.globalEvents.on($xeDatePicker, 'resize', $xeDatePicker.handleGlobalResizeEvent);
  },
  beforeDestroy: function beforeDestroy() {
    var $xeDatePicker = this;
    var panelElem = $xeDatePicker.$refs.refInputPanel;
    if (panelElem && panelElem.parentNode) {
      panelElem.parentNode.removeChild(panelElem);
    }
    _ui.globalEvents.off($xeDatePicker, 'mousewheel');
    _ui.globalEvents.off($xeDatePicker, 'mousedown');
    _ui.globalEvents.off($xeDatePicker, 'blur');
    _ui.globalEvents.off($xeDatePicker, 'resize');
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */