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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var helper = require('../../chunks/helper.js');
var log = require('../../chunks/log.js');
var utils_event = require('../../utils/event.js');
var components_inputNumber_index = require('../input-number/index.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
var utils_mixins = require('../../utils/mixins.js');
var components_slider_props = require('./props.js');
var components_slider_mark = require('./mark.js');
var components_slider_button = require('./button.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/helper.js');
require('lodash/camelCase');
require('../../utils/map-props.js');
require('vue');
require('../../utils/with-install.js');
require('lodash');
require('../../config.js');
require('../input-number/input-number.js');
require('@ldesign/icons-vue');
require('@vue/composition-api');
require('../button/index.js');
require('../button/button.js');
require('../loading/index.js');
require('../loading/loading.js');
require('../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../utils/easing.js');
require('../../utils/render-node.js');
require('../../utils/transfer-dom.js');
require('../loading/props.js');
require('../loading/icon/gradient.js');
require('../../chunks/defineProperty-838e4192.js');
require('../../chunks/set-style.js');
require('../../chunks/helper2.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../loading/plugin.js');
require('../../utils/ripple.js');
require('../button/props.js');
require('../input/index.js');
require('../input/input.js');
require('lodash/kebabCase');
require('../input/props.js');
require('../input/group.js');
require('../../hooks/use-global-icon.js');
require('../config-provider/useConfig.js');
require('../input-number/props.js');
require('../input-number/hooks/use-input-number.js');
require('../../chunks/isObjectLike-c22c7e3b.js');
require('../../chunks/isArray-cd7357b9.js');
require('../../chunks/isNumber-c4eb560e.js');
require('../../hooks/use-common-classname.js');
require('../../hooks/use-vmodel.js');
require('../../hooks/use-form-disabled.js');
require('../tooltip/index.js');
require('../tooltip/tooltip.js');
require('lodash/isFunction');
require('../popup/props.js');
require('../popup/popup.js');
require('@popperjs/core');
require('../popup/container.js');
require('../tooltip/props.js');

const classPrefixMixins = components_configProvider_configReceiver.getClassPrefixMixins("slider");
var _Slider = utils_mixins["default"](classPrefixMixins).extend({
  name: "LSlider",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    ...components_slider_props.SliderProps
  },
  components: {
    LSliderMark: components_slider_mark["default"],
    LInputNumber: components_inputNumber_index.InputNumber,
    LSliderButton: components_slider_button["default"]
  },
  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.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.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);
      utils_event.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.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.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]);
  }
});

exports["default"] = _Slider;
//# sourceMappingURL=slider.js.map
