/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import { defineComponent, getCurrentInstance, inject, toRefs, computed } from '@vue/composition-api';
import { Loading } from '../loading/index.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import getRenderAlign from './utils.js';
import { TimeLineItemProps } from './props.js';
import '../../utils/withInstall.js';
import 'vue';
import 'lodash/capitalize';
import '../../config.js';
import '../loading/loading.js';
import '../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../chunks/index.js';
import '../../chunks/log.js';
import '../../chunks/_commonjsHelpers-fe796db6.js';
import '../../utils/easing.js';
import '../../utils/render-node.js';
import 'lodash';
import '../../utils/transfer-dom.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/mixins.js';
import '../loading/props.js';
import '../loading/icon/gradient.js';
import '../../chunks/defineProperty-19da3d4c.js';
import '../../chunks/set-style.js';
import '../../chunks/helper2.js';
import '../loading/style/css.js';
import '../loading/type.js';
import '../loading/plugin.js';
import '../config-provider/useConfig.js';

const DefaultTheme = ["primary", "warning", "error", "default"];
var _TimelineItem = defineComponent({
  name: "LTimelineItem",
  components: {
    TLoading: Loading
  },
  props: {
    ...TimeLineItemProps
  },
  setup(props) {
    const instance = getCurrentInstance();
    const classPrefix = usePrefixClass();
    const timelineProvider = inject("TTimeline");
    const {
      layout,
      reverse,
      theme,
      labelAlign,
      mode,
      uidArr
    } = timelineProvider;
    const {
      dotColor,
      labelAlign: itemLabelAlign,
      loading
    } = toRefs(props);
    const renderAlign = computed(() => {
      const result = getRenderAlign(labelAlign?.value, layout?.value);
      return result;
    });
    const currentIndex = computed(() => {
      let index = 0;
      uidArr.value.forEach((item, itemIndex) => {
        if (item === instance.uid) index = itemIndex;
      });
      return index;
    });
    const getPositionClassName = computed(() => {
      const left = layout?.value === "horizontal" ? "top" : "left";
      const right = layout?.value === "horizontal" ? "bottom" : "right";
      if (renderAlign.value === "alternate") {
        return itemLabelAlign?.value || currentIndex.value % 2 === 0 ? `${classPrefix.value}-timeline-item-${left}` : `${classPrefix.value}-timeline-item-${right}`;
      }
      if (renderAlign.value === "left" || renderAlign.value === "top") return `${classPrefix.value}-timeline-item-${left}`;
      if (renderAlign.value === "right" || renderAlign.value === "bottom") return `${classPrefix.value}-timeline-item-${right}`;
      return "";
    });
    const getItemClassName = computed(() => {
      const isLastChildren = uidArr.value.length - 1 === currentIndex.value;
      const lastClassName = isLastChildren ? `${classPrefix.value}-timeline-item--last` : "";
      return `${classPrefix.value}-timeline-item ${getPositionClassName.value} ${lastClassName}`;
    });
    const tailClassName = computed(() => {
      const statusClassName = reverse ? `${classPrefix.value}-timeline-item__tail--status-${dotColor?.value}` : "";
      return `${classPrefix.value}-timeline-item__tail ${classPrefix.value}-timeline-item__tail--theme-${theme?.value} ${statusClassName}`;
    });
    const dotElement = instance.slots.dot;
    const dotClassName = computed(() => {
      const dotCustomClassName = !!dotElement || !dotElement && loading?.value ? `${classPrefix.value}-timeline-item__dot--custom` : "";
      const docColorClassName = DefaultTheme.includes(dotColor?.value) ? `${classPrefix.value}-timeline-item__dot--${dotColor?.value}` : "";
      return `${classPrefix.value}-timeline-item__dot ${dotCustomClassName} ${docColorClassName}`;
    });
    const labelClassName = computed(() => `${classPrefix.value}-timeline-item__label ${classPrefix.value}-timeline-item__label--${mode?.value}`);
    return {
      mode,
      currentIndex,
      tailClassName,
      dotClassName,
      labelClassName,
      getItemClassName,
      classPrefix
    };
  },
  render() {
    const h = arguments[0];
    const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default(null) : [null];
    const dotSlot = this.$scopedSlots.dot ? this.$scopedSlots.dot(null) : null;
    const {
      dotColor,
      dotClassName,
      style = {},
      labelClassName,
      label,
      mode,
      loading,
      tailClassName,
      content,
      getItemClassName,
      classPrefix
    } = this;
    return h("li", {
      "class": getItemClassName,
      "style": style
    }, [mode === "alternate" && label && h("div", {
      "class": labelClassName
    }, [label]), h("div", {
      "class": `${classPrefix}-timeline-item__wrapper`
    }, [h("div", {
      "class": dotClassName,
      "style": {
        borderColor: !DefaultTheme.includes(dotColor) && dotColor
      }
    }, [h("div", {
      "class": `${classPrefix}-timeline-item__dot-content`
    }, [!dotSlot && loading && h(Loading, {
      "attrs": {
        "size": "12px"
      }
    }), dotSlot])]), h("div", {
      "class": tailClassName
    })]), h("div", {
      "class": `${classPrefix}-timeline-item__content`
    }, [content || defaultSlot, mode === "same" && label && h("div", {
      "class": labelClassName
    }, [label])])]);
  }
});

export { _TimelineItem as default };
//# sourceMappingURL=timeline-item.js.map
