'use strict';

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

var vue = require('vue');
require('../../../../utils/index.js');
require('../config/index.js');
var draggable = require('../config/draggable.js');
var createNamespace = require('../../../../utils/create-namespace.js');
var alphaSlider = require('../config/alpha-slider.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "AlphaSlider" },
  __name: "alpha-slider",
  props: alphaSlider.alphaSliderProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace.createNamespace("alpha-slider");
    const instance = vue.getCurrentInstance();
    const bar = vue.shallowRef(null);
    const thumb = vue.shallowRef(null);
    const thumbLeft = vue.ref(0);
    const thumbTop = vue.ref(0);
    const background = vue.ref("");
    const handleClick = (event) => {
      const target = event.target;
      if (target !== thumb.value) {
        handleDrag(event);
      }
    };
    const handleDrag = (event) => {
      const ele = instance?.vnode.el;
      const rect = ele.getBoundingClientRect();
      if (!props.vertical) {
        let left = event.clientX - rect.left;
        left = Math.max(thumb.value.offsetWidth / 2, left);
        left = Math.min(
          left,
          rect.width - thumb.value.offsetWidth / 2
        );
        props.color?.set(
          "alpha",
          Math.round(
            (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100
          )
        );
      } else {
        let top = event.clientY - rect.top;
        top = Math.max(thumb.value.offsetHeight / 2, top);
        top = Math.min(
          top,
          rect.height - thumb.value.offsetHeight / 2
        );
        props.color?.set(
          "alpha",
          Math.round(
            (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100
          )
        );
      }
    };
    const update = () => {
      thumbLeft.value = getThumbLeft();
      thumbTop.value = getThumbTop();
      background.value = getBackground();
    };
    const getThumbLeft = () => {
      if (props.vertical) return 0;
      const ele = instance?.vnode.el;
      const alpha = props.color?.get("alpha");
      if (!ele) return 0;
      return Math.round(
        alpha * (ele.offsetWidth - thumb.value.offsetWidth / 2) / 100
      );
    };
    const getThumbTop = () => {
      const ele = instance?.vnode.el;
      if (!props.vertical) return 0;
      const alpha = props.color?.get("alpha");
      if (!ele) return 0;
      return Math.round(
        alpha * (ele.offsetHeight - thumb.value.offsetHeight / 2) / 100
      );
    };
    const getBackground = () => {
      if (props.color && props.color.value) {
        const { r, g, b } = props.color.toRgb();
        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
      }
      return "";
    };
    vue.watch(
      () => props.color?.get("alpha"),
      () => {
        update();
      }
    );
    vue.watch(
      () => props.color?.value,
      () => {
        update();
      }
    );
    vue.onMounted(() => {
      const dragConfig = {
        drag: (event) => {
          handleDrag(event);
        },
        end: (event) => {
          handleDrag(event);
        }
      };
      draggable.default(bar.value, dragConfig);
      draggable.default(thumb.value, dragConfig);
      update();
    });
    __expose({
      update
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass({ [vue.unref(bem).is("vertical")]: _ctx.vertical, [vue.unref(bem).b()]: true })
        },
        [
          vue.createElementVNode(
            "div",
            {
              ref_key: "bar",
              ref: bar,
              class: vue.normalizeClass(vue.unref(bem).m("bar")),
              style: vue.normalizeStyle({ background: background.value }),
              onClick: handleClick
            },
            null,
            6
            /* CLASS, STYLE */
          ),
          vue.createElementVNode(
            "div",
            {
              ref_key: "thumb",
              ref: thumb,
              class: vue.normalizeClass(vue.unref(bem).m("thumb")),
              style: vue.normalizeStyle({ left: thumbLeft.value + "px", top: thumbTop.value + "px" })
            },
            null,
            6
            /* CLASS, STYLE */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=alpha-slider.vue2.js.map
