"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const types = require("../../../utils/types.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$1 = require("../../icon/index.js");
const tokens = require("./tokens.js");
const item = require("./item.js");
const index$2 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
var item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElStep",
  __name: "item",
  props: item.stepProps,
  setup(__props) {
    const props = __props;
    const ns = index.useNamespace("step");
    const index$3 = Vue.ref(-1);
    const lineStyle = Vue.ref({});
    const internalStatus = Vue.ref("");
    const parent = Vue.inject(tokens.STEPS_INJECTION_KEY);
    const currentInstance = Vue.getCurrentInstance();
    let stepDiff = 0;
    let beforeActive = 0;
    Vue.onMounted(() => {
      Vue.watch([
        () => parent.props.active,
        () => parent.props.processStatus,
        () => parent.props.finishStatus
      ], ([active], [oldActive]) => {
        beforeActive = oldActive || 0;
        stepDiff = active - beforeActive;
        updateStatus(active);
      }, { immediate: true });
    });
    const currentStatus = Vue.computed(() => {
      return props.status || internalStatus.value;
    });
    const prevInternalStatus = Vue.computed(() => {
      const prevStep = parent.steps.value[index$3.value - 1];
      return prevStep ? prevStep.internalStatus.value : "wait";
    });
    const isCenter = Vue.computed(() => {
      return parent.props.alignCenter;
    });
    const isVertical = Vue.computed(() => {
      return parent.props.direction === "vertical";
    });
    const isSimple = Vue.computed(() => {
      return parent.props.simple;
    });
    const stepsCount = Vue.computed(() => {
      return parent.steps.value.length;
    });
    const isLast = Vue.computed(() => {
      var _a;
      return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === currentInstance.uid;
    });
    const space = Vue.computed(() => {
      return isSimple.value ? "" : parent.props.space;
    });
    const containerKls = Vue.computed(() => {
      return [
        ns.b(),
        ns.is(isSimple.value ? "simple" : parent.props.direction),
        ns.is("flex", isLast.value && !space.value && !isCenter.value),
        ns.is("center", isCenter.value && !isVertical.value && !isSimple.value)
      ];
    });
    const style = Vue.computed(() => {
      const style2 = { flexBasis: types.isNumber(space.value) ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%` };
      if (isVertical.value) return style2;
      if (isLast.value) style2.maxWidth = `${100 / stepsCount.value}%`;
      return style2;
    });
    const setIndex = (val) => {
      index$3.value = val;
    };
    const calcProgress = (status) => {
      const isWait = status === "wait";
      const style2 = { transitionDelay: `${Math.abs(stepDiff) === 1 ? 0 : stepDiff > 0 ? (index$3.value + 1 - beforeActive) * 150 : -(index$3.value + 1 - parent.props.active) * 150}ms` };
      const step = status === parent.props.processStatus || isWait ? 0 : 100;
      style2.borderWidth = step && !isSimple.value ? "1px" : 0;
      style2[parent.props.direction === "vertical" ? "height" : "width"] = `${step}%`;
      lineStyle.value = style2;
    };
    const updateStatus = (activeIndex) => {
      if (activeIndex > index$3.value) internalStatus.value = parent.props.finishStatus;
      else if (activeIndex === index$3.value && prevInternalStatus.value !== "error") internalStatus.value = parent.props.processStatus;
      else internalStatus.value = "wait";
      const prevChild = parent.steps.value[index$3.value - 1];
      if (prevChild) prevChild.calcProgress(internalStatus.value);
    };
    const stepItemState = {
      uid: currentInstance.uid,
      getVnode: () => currentInstance.vnode,
      currentStatus,
      internalStatus,
      setIndex,
      calcProgress
    };
    parent.addStep(stepItemState);
    Vue.onBeforeUnmount(() => {
      parent.removeStep(stepItemState);
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        style: Vue.normalizeStyle(style.value),
        class: Vue.normalizeClass(containerKls.value)
      }, [
        Vue.createCommentVNode(" icon & line "),
        Vue.createElementVNode("div", { class: Vue.normalizeClass([Vue.unref(ns).e("head"), Vue.unref(ns).is(currentStatus.value)]) }, [!isSimple.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).e("line"))
        }, [Vue.createElementVNode("i", {
          class: Vue.normalizeClass(Vue.unref(ns).e("line-inner")),
          style: Vue.normalizeStyle(lineStyle.value)
        }, null, 6)], 2)) : Vue.createCommentVNode("v-if", true), Vue.createElementVNode("div", { class: Vue.normalizeClass([Vue.unref(ns).e("icon"), Vue.unref(ns).is(__props.icon || _ctx.$slots.icon ? "icon" : "text")]) }, [Vue.renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.ElIcon), {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).e("icon-inner"))
        }, {
          default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(__props.icon)))]),
          _: 1
        }, 8, ["class"])) : currentStatus.value === "success" ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.ElIcon), {
          key: 1,
          class: Vue.normalizeClass([Vue.unref(ns).e("icon-inner"), Vue.unref(ns).is("status")])
        }, {
          default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$2.Check))]),
          _: 1
        }, 8, ["class"])) : currentStatus.value === "error" ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.ElIcon), {
          key: 2,
          class: Vue.normalizeClass([Vue.unref(ns).e("icon-inner"), Vue.unref(ns).is("status")])
        }, {
          default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$2.Close))]),
          _: 1
        }, 8, ["class"])) : !isSimple.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 3,
          class: Vue.normalizeClass(Vue.unref(ns).e("icon-inner"))
        }, Vue.toDisplayString(index$3.value + 1), 3)) : Vue.createCommentVNode("v-if", true)])], 2)], 2),
        Vue.createCommentVNode(" title & description "),
        Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("main")) }, [Vue.createElementVNode("div", { class: Vue.normalizeClass([Vue.unref(ns).e("title"), Vue.unref(ns).is(currentStatus.value)]) }, [Vue.renderSlot(_ctx.$slots, "title", {}, () => [Vue.createTextVNode(Vue.toDisplayString(__props.title), 1)])], 2), isSimple.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).e("arrow"))
        }, null, 2)) : (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 1,
          class: Vue.normalizeClass([Vue.unref(ns).e("description"), Vue.unref(ns).is(currentStatus.value)])
        }, [Vue.renderSlot(_ctx.$slots, "description", {}, () => [Vue.createTextVNode(Vue.toDisplayString(__props.description), 1)])], 2))], 2)
      ], 6);
    };
  }
});
exports.default = item_vue_vue_type_script_setup_true_lang_default;
