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

import { h as helper } from '../../chunks/helper.js';
import '../../chunks/index.js';
import { emitEvent } from '../../utils/event.js';
import { InputNumber } from '../input-number/index.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import mixins from '../../utils/mixins.js';
import { SliderProps } from './props.js';
import LSliderMark from './mark.js';
import LSliderButton from './button.js';
import { l as log } from '../../chunks/log.js';
import '../../chunks/_commonjsHelpers.js';
import '../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../utils/helper.js';
import 'lodash/camelCase';
import '../../utils/map-props.js';
import 'vue';
import '../../utils/with-install.js';
import 'lodash';
import '../../config.js';
import '../input-number/input-number.js';
import '@ldesign/icons-vue';
import '@vue/composition-api';
import '../button/index.js';
import '../button/button.js';
import '../loading/index.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 '../loading/props.js';
import '../loading/icon/gradient.js';
import '../../chunks/defineProperty-838e4192.js';
import '../../chunks/set-style.js';
import '../../chunks/helper2.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../loading/style/css.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../../utils/ripple.js';
import '../button/props.js';
import '../button/style/css.js';
import '../button/type.js';
import '../input/index.js';
import '../input/input.js';
import 'lodash/kebabCase';
import '../input/props.js';
import '../input/group.js';
import '../input/style/css.js';
import '../input/type.js';
import '../../hooks/use-global-icon.js';
import '../../hooks/use-config.js';
import '../config-provider/useConfig.js';
import '../input-number/props.js';
import '../input-number/hooks/use-input-number.js';
import '../../chunks/isObjectLike-c22c7e3b.js';
import '../../chunks/isArray-cd7357b9.js';
import '../../chunks/isNumber-c4eb560e.js';
import '../../hooks/use-common-classname.js';
import '../../hooks/use-vmodel.js';
import '../../hooks/use-form-disabled.js';
import '../input-number/style/css.js';
import '../input-number/type.js';
import '../tooltip/index.js';
import '../tooltip/tooltip.js';
import 'lodash/isFunction';
import '../popup/props.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../popup/container.js';
import '../tooltip/props.js';
import '../tooltip/style/css.js';
import '../tooltip/type.js';

const classPrefixMixins = getClassPrefixMixins("slider");
var _Slider = mixins(classPrefixMixins).extend({
  name: "LSlider",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    ...SliderProps
  },
  components: {
    LSliderMark,
    LInputNumber: InputNumber,
    LSliderButton
  },
  provide() {
    return {
      slider: this
    };
  },
  data() {
    return {
      firstValue: 0,
      secondValue: 0,
      prevValue: 0,
      dragging: false,
      sliderSize: 1,
      inputDecimalPlaces: 0,
      inputFormat: null,
      inputPlaceholder: "",
      inputTheme: "column",
      showSteps: false,
      formDisabled: void 0
    };
  },
  computed: {
    tDisabled() {
      return this.formDisabled || this.disabled;
    },
    containerClass() {
      return [`${this.componentName}__container`, {
        "is-vertical": this.vertical
      }];
    },
    sliderClass() {
      return [`${this.componentName}`, {
        "is-vertical": this.vertical,
        [`${this.componentName}--with-input`]: this.inputNumberProps,
        [`${this.componentName}--vertical`]: this.vertical,
        [`${this.classPrefix}-is-disabled`]: this.tDisabled
      }];
    },
    sliderRailClass() {
      return [`${this.componentName}__rail`, {
        "show-input": this.inputNumberProps,
        [`${this.classPrefix}-is-disabled`]: this.tDisabled
      }];
    },
    sliderNumberClass() {
      return [`${this.componentName}__input`, {
        "is-vertical": this.vertical
      }];
    },
    vertical() {
      return this.layout === "vertical";
    },
    rangeDiff() {
      return this.max - this.min;
    },
    steps() {
      const {
        min,
        max,
        rangeDiff,
        step
      } = this;
      if (!this.showSteps || min > max) return [];
      if (this.step === 0) {
        log.warn("Slider", "[Element Warn][Slider]step should not be 0.");
        return [];
      }
      const stepCount = rangeDiff / step;
      const stepWidth = 100 * step / rangeDiff;
      const result = [];
      for (let i = 1; i < stepCount; i++) result.push(i * stepWidth);
      if (this.range) {
        return result.filter(step2 => step2 < 100 * (this.minValue - min) / rangeDiff || step2 > 100 * (this.maxValue - min) / rangeDiff);
      }
      return result.filter(step2 => step2 > 100 * (this.firstValue - min) / rangeDiff);
    },
    markList() {
      if (!this.marks) return [];
      const legalMarks = [];
      Object.keys(this.marks).map(parseFloat).sort((a, b) => a - b).filter(point => point <= this.max && point >= this.min).forEach(point => {
        const item = {
          point,
          position: (point - this.min) * 100 / this.rangeDiff,
          mark: this.marks[point]
        };
        legalMarks.push(item);
      });
      return legalMarks;
    },
    minValue() {
      return Math.min(this.firstValue, this.secondValue);
    },
    maxValue() {
      return Math.max(this.firstValue, this.secondValue);
    },
    barSize() {
      const diff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
      return `${100 * diff / this.rangeDiff}%`;
    },
    barStart() {
      return this.range ? `${100 * (this.minValue - this.min) / this.rangeDiff}%` : "0%";
    },
    precision() {
      const precisions = [this.min, this.max, this.step].map(item => {
        const decimalArr = `${item}`.split(".");
        return decimalArr[1] ? decimalArr[1].length : 0;
      });
      return Math.max.apply(null, precisions);
    },
    runwayStyle() {
      return this.vertical ? {
        height: "100%"
      } : {};
    },
    barStyle() {
      return this.vertical ? {
        height: this.barSize,
        bottom: this.barStart
      } : {
        width: this.barSize,
        left: this.barStart
      };
    },
    calcInputNumberProps() {
      const defaultInputNumberProps = {
        decimalPlaces: 0,
        placeholder: "",
        theme: "column"
      };
      if (typeof this.inputNumberProps === "object") {
        return {
          ...defaultInputNumberProps,
          ...this.inputNumberProps
        };
      }
      return defaultInputNumberProps;
    }
  },
  watch: {
    value(newVal) {
      if (this.dragging === true) return;
      if (Array.isArray(newVal) && this.range) [this.firstValue, this.secondValue] = newVal;else this.prevValue = newVal;
    },
    firstValue(val) {
      if (this.range) this.emitChange([this.minValue, this.maxValue]);else this.emitChange(val);
    },
    secondValue() {
      if (this.range) this.emitChange([this.minValue, this.maxValue]);
    },
    prevValue(val) {
      this.emitChange(val);
    },
    dragging(newVal) {
      if (newVal === false) this.init();
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resetSize);
  },
  methods: {
    init() {
      let valuetext;
      const {
        min,
        max,
        value
      } = this;
      if (this.range) {
        if (Array.isArray(value)) {
          this.firstValue = Math.max(min || 0, value[0]);
          this.secondValue = Math.min(max || 100, value[1]);
        } else {
          this.firstValue = min || 0;
          this.secondValue = max || 100;
        }
        valuetext = `${this.firstValue}-${this.secondValue}`;
      } else {
        if (typeof this.value !== "number") this.prevValue = min;else this.prevValue = Math.min(max, Math.max(min, value));
        valuetext = String(this.prevValue);
      }
      this.$el.setAttribute("aria-valuetext", valuetext);
      this.resetSize();
      window.addEventListener("resize", this.resetSize);
    },
    valueChanged() {
      if (this.range) return ![this.minValue, this.maxValue].every((item, index) => item === this.prevValue[index]);
      return this.value !== this.prevValue;
    },
    setValues(value) {
      const [min, max] = [this.min, this.max];
      if (min > max) {
        log.warn("Slider", "[Slider] max should be greater than min.");
        return;
      }
      if (this.range && Array.isArray(value)) {
        let [firstValue, secondValue] = [Math.min(...value), Math.max(...value)];
        if (firstValue > max) firstValue = this.firstValue;
        if (firstValue < min) firstValue = min;
        if (secondValue < min) secondValue = this.secondValue;
        if (secondValue > max) secondValue = max;
        [this.firstValue, this.secondValue] = [firstValue, secondValue];
        return [firstValue, secondValue];
      }
      let prevValue = value;
      if (prevValue < min) prevValue = min;
      if (prevValue > max) prevValue = max;
      this.prevValue = prevValue;
      return prevValue;
    },
    setPosition(percent) {
      let targetValue = percent * this.rangeDiff / 100;
      targetValue = this.min + targetValue;
      if (!this.range) {
        this.$refs.button1.setPosition(percent);
        return;
      }
      let button;
      if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) button = this.firstValue < this.secondValue ? "button1" : "button2";else button = this.firstValue > this.secondValue ? "button1" : "button2";
      this.$refs[button].setPosition(percent);
    },
    onSliderClick(event) {
      if (this.tDisabled || this.dragging) return;
      this.resetSize();
      let value = 0;
      if (this.vertical) {
        const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
        value = (sliderOffsetBottom - event.clientY) / this.sliderSize * 100;
        this.setPosition(value);
      } else {
        const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
        value = (event.clientX - sliderOffsetLeft) / this.sliderSize * 100;
        this.setPosition(value);
      }
    },
    resetSize() {
      if (this.$refs.slider) this.sliderSize = this.$refs.slider[`client${this.vertical ? "Height" : "Width"}`];
    },
    emitChange(value) {
      let changeValue = value;
      if (changeValue === void 0) {
        if (this.range) changeValue = [this.firstValue, this.secondValue];else changeValue = this.prevValue;
      }
      const fixValue = this.setValues(changeValue);
      emitEvent(this, "change", fixValue);
    },
    getStopStyle(position) {
      return this.vertical ? {
        top: `calc(${100 - position}% - 1px)`
      } : {
        left: `${position}%`
      };
    },
    changeValue(point) {
      if (this.tDisabled || this.dragging) return;
      this.resetSize();
      const value = Number(point / this.rangeDiff * 100);
      this.setPosition(value);
      this.emitChange(point);
    },
    renderMask() {
      const h = this.$createElement;
      if (this.markList.length) {
        return h("div", [h("div", [this.markList.map((item, index) => h("div", {
          "class": [`${this.componentName}__stop`, `${this.componentName}__mark-stop`],
          "style": this.getStopStyle(item.position),
          "key": index
        }))]), h("div", {
          "class": `${this.componentName}__mark`
        }, [this.markList.map((item, key) => h("l-slider-mark", {
          "attrs": {
            "mark": item.mark,
            "point": item.point
          },
          "key": key,
          "style": this.getStopStyle(item.position),
          "on": {
            "change-value": this.changeValue
          }
        }))])]);
      }
    },
    renderInputButton() {
      const h = this.$createElement;
      const {
        max,
        min,
        sliderNumberClass,
        range
      } = this;
      return h("div", {
        "class": [`${this.componentName}__input-container`, {
          "is-vertical": this.vertical
        }]
      }, [h("l-input-number", helper([{
        "class": sliderNumberClass,
        "attrs": {
          "value": range ? this.firstValue : this.prevValue,
          "step": this.step,
          "disabled": this.tDisabled,
          "min": min,
          "max": max
        },
        "ref": "input",
        "on": {
          "change": v => {
            this.range ? this.firstValue = v : this.prevValue = v;
          }
        }
      }, {
        "props": this.calcInputNumberProps
      }])), range && h("div", {
        "class": `${this.componentName}__center-line`
      }), range && h("l-input-number", helper([{
        "class": this.sliderNumberClass,
        "ref": "input",
        "attrs": {
          "step": this.step,
          "disabled": this.tDisabled,
          "min": min,
          "max": max
        }
      }, {
        "props": this.calcInputNumberProps
      }, {
        "model": {
          value: this.secondValue,
          callback: $$v => {
            this.secondValue = $$v;
          }
        }
      }]))]);
    }
  },
  render() {
    const h = arguments[0];
    const {
      min,
      max,
      layout,
      disabled,
      vertical,
      range
    } = this;
    const buttonGroup = this.inputNumberProps && this.renderInputButton();
    const masks = this.renderMask();
    return h("div", {
      "class": this.containerClass
    }, [h("div", {
      "class": this.sliderClass,
      "attrs": {
        "role": "slider",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-orientation": layout,
        "aria-disabled": disabled,
        "tooltip-props": this.tooltipProps
      }
    }, [h("div", {
      "class": this.sliderRailClass,
      "style": this.runwayStyle,
      "on": {
        "click": this.onSliderClick
      },
      "ref": "slider"
    }, [h("div", {
      "class": `${this.componentName}__track`,
      "style": this.barStyle
    }), h("l-slider-button", {
      "attrs": {
        "vertical": vertical,
        "value": range ? this.firstValue : this.prevValue,
        "disabled": this.tDisabled,
        "label": this.label,
        "range": this.range,
        "position": "start",
        "tooltip-props": this.tooltipProps
      },
      "ref": "button1",
      "on": {
        "input": v => {
          this.range ? this.firstValue = v : this.prevValue = v;
        }
      }
    }), this.range && h("l-slider-button", {
      "attrs": {
        "vertical": vertical,
        "disabled": this.tDisabled,
        "range": this.range,
        "position": "end",
        "label": this.label,
        "tooltip-props": this.tooltipProps
      },
      "ref": "button2",
      "model": {
        value: this.secondValue,
        callback: $$v => {
          this.secondValue = $$v;
        }
      }
    }), this.showSteps && h("div", [this.steps.map((item, key) => h("div", {
      "class": `${this.componentName}__stop`,
      "key": key,
      "style": this.getStopStyle(item)
    }))]), masks])]), buttonGroup]);
  }
});

export { _Slider as default };
//# sourceMappingURL=slider.js.map
