import { defineComponent, openBlock, createElementBlock, normalizeStyle, createBlock, unref, computed, toDisplayString, Fragment, renderList, createElementVNode, createVNode, normalizeClass } from "vue";
import WlSvg from "@wltech/svg";
var index_vue_vue_type_style_index_0_lang$2 = "";
const _hoisted_1$2 = { class: "step-line-container" };
const __default__$3 = {
  name: "SetpLine"
};
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  ...__default__$3,
  props: {
    isComplete: { type: Boolean, default: false },
    themeColor: { default: "var(--wl-primary-color)" },
    show: { type: Boolean, default: true }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$2, [
        __props.isComplete ? (openBlock(), createElementBlock("div", {
          key: 0,
          style: normalizeStyle(`border-color: ${__props.show ? __props.themeColor : "transparent"}`),
          class: "step-line step-line-complete"
        }, null, 4)) : (openBlock(), createElementBlock("div", {
          key: 1,
          style: normalizeStyle(`border-color: ${__props.show ? "#eeeeee" : "transparent"}`),
          class: "step-line"
        }, null, 4))
      ]);
    };
  }
});
const __default__$2 = {
  name: "WlSvgIcon"
};
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$2,
  props: {
    type: { default: "" },
    color: { default: "var(--wl-text-color-title-1)" },
    width: { default: "16" },
    height: { default: "16" }
  },
  setup(__props) {
    const sub = location.origin;
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(WlSvg), {
        type: __props.type,
        width: __props.width,
        height: __props.height,
        color: __props.color,
        sub: unref(sub)
      }, null, 8, ["type", "width", "height", "color", "sub"]);
    };
  }
});
var index_vue_vue_type_style_index_0_lang$1 = "";
const _hoisted_1$1 = { key: 1 };
const __default__$1 = {
  name: "SetpPoint"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: {
    isComplete: { type: Boolean, default: false },
    isSelect: { type: Boolean, default: true },
    text: { default: "" },
    themeColor: { default: "var(--wl-primary-color)" }
  },
  setup(__props) {
    const props = __props;
    const styleObject = computed(() => {
      if (props.isComplete) {
        return {
          border: "2px solid",
          "border-color": props.themeColor
        };
      } else if (props.isSelect) {
        return {
          "background-color": props.themeColor
        };
      } else {
        return {
          "background-color": "#EEEEEE",
          color: "var(--wl-text-color-placeholder)"
        };
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        style: normalizeStyle(unref(styleObject)),
        class: "step-point"
      }, [
        __props.isComplete ? (openBlock(), createBlock(_sfc_main$2, {
          key: 0,
          type: "check",
          width: "18",
          height: "18",
          color: __props.themeColor
        }, null, 8, ["color"])) : (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(__props.text), 1))
      ], 4);
    };
  }
});
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
  class: "steps-container",
  "data-weiling-mobile-ui-wl-steps": ""
};
const _hoisted_2 = { class: "step" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "step-text" };
const __default__ = {
  name: "WlSteps"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    list: { default: () => [] },
    themeColor: { default: "var(--wl-primary-color)" },
    stepTextKey: { default: "" },
    valueKey: { default: "text" },
    onSelectIndex: { default: 1 }
  },
  emits: ["onClick"],
  setup(__props, { emit }) {
    const props = __props;
    const textContainer = computed(() => {
      return (index) => {
        return index === 0 ? "steps-text-first-container" : index === props.list.length - 1 ? "steps-text-last-container" : "";
      };
    });
    const onClick = (item) => {
      emit("onClick", item.id);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item, index) => {
          return openBlock(), createElementBlock("div", {
            key: index,
            class: "step-item"
          }, [
            createElementVNode("div", _hoisted_2, [
              createVNode(_sfc_main$3, {
                show: index !== 0,
                themeColor: __props.themeColor,
                isComplete: __props.onSelectIndex > index
              }, null, 8, ["show", "themeColor", "isComplete"]),
              createVNode(_sfc_main$1, {
                isComplete: __props.onSelectIndex > index + 1,
                isSelect: __props.onSelectIndex === index + 1,
                text: !__props.stepTextKey ? index + 1 : item[__props.stepTextKey],
                themeColor: __props.themeColor,
                onClick: ($event) => onClick(item)
              }, null, 8, ["isComplete", "isSelect", "text", "themeColor", "onClick"]),
              createVNode(_sfc_main$3, {
                show: index !== __props.list.length - 1,
                themeColor: __props.themeColor,
                isComplete: __props.onSelectIndex > index + 1
              }, null, 8, ["show", "themeColor", "isComplete"])
            ]),
            createElementVNode("div", {
              onClick: ($event) => onClick(item),
              class: normalizeClass(["steps-text-container", unref(textContainer)(index)]),
              style: normalizeStyle(`color: ${__props.onSelectIndex > index ? __props.themeColor : "var(--wl-text-color-placeholder)"}`)
            }, [
              createElementVNode("span", _hoisted_4, toDisplayString(item[__props.valueKey]), 1)
            ], 14, _hoisted_3)
          ]);
        }), 128))
      ]);
    };
  }
});
var __uno = "";
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };
