/**
 * tdesign v0.32.0
 * (c) 2021 tdesign
 * @license MIT
 */

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import Vue from 'vue';
import { emitEvent } from '../utils/event.js';
import props from './props.js';
import { prefix } from '../config.js';
import { InputNumber } from '../input-number/index.js';
import TSliderMark from './slider-mark.js';
import TSliderButton from './slider-button.js';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/camelCase';
import '../input-number/input-number.js';
import '../_chunks/dep-42d5c87e.js';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import 'tdesign-icons-vue';
import '../button/index.js';
import '../button/button.js';
import '../utils/classnames.js';
import '../loading/index.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../utils/set-style.js';
import '../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../utils/easing.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/typeof';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../utils/withInstall.js';
import 'lodash/capitalize';
import './style/index.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../button/props.js';
import '../utils/ripple.js';
import '../button/type.js';
import '../input-number/props.js';
import '../utils/map-props.js';
import '../input-number/type.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var name = "".concat(prefix, "-slider");
var _Slider = Vue.extend({
  name: "TSlider",
  model: {
    prop: "value",
    event: "change"
  },
  props: _objectSpread({}, props),
  components: {
    TSliderMark: TSliderMark,
    TInputNumber: InputNumber
  },
  provide: function provide() {
    return {
      slider: this
    };
  },
  data: function data() {
    return {
      firstValue: 0,
      secondValue: 0,
      prevValue: 0,
      dragging: false,
      sliderSize: 1,
      inputDecimalPlaces: 0,
      inputFormat: null,
      inputPlaceholder: "",
      inputTheme: "column",
      showSteps: false
    };
  },
  computed: {
    containerClass: function containerClass() {
      return ["".concat(name, "__container"), {
        "is-vertical": this.vertical
      }];
    },
    sliderClass: function sliderClass() {
      var _ref;

      return ["".concat(name), (_ref = {
        "is-vertical": this.vertical
      }, _defineProperty(_ref, "".concat(name, "--with-input"), this.inputNumberProps), _defineProperty(_ref, "".concat(name, "--vertical"), this.vertical), _defineProperty(_ref, "".concat(prefix, "-is-disabled"), this.disabled), _ref)];
    },
    sliderRailClass: function sliderRailClass() {
      return ["".concat(name, "__rail"), {
        "show-input": this.inputNumberProps,
        disabled: this.disabled
      }];
    },
    sliderNumberClass: function sliderNumberClass() {
      return ["".concat(name, "__input"), {
        "is-vertical": this.vertical
      }];
    },
    vertical: function vertical() {
      return this.layout === "vertical";
    },
    rangeDiff: function rangeDiff() {
      return this.max - this.min;
    },
    steps: function steps() {
      var _this = this;

      var min = this.min,
          max = this.max,
          rangeDiff = this.rangeDiff,
          step = this.step;
      if (!this.showSteps || min > max) return [];

      if (this.step === 0) {
        console.warn("[Element Warn][Slider]step should not be 0.");
        return [];
      }

      var stepCount = rangeDiff / step;
      var stepWidth = 100 * step / rangeDiff;
      var result = [];

      for (var i = 1; i < stepCount; i++) {
        result.push(i * stepWidth);
      }

      if (this.range) {
        return result.filter(function (step2) {
          return step2 < 100 * (_this.minValue - min) / rangeDiff || step2 > 100 * (_this.maxValue - min) / rangeDiff;
        });
      }

      return result.filter(function (step2) {
        return step2 > 100 * (_this.firstValue - min) / rangeDiff;
      });
    },
    markList: function markList() {
      var _this2 = this;

      if (!this.marks) {
        return [];
      }

      var legalMarks = [];
      Object.keys(this.marks).map(parseFloat).sort(function (a, b) {
        return a - b;
      }).filter(function (point) {
        return point <= _this2.max && point >= _this2.min;
      }).forEach(function (point) {
        var item = {
          point: point,
          position: (point - _this2.min) * 100 / _this2.rangeDiff,
          mark: _this2.marks[point]
        };
        legalMarks.push(item);
      });
      return legalMarks;
    },
    minValue: function minValue() {
      return Math.min(this.firstValue, this.secondValue);
    },
    maxValue: function maxValue() {
      return Math.max(this.firstValue, this.secondValue);
    },
    barSize: function barSize() {
      var cuttentDiff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
      return "".concat(100 * cuttentDiff / this.rangeDiff, "%");
    },
    barStart: function barStart() {
      return this.range ? "".concat(100 * (this.minValue - this.min) / this.rangeDiff, "%") : "0%";
    },
    precision: function precision() {
      var precisions = [this.min, this.max, this.step].map(function (item) {
        var decimalArr = "".concat(item).split(".");
        return decimalArr[1] ? decimalArr[1].length : 0;
      });
      return Math.max.apply(null, precisions);
    },
    runwayStyle: function runwayStyle() {
      return this.vertical ? {
        height: "100%"
      } : {};
    },
    barStyle: function barStyle() {
      return this.vertical ? {
        height: this.barSize,
        bottom: this.barStart
      } : {
        width: this.barSize,
        left: this.barStart
      };
    }
  },
  watch: {
    value: function value(newVal) {
      if (this.dragging === true) return;

      if (Array.isArray(newVal) && this.range) {
        var _newVal = _slicedToArray(newVal, 2);

        this.firstValue = _newVal[0];
        this.secondValue = _newVal[1];
      } else {
        this.prevValue = newVal;
      }
    },
    firstValue: function firstValue(val) {
      if (this.range) {
        this.emitChange([this.minValue, this.maxValue]);
      } else {
        this.emitChange(val);
      }
    },
    secondValue: function secondValue() {
      if (this.range) {
        this.emitChange([this.minValue, this.maxValue]);
      }
    },
    prevValue: function prevValue(val) {
      this.emitChange(val);
    },
    dragging: function dragging(newVal) {
      if (newVal === false) {
        this.init();
      }
    }
  },
  mounted: function mounted() {
    this.init();
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener("resize", this.resetSize);
  },
  methods: {
    init: function init() {
      var valuetext;
      var min = this.min,
          max = this.max,
          value = this.value;

      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 = "".concat(this.firstValue, "-").concat(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: function valueChanged() {
      var _this3 = this;

      if (this.range) {
        return ![this.minValue, this.maxValue].every(function (item, index) {
          return item === _this3.prevValue[index];
        });
      }

      return this.value !== this.prevValue;
    },
    setValues: function setValues(value) {
      var _ref2 = [this.min, this.max],
          min = _ref2[0],
          max = _ref2[1];

      if (min > max) {
        console.warn("[Slider] max should be greater than min.");
        return;
      }

      if (this.range && Array.isArray(value)) {
        var _ref3 = [Math.min.apply(Math, _toConsumableArray(value)), Math.max.apply(Math, _toConsumableArray(value))],
            firstValue = _ref3[0],
            secondValue = _ref3[1];
        if (firstValue > max) firstValue = this.firstValue;
        if (firstValue < min) firstValue = min;
        if (secondValue < min) secondValue = this.secondValue;
        if (secondValue > max) secondValue = max;
        var _ref4 = [firstValue, secondValue];
        this.firstValue = _ref4[0];
        this.secondValue = _ref4[1];
        return [firstValue, secondValue];
      }

      var prevValue = value;
      if (prevValue < min) prevValue = min;
      if (prevValue > max) prevValue = max;
      this.prevValue = prevValue;
      return prevValue;
    },
    setInputProps: function setInputProps() {
      if (this.inputNumberProps instanceof Object) {
        var _this$inputNumberProp = this.inputNumberProps,
            inputDecimalPlaces = _this$inputNumberProp.decimalPlaces,
            inputFormat = _this$inputNumberProp.format,
            inputPlaceholder = _this$inputNumberProp.placeholder,
            inputTheme = _this$inputNumberProp.theme;

        if (typeof inputDecimalPlaces === "number" && !isNaN(inputDecimalPlaces)) {
          this.inputDecimalPlaces = inputDecimalPlaces;
        }

        if (inputPlaceholder) {
          this.inputPlaceholder = inputPlaceholder;
        }

        if (typeof inputFormat === "function") {
          this.inputFormat = inputFormat;
        }

        if (["column", "row", "normal"].includes(inputTheme)) {
          this.inputTheme = inputTheme;
        }
      }
    },
    setPosition: function setPosition(percent) {
      var targetValue = percent * this.rangeDiff / 100;
      targetValue = this.min + targetValue;

      if (!this.range) {
        this.$refs.button1.setPosition(percent);
        return;
      }

      var 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: function onSliderClick(event) {
      if (this.disabled || this.dragging) {
        return;
      }

      this.resetSize();
      var value = 0;

      if (this.vertical) {
        var sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
        value = (sliderOffsetBottom - event.clientY) / this.sliderSize * 100;
        this.setPosition(value);
      } else {
        var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
        value = (event.clientX - sliderOffsetLeft) / this.sliderSize * 100;
        this.setPosition(value);
      }
    },
    resetSize: function resetSize() {
      if (this.$refs.slider) {
        this.sliderSize = this.$refs.slider["client".concat(this.vertical ? "Height" : "Width")];
      }
    },
    emitChange: function emitChange(value) {
      var changeValue = value;

      if (changeValue === void 0) {
        if (this.range) {
          changeValue = [this.firstValue, this.secondValue];
        } else {
          changeValue = this.prevValue;
        }
      }

      var fixValue = this.setValues(changeValue);
      emitEvent(this, "change", fixValue);
    },
    getStopStyle: function getStopStyle(position) {
      return this.vertical ? {
        top: "calc(".concat(100 - position, "% - 1px)")
      } : {
        left: "".concat(position, "%")
      };
    },
    changeValue: function changeValue(point) {
      if (this.disabled || this.dragging) {
        return;
      }

      this.resetSize();
      var value = Number(point / this.rangeDiff * 100);
      this.setPosition(value);
      this.emitChange(point);
    },
    renderMask: function renderMask() {
      var _this4 = this;

      var h = this.$createElement;

      if (this.markList.length) {
        return h("div", [h("div", [this.markList.map(function (item, index) {
          return h("div", {
            "class": "".concat(name, "__stop ").concat(name, "__mark-stop"),
            "style": _this4.getStopStyle(item.position),
            "key": index
          });
        })]), h("div", {
          "class": "".concat(name, "__mark")
        }, [this.markList.map(function (item, key) {
          return h("t-slider-mark", {
            "attrs": {
              "mark": item.mark,
              "point": item.point
            },
            "key": key,
            "style": _this4.getStopStyle(item.position),
            "on": {
              "change-value": _this4.changeValue
            }
          });
        })])]);
      }
    },
    renderInputButton: function renderInputButton() {
      var _this5 = this;

      var h = this.$createElement;
      var max = this.max,
          min = this.min,
          sliderNumberClass = this.sliderNumberClass,
          range = this.range;
      return h("div", {
        "class": ["".concat(name, "__input-container"), {
          "is-vertical": this.vertical
        }]
      }, [h("t-input-number", {
        "class": sliderNumberClass,
        "attrs": {
          "value": range ? this.firstValue : this.prevValue,
          "step": this.step,
          "disabled": this.disabled,
          "min": min,
          "max": max,
          "decimalPlaces": this.inputDecimalPlaces,
          "format": this.inputFormat,
          "placeholder": this.inputPlaceholder,
          "theme": this.inputTheme
        },
        "ref": "input",
        "on": {
          "change": function change(v) {
            _this5.range ? _this5.firstValue = v : _this5.prevValue = v;
          }
        }
      }), range && h("div", {
        "class": "".concat(name, "__center-line")
      }), range && h("t-input-number", {
        "class": this.sliderNumberClass,
        "ref": "input",
        "attrs": {
          "step": this.step,
          "disabled": this.disabled,
          "min": min,
          "max": max,
          "decimalPlaces": this.inputDecimalPlaces,
          "format": this.inputFormat,
          "placeholder": this.inputPlaceholder,
          "theme": this.inputTheme
        },
        "model": {
          value: _this5.secondValue,
          callback: function callback($$v) {
            _this5.secondValue = $$v;
          }
        }
      })]);
    }
  },
  render: function render() {
    var _this6 = this;

    var h = arguments[0];
    var min = this.min,
        max = this.max,
        layout = this.layout,
        disabled = this.disabled,
        vertical = this.vertical,
        range = this.range;
    var buttonGroup = this.inputNumberProps && this.renderInputButton();
    var 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": "".concat(name, "__track"),
      "style": this.barStyle
    }), h(TSliderButton, {
      "attrs": {
        "vertical": vertical,
        "value": range ? this.firstValue : this.prevValue,
        "disabled": this.disabled,
        "tooltip-props": this.tooltipProps
      },
      "ref": "button1",
      "on": {
        "input": function input(v) {
          _this6.range ? _this6.firstValue = v : _this6.prevValue = v;
        }
      }
    }), this.range && h(TSliderButton, {
      "attrs": {
        "vertical": vertical,
        "disabled": this.disabled,
        "tooltip-props": this.tooltipProps
      },
      "ref": "button2",
      "model": {
        value: _this6.secondValue,
        callback: function callback($$v) {
          _this6.secondValue = $$v;
        }
      }
    }), this.showSteps && h("div", [this.steps.map(function (item, key) {
      return h("div", {
        "class": "".concat(name, "__stop"),
        "key": key,
        "style": _this6.getStopStyle(item)
      });
    })]), masks])]), buttonGroup]);
  }
});

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