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

'use strict';

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

var VueCompositionAPI = require('@vue/composition-api');
var components_loading_index = require('../loading/index.js');
var hooks_useConfig = require('../../hooks/useConfig.js');
var components_timeline_utils = require('./utils.js');
var components_timeline_props = require('./props.js');
require('../../utils/withInstall.js');
require('vue');
require('lodash/capitalize');
require('../../config.js');
require('../loading/loading.js');
require('../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-fe796db6.js');
require('../../utils/easing.js');
require('../../utils/render-node.js');
require('lodash');
require('../../utils/transfer-dom.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('lodash/merge');
require('../../chunks/zh_CN.js');
require('../../utils/mixins.js');
require('../loading/props.js');
require('../loading/icon/gradient.js');
require('../../chunks/defineProperty-19da3d4c.js');
require('../../chunks/set-style.js');
require('../../chunks/helper2.js');
require('../loading/plugin.js');
require('../config-provider/useConfig.js');

const DefaultTheme = ["primary", "warning", "error", "default"];
var _TimelineItem = VueCompositionAPI.defineComponent({
  name: "LTimelineItem",
  components: {
    TLoading: components_loading_index.Loading
  },
  props: {
    ...components_timeline_props.TimeLineItemProps
  },
  setup(props) {
    const instance = VueCompositionAPI.getCurrentInstance();
    const classPrefix = hooks_useConfig.usePrefixClass();
    const timelineProvider = VueCompositionAPI.inject("TTimeline");
    const {
      layout,
      reverse,
      theme,
      labelAlign,
      mode,
      uidArr
    } = timelineProvider;
    const {
      dotColor,
      labelAlign: itemLabelAlign,
      loading
    } = VueCompositionAPI.toRefs(props);
    const renderAlign = VueCompositionAPI.computed(() => {
      const result = components_timeline_utils["default"](labelAlign?.value, layout?.value);
      return result;
    });
    const currentIndex = VueCompositionAPI.computed(() => {
      let index = 0;
      uidArr.value.forEach((item, itemIndex) => {
        if (item === instance.uid) index = itemIndex;
      });
      return index;
    });
    const getPositionClassName = VueCompositionAPI.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 = VueCompositionAPI.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 = VueCompositionAPI.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 = VueCompositionAPI.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 = VueCompositionAPI.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(components_loading_index.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])])]);
  }
});

exports["default"] = _TimelineItem;
//# sourceMappingURL=timeline-item.js.map
