import { createVNode, defineComponent, computed, reactive, ref, watch, onUnmounted } from 'vue';
import '../../../utils/index.mjs';
import { singleNumberProps } from './props.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

function UnitNumber({
  prefixCls,
  value,
  current,
  offset = 0
}) {
  let style;
  if (offset) {
    style = {
      position: "absolute",
      top: `${offset}00%`,
      left: 0
    };
  }
  return createVNode("p", {
    "style": style,
    "class": classNames(`${prefixCls}-only-unit`, {
      current
    })
  }, [value]);
}
function getOffset(start, end, unit) {
  let index = start;
  let offset = 0;
  while ((index + 10) % 10 !== end) {
    index += unit;
    offset += unit;
  }
  return offset;
}
var SingleNumber = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "SingleNumber",
  props: singleNumberProps(),
  setup(props) {
    const originValue = computed(() => Number(props.value));
    const originCount = computed(() => Math.abs(props.count));
    const state = reactive({
      prevValue: originValue.value,
      prevCount: originCount.value
    });
    const onTransitionEnd = () => {
      state.prevValue = originValue.value;
      state.prevCount = originCount.value;
    };
    const timeout = ref();
    watch(originValue, () => {
      clearTimeout(timeout.value);
      timeout.value = setTimeout(() => {
        onTransitionEnd();
      }, 1e3);
    }, {
      flush: "post"
    });
    onUnmounted(() => {
      clearTimeout(timeout.value);
    });
    return () => {
      let unitNodes;
      let offsetStyle = {};
      const value = originValue.value;
      if (state.prevValue === value || Number.isNaN(value) || Number.isNaN(state.prevValue)) {
        unitNodes = [UnitNumber({
          ...props,
          current: true
        })];
        offsetStyle = {
          transition: "none"
        };
      } else {
        unitNodes = [];
        const end = value + 10;
        const unitNumberList = [];
        for (let index = value; index <= end; index += 1)
          unitNumberList.push(index);
        const prevIndex = unitNumberList.findIndex((n) => n % 10 === state.prevValue);
        unitNodes = unitNumberList.map((n, index) => {
          const singleUnit = n % 10;
          return UnitNumber({
            ...props,
            value: singleUnit,
            offset: index - prevIndex,
            current: index === prevIndex
          });
        });
        const unit = state.prevCount < originCount.value ? 1 : -1;
        offsetStyle = {
          transform: `translateY(${-getOffset(state.prevValue, value, unit)}00%)`
        };
      }
      return createVNode("span", {
        "class": `${props.prefixCls}-only`,
        "style": offsetStyle,
        "onTransitionend": () => onTransitionEnd()
      }, [unitNodes]);
    };
  }
});

export { SingleNumber as default };
//# sourceMappingURL=SingleNumber.mjs.map
