<template>
  <div class="flex flex-shrink-0 w-full justify-between step">
    <div
      v-for="(ele, index) in eleList"
      :key="index"
      class="flex"
      :class="{
        'flex-grow': ele.type === 'line',
      }"
    >
      <div
        v-if="ele.type === 'line'"
        class="flex-grow relative transition-all"
        style="height: 3px; top: 16px"
        :style="{
          backgroundColor:
            ele.mode === 'dark' ? 'var(--dark)' : 'var(--sy-blue)',
        }"
      ></div>
      <div
        v-else-if="ele.type === 'circle'"
        class="flex flex-col items-center cursor-pointer"
        @click="$emit('update:current', ele.value)"
      >
        <div class="w-full flex items-center">
          <div
            class="flex-grow transition-all"
            style="height: 3px"
            :style="{
              backgroundColor:
                ele.mode === 'dark' ? 'var(--dark)' : 'var(--sy-blue)',
              opacity: ele.index !== 1 ? 1 : 0,
            }"
          ></div>
          <div
            class="circle flex items-center justify-center transition-all"
            :style="{
              background:
                ele.mode === 'dark' ? 'var(--dark)' : 'var(--sy-blue)',
            }"
          >
            <Icon
              :style="{
                color: ele.mode === 'dark' ? 'var(--sy-gray)' : 'white',
              }"
              icon-name="iconweixuanze3"
              class="flex-shrink-0 transition-all"
              v-if="ele.index === steps.length"
            ></Icon>
            <span
              v-if="ele.index !== steps.length"
              class="number transition-all"
              :style="{
                color: ele.mode === 'dark' ? 'var(--sy-gray)' : 'white',
              }"
            >
              {{ ele.index }}
            </span>
          </div>
          <div
            class="flex-grow transition-all"
            style="height: 3px"
            :style="{
              backgroundColor:
                ele.mode === 'dark' ? 'var(--dark)' : 'var(--sy-blue)',
              opacity: ele.index !== steps.length ? 1 : 0,
            }"
          ></div>
        </div>
        <div
          style="margin-top: 13px"
          class="whitespace-nowrap stepName text-center"
          :style="{
            color: ele.mode === 'dark' ? 'var(--text-gray)' : 'var(--sy-blue)',
          }"
        >
          <div class="transition-all">
            {{ ele.name }}
          </div>
          <div class="opacity-0">{{ maxLenStepName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps<{
  steps: { name: string; value: any }[];
  current: any;
}>();
defineEmits(["update:current"]);

interface iLine {
  type: "line";
  mode: "dark" | "light";
}
interface iCircle {
  type: "circle";
  name: string;
  value: any;
  mode: "dark" | "light";
  index: number;
}

const maxLenStepName = computed(() => {
  return props.steps.reduce((prev, cur) => {
    return prev.length > cur.name.length ? prev : cur.name;
  }, "");
});

const eleList = computed(() => {
  const list: (iLine | iCircle)[] = [];
  props.steps.forEach((step, index, arr) => {
    const isLight = isGreenMode(step);
    list.push({
      ...step,
      type: "circle",
      index: index + 1,
      mode: isLight ? "light" : "dark",
    });

    if (index !== props.steps.length - 1) {
      const nextIsLight = isGreenMode(arr[index + 1]);
      list.push(
        ...[
          {
            type: "line" as const,
            mode: isLight ? ("light" as const) : ("dark" as const),
          },
          {
            type: "line" as const,
            mode: nextIsLight ? ("light" as const) : ("dark" as const),
          },
        ]
      );
    }
  });

  return list;
});

const isGreenMode = (step: { name: string; value: any }) => {
  return (
    props.steps.findIndex((i) => i.value === step.value) <=
    props.steps.findIndex((i) => i.value === props.current)
  );
};
</script>

<style scoped lang="scss">
.step {
  --dark: #eaeaea;

  .circle {
    width: 35px;
    height: 35px;
    background: var(--dark);
    border-radius: 100%;
  }
  .stepName {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 20px;
  }
}
</style>
