/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import isFunction from 'lodash/isFunction';
import { CheckIcon, CloseIcon } from '@ldesign/icons-vue';
import mixins from '../../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins } from '../config-provider/config-receiver.js';
import { renderLNodeJSX, renderContent } from '../../utils/render-node.js';
import { StepsItemProps } from './props.js';
import 'vue';
import 'lodash/mergeWith';
import 'lodash';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';

var _StepItem = mixins(getConfigReceiverMixins("steps"), getGlobalIconMixins()).extend({
  name: "LStepItem",
  props: {
    ...StepsItemProps,
    index: Number
  },
  inject: {
    steps: {
      default: void 0
    }
  },
  computed: {
    current() {
      return this.steps && this.steps.current;
    },
    baseClass() {
      return [`${this.componentName}-item`, {
        [`${this.componentName}-item--${this.status}`]: this.status
      }];
    },
    iconClass() {
      return [`${this.componentName}-item__icon`, {
        [`${this.componentName}-item--${this.status}`]: this.status
      }];
    },
    canClick() {
      var _this$steps;
      return this.status !== "process" && !((_this$steps = this.steps) !== null && _this$steps !== void 0 && _this$steps.readonly);
    }
  },
  methods: {
    renderIcon() {
      const h = this.$createElement;
      let defaultIcon;
      if (this.steps.theme === "default") {
        let icon = "";
        const {
          CheckIcon: CheckIcon$1,
          CloseIcon: CloseIcon$1
        } = this.useGlobalIcon({
          CheckIcon: CheckIcon,
          CloseIcon: CloseIcon
        });
        switch (this.status) {
          case "finish":
            icon = h(CheckIcon$1);
            break;
          case "error":
            if (isFunction(this.global.errorIcon)) icon = this.global.errorIcon(this.$createElement);else icon = h(CloseIcon$1);
            break;
          default:
            icon = String(this.index + 1);
            break;
        }
        defaultIcon = h("span", {
          "class": `${this.componentName}-item__icon--number`
        }, [icon]);
      }
      return renderLNodeJSX(this, "icon", defaultIcon);
    },
    onStepClick(e) {
      if (!this.canClick) return;
      const val = this.value === void 0 ? this.index : this.value;
      this.steps.handleChange(val, this.current, e);
    }
  },
  render() {
    const h = arguments[0];
    const content = renderContent(this, "default", "content");
    return h("div", {
      "class": this.baseClass
    }, [h("div", {
      "class": `${this.componentName}-item__inner ${this.canClick ? `${this.componentName}-item--clickable` : ""}`,
      "on": {
        "click": this.onStepClick
      }
    }, [h("div", {
      "class": this.iconClass
    }, [this.renderIcon()]), h("div", {
      "class": `${this.componentName}-item__content`
    }, [h("div", {
      "class": `${this.componentName}-item__title`
    }, [renderLNodeJSX(this, "title")]), h("div", {
      "class": `${this.componentName}-item__description`
    }, [content]), h("div", {
      "class": `${this.componentName}-item__extra`
    }, [renderLNodeJSX(this, "extra")])])])]);
  }
});

export { _StepItem as default };
//# sourceMappingURL=step-item.js.map
