<template>
  <div class="steps-container" data-weiling-mobile-ui-wl-steps>
    <div v-for="(item, index) in list" :key="index" class="step-item">
      <div class="step">
        <SetpLine
          :show="index !== 0"
          :themeColor="themeColor"
          :isComplete="onSelectIndex > index"
        />
        <SetpPoint
          :isComplete="onSelectIndex > index + 1"
          :isSelect="onSelectIndex === index + 1"
          :text="!stepTextKey ? index + 1 : item[stepTextKey]"
          :themeColor="themeColor"
          @click="onClick(item)"
        />
        <SetpLine
          :show="index !== list.length - 1"
          :themeColor="themeColor"
          :isComplete="onSelectIndex > index + 1"
        />
      </div>

      <div
        @click="onClick(item)"
        class="steps-text-container"
        :class="textContainer(index)"
        :style="`color: ${onSelectIndex > index ? themeColor : 'var(--wl-text-color-placeholder)'}`"
      >
        <span class="step-text">
          {{ item[valueKey] }}
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WlSteps",
};
</script>

<script lang="ts" setup>
import SetpLine from "./component/SetpLine/index.vue";
import SetpPoint from "./component/SetpPoint/index.vue";
import { computed } from "vue";

const emit = defineEmits(["onClick"]);
type TList = {
  id: string;
  key: string;
  text: string;
  text2: string;
};
interface Props {
  list: Array<TList>;
  themeColor?: string;
  stepTextKey?: string;
  valueKey?: string;
  onSelectIndex: number;
}

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  valueKey: "text",
  themeColor: "var(--wl-primary-color)",
  onSelectIndex: 1,
  stepTextKey: "",
});
const textContainer = computed(() => {
  return (index: number) => {
    return index === 0
      ? "steps-text-first-container"
      : index === props.list.length - 1
        ? "steps-text-last-container"
        : "";
  };
});
const onClick = (item: TList) => {
  emit("onClick", item.id);
};
</script>
<style lang="scss">
.steps-container[data-weiling-mobile-ui-wl-steps] {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;

  .step-item,
  .step-last {
    flex: 1;

    .step {
      @extend %flex-between;
    }
  }

  .step-last {
    flex: none;
  }

  .steps-text-container,
  .steps-text-last-container {
    font-weight: 500;
    font-size: j(12);
    line-height: j(21);
    max-width: 80%;
    width: 100%;
    text-align: center;
    margin: auto;

    .step-text {
      @extend %flex-middle;
      justify-content: center;
    }
  }
}
</style>
