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

import { defineComponent, ref, computed, nextTick, onMounted, watch } from '@vue/composition-api';
import dayjs from 'dayjs';
import { c as customParseFormat, S as SinglePanel, D as DEFAULT_FORMAT, a as DEFAULT_STEPS } from '../../../chunks/single-panel.js';
import '../../../chunks/index.js';
import LButton from '../../button/button.js';
import { usePrefixClass } from '../../../hooks/use-config.js';
import { panelProps } from './props.js';
import { useConfig } from '../../config-provider/useConfig.js';
import { l as log } from '../../../chunks/log.js';
import 'lodash/debounce';
import 'lodash/range';
import 'lodash/padStart';
import '../../../chunks/_commonjsHelpers.js';
import '../../../chunks/dayjs.min-c4f4ce86.js';
import '../../../chunks/_commonjsHelpers-2e6815bd.js';
import '@ldesign/icons-vue';
import '../../loading/index.js';
import '../../../utils/with-install.js';
import 'vue';
import 'lodash';
import '../../../config.js';
import '../../loading/loading.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../utils/easing.js';
import '../../../utils/render-node.js';
import '../../../utils/transfer-dom.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../config-provider/context.js';
import '../../../chunks/zh_CN.js';
import '../../config-provider/type.js';
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/css.js';
import '../../loading/type.js';
import '../../loading/plugin.js';
import '../../../utils/ripple.js';
import '../../button/props.js';
import '../props.js';

dayjs.extend(customParseFormat);
var TTimePickerPanel = defineComponent({
  name: "TimePickerPanel",
  components: {
    LButton
  },
  props: {
    ...panelProps(),
    handleConfirmClick: Function,
    onChange: Function,
    onPick: Function,
    disableTime: Function
  },
  setup(props, ctx) {
    const panelClassName = usePrefixClass("time-picker__panel");
    const triggerScroll = ref(false);
    const {
      global
    } = useConfig("timePicker");
    const showNowTimeBtn = computed(() => !!props.steps.filter(v => v > 1).length);
    const defaultValue = computed(() => {
      const isStepsSet = showNowTimeBtn.value;
      if (props.value) return dayjs(props.value, props.format);
      if (isStepsSet) return dayjs().hour(0).minute(0).second(0);
      return dayjs();
    });
    const panelColUpdate = () => {
      nextTick(() => {
        triggerScroll.value = true;
      });
    };
    const resetTriggerScroll = () => {
      triggerScroll.value = false;
    };
    const handleChange = v => {
      var _props$onPick, _props$onChange;
      (_props$onPick = props.onPick) === null || _props$onPick === void 0 ? void 0 : _props$onPick.call(props, v);
      ctx.emit("pick", v);
      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, v);
      ctx.emit("change", v);
    };
    const handlePresetClick = presetValue => {
      const presetVal = typeof presetValue === "function" ? presetValue() : presetValue;
      if (typeof props.activeIndex === "number") {
        if (Array.isArray(presetVal)) props.onChange(presetVal[props.activeIndex]);else log.error("TimePicker", `preset: ${props.presets} \u9884\u8BBE\u503C\u5FC5\u987B\u662F\u6570\u7EC4!`);
      } else {
        props.onChange(presetVal);
      }
    };
    onMounted(() => {
      panelColUpdate();
    });
    watch(() => props.isShowPanel, () => {
      panelColUpdate();
    });
    return {
      showNowTimeBtn,
      panelClassName,
      triggerScroll,
      resetTriggerScroll,
      defaultValue,
      global,
      handleChange,
      handlePresetClick
    };
  },
  render() {
    const h = arguments[0];
    return h("div", {
      "class": this.panelClassName
    }, [h("div", {
      "class": `${this.panelClassName}-section-body`
    }, [h(SinglePanel, {
      "props": {
        ...{
          value: this.value,
          onChange: this.handleChange,
          onPick: this.onPick,
          format: this.format || DEFAULT_FORMAT,
          steps: this.steps || DEFAULT_STEPS,
          triggerScroll: this.triggerScroll,
          disableTime: this.disableTime,
          resetTriggerScroll: this.resetTriggerScroll,
          isShowPanel: this.isShowPanel
        }
      }
    })]), this.isFooterDisplay ? h("div", {
      "class": `${this.panelClassName}-section-footer`
    }, [h("l-button", {
      "attrs": {
        "theme": "primary",
        "variant": "base",
        "size": "small"
      },
      "on": {
        "click": () => this.handleConfirmClick(this.defaultValue)
      }
    }, [this.global.confirm]), h("div", [!this.showNowTimeBtn ? h("l-button", {
      "attrs": {
        "theme": "primary",
        "variant": "text",
        "size": "small"
      },
      "on": {
        "click": () => this.onChange(dayjs().format(this.format))
      }
    }, [this.global.now]) : null, this.presets && Object.keys(this.presets).map(key => h("l-button", {
      "key": key,
      "attrs": {
        "theme": "primary",
        "size": "small",
        "variant": "text"
      },
      "on": {
        "click": () => {
          var _this$handlePresetCli;
          return (_this$handlePresetCli = this.handlePresetClick) === null || _this$handlePresetCli === void 0 ? void 0 : _this$handlePresetCli.call(this, this.presets[key]);
        }
      }
    }, [key]))])]) : null]);
  }
});

export { TTimePickerPanel as default };
//# sourceMappingURL=time-picker-panel.js.map
