/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { defineComponent, ref, computed } from '@vue/composition-api';
import _Jumper from '../../jumper/jumper.js';
import TSelect from '../../select/select.js';
import { usePrefixClass } from '../../../hooks/use-config.js';
import { useConfig } from '../../config-provider/useConfig.js';
import 'lodash/isObject';
import '@ldesign/icons-vue';
import '../../../hooks/use-global-icon.js';
import '../../config-provider/context.js';
import 'lodash';
import '../../../chunks/zh_CN.js';
import '../../config-provider/type.js';
import '../../button/index.js';
import '../../../utils/with-install.js';
import 'vue';
import '../../../config.js';
import '../../button/button.js';
import '../../loading/index.js';
import '../../loading/loading.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../chunks/index.js';
import '../../../chunks/log.js';
import '../../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../../utils/easing.js';
import '../../../utils/render-node.js';
import '../../../utils/transfer-dom.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../../utils/mixins.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../../chunks/defineProperty-838e4192.js';
import '../../../chunks/set-style.js';
import '../../../chunks/helper2.js';
import '../../loading/style';
import '../../loading/type.js';
import '../../loading/plugin.js';
import '../../../utils/ripple.js';
import '../../button/props.js';
import '../../button/style';
import '../../button/type.js';
import '../../jumper/props.js';
import '../../../chunks/helper.js';
import '../../../chunks/_commonjsHelpers.js';
import 'lodash/isFunction';
import 'lodash/debounce';
import 'lodash/get';
import 'lodash/cloneDeep';
import 'lodash/isArray';
import '../../../hooks/use-default-value.js';
import '../../../hooks/use-vmodel.js';
import 'lodash/kebabCase';
import '../../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/camelCase';
import '../../../hooks/render-lnode.js';
import '../../popup/index.js';
import '../../../utils/map-props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../../utils/helper.js';
import '../../popup/props.js';
import '../../popup/container.js';
import '../../popup/style';
import '../../popup/type.js';
import '../../input/index.js';
import '../../input/input.js';
import '../../../utils/event.js';
import '../../input/props.js';
import '../../input/group.js';
import '../../input/style';
import '../../input/type.js';
import '../../tag/index.js';
import '../../tag/tag.js';
import '../../tag/props.js';
import '../../tag/check-tag.js';
import '../../tag/style';
import '../../tag/type.js';
import '../../select-input/index.js';
import '../../select-input/select-input.js';
import '../../select-input/props.js';
import '../../select-input/hooks/use-single.js';
import 'lodash/pick';
import '../../select-input/hooks/use-multiple.js';
import '../../tag-input/index.js';
import '../../tag-input/tag-input.js';
import '../../tag-input/props.js';
import '../../tag-input/hooks/use-tag-scroll.js';
import '../../tag-input/hooks/use-tag-list.js';
import '../../tag-input/hooks/use-hover.js';
import '../../tag-input/hooks/use-drag-sorter.js';
import '../../tag-input/style';
import '../../tag-input/type.js';
import '../../select-input/hooks/use-overlay-innerstyle.js';
import '../../select-input/style';
import '../../select-input/type.js';
import '../../common/fake-arrow.js';
import '../../../hooks/use-form-disabled.js';
import '../../select/option.js';
import '../../checkbox/index.js';
import '../../checkbox/group.js';
import 'lodash/intersection';
import '../../checkbox/checkbox.js';
import '../../checkbox/props.js';
import '../../checkbox/style';
import '../../checkbox/type.js';
import '../../../hooks/use-lazy-load.js';
import '../../../chunks/observe.js';
import '../../../hooks/use-common-classname.js';
import '../../select/utils.js';
import '../../select/props.js';
import '../../select/select-panel.js';
import '../../../hooks/use-virtual-scroll.js';
import '../../select/hooks/use-select-options.js';

var TDateHeader = defineComponent({
  name: "LDatePickerHeader",
  props: {
    mode: {
      type: String,
      default: "date"
    },
    year: Number,
    month: Number,
    onMonthChange: Function,
    onYearChange: Function,
    onJumperClick: Function
  },
  setup(props) {
    const {
      classPrefix
    } = useConfig("classPrefix");
    const COMPONENT_NAME = usePrefixClass("date-picker__header");
    const {
      global
    } = useConfig("datePicker");
    const yearOptions = ref(initOptions(props.year));
    const showMonthPicker = props.mode === "date" || props.mode === "week";
    const nearestYear = computed(() => {
      var _yearOptions$value$fi;
      return ((_yearOptions$value$fi = yearOptions.value.find(option => option.value - props.year <= 9 && option.value - props.year >= 0)) === null || _yearOptions$value$fi === void 0 ? void 0 : _yearOptions$value$fi.value) || props.year;
    });
    const monthOptions = computed(() => global.value.months.map((item, index) => ({
      label: item,
      value: index
    })));
    function initOptions(year) {
      const options = [];
      if (props.mode === "year") {
        const extraYear = year % 10;
        const minYear = year - extraYear - 100;
        const maxYear = year - extraYear + 100;
        for (let i = minYear; i <= maxYear; i += 10) options.push({
          label: `${i} - ${i + 9}`,
          value: i + extraYear
        });
      } else {
        options.push({
          label: `${year}`,
          value: year
        });
        for (let i = 1; i <= 10; i++) {
          options.push({
            label: `${year + i}`,
            value: year + i
          });
          options.unshift({
            label: `${year - i}`,
            value: year - i
          });
        }
      }
      return options;
    }
    function loadMoreYear(year, type) {
      const options = [];
      if (props.mode === "year") {
        const extraYear = year % 10;
        if (type === "add") {
          for (let i = year - extraYear + 10; i <= year - extraYear + 50; i += 10) options.push({
            label: `${i} - ${i + 9}`,
            value: i
          });
        } else {
          for (let i = year - extraYear - 1; i > year - extraYear - 50; i -= 10) options.unshift({
            label: `${i - 9} - ${i}`,
            value: i
          });
        }
      } else if (type === "add") {
        for (let i = year + 1; i <= year + 10; i++) options.push({
          label: `${i}`,
          value: i
        });
      } else {
        for (let i = year - 1; i > year - 10; i--) options.unshift({
          label: `${i}`,
          value: i
        });
      }
      return options;
    }
    const labelMap = {
      year: {
        prev: global.value.preDecade,
        current: global.value.now,
        next: global.value.nextDecade
      },
      month: {
        prev: global.value.preYear,
        current: global.value.now,
        next: global.value.nextYear
      },
      date: {
        prev: global.value.preMonth,
        current: global.value.now,
        next: global.value.nextMonth
      }
    };
    function handlePanelTopClick(e) {
      var _e$stopPropagation;
      e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
      const firstYear = yearOptions.value[0].value;
      const options = loadMoreYear(firstYear, "reduce");
      yearOptions.value = [...options, ...yearOptions.value];
    }
    function handlePanelBottomClick(e) {
      var _e$stopPropagation2;
      e === null || e === void 0 ? void 0 : (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
      const lastYear = yearOptions.value.slice(-1)[0].value;
      const options = loadMoreYear(lastYear, "add");
      yearOptions.value = [...yearOptions.value, ...options];
    }
    function handleScroll(_ref) {
      let {
        e
      } = _ref;
      if (e.target.scrollTop === 0) handlePanelTopClick(e);else if (e.target.scrollTop === e.target.scrollHeight - e.target.clientHeight) handlePanelBottomClick(e);
    }
    return {
      COMPONENT_NAME,
      labelMap,
      nearestYear,
      classPrefix,
      monthOptions,
      yearOptions,
      showMonthPicker,
      handleScroll,
      handlePanelTopClick,
      handlePanelBottomClick
    };
  },
  render() {
    const h = arguments[0];
    const {
      COMPONENT_NAME,
      labelMap,
      nearestYear,
      classPrefix,
      monthOptions,
      yearOptions,
      showMonthPicker,
      handlePanelTopClick,
      handlePanelBottomClick
    } = this;
    return h("div", {
      "class": COMPONENT_NAME
    }, [h("div", {
      "class": `${COMPONENT_NAME}-controller`
    }, [showMonthPicker && h(TSelect, {
      "class": `${COMPONENT_NAME}-controller-month`,
      "props": {
        ...{
          value: this.month,
          options: monthOptions,
          onChange: val => {
            var _this$onMonthChange;
            return (_this$onMonthChange = this.onMonthChange) === null || _this$onMonthChange === void 0 ? void 0 : _this$onMonthChange.call(this, val);
          },
          popupProps: {
            attach: triggerElement => triggerElement.parentNode,
            overlayClassName: `${COMPONENT_NAME}-controller-month-popup`
          }
        }
      }
    }), h(TSelect, {
      "class": `${COMPONENT_NAME}-controller-year`,
      "props": {
        ...{
          value: this.mode === "year" ? nearestYear : this.year,
          options: yearOptions,
          onChange: val => {
            var _this$onYearChange;
            return (_this$onYearChange = this.onYearChange) === null || _this$onYearChange === void 0 ? void 0 : _this$onYearChange.call(this, val);
          },
          popupProps: {
            onScroll: this.handleScroll,
            attach: triggerElement => triggerElement.parentNode,
            overlayClassName: `${COMPONENT_NAME}-controller-year-popup`
          },
          panelTopContent: () => h("div", {
            "class": `${classPrefix}-select-option`,
            "on": {
              "click": handlePanelTopClick
            }
          }, ["..."]),
          panelBottomContent: () => h("div", {
            "class": `${classPrefix}-select-option`,
            "on": {
              "click": handlePanelBottomClick
            }
          }, ["..."])
        }
      }
    })]), h(_Jumper, {
      "props": {
        ...{
          tips: labelMap[this.mode],
          onChange: this.onJumperClick,
          size: "small"
        }
      }
    })]);
  }
});

export { TDateHeader as default };
//# sourceMappingURL=Header.js.map
