<template>
  <!-- 步骤条 -->
  <div class="h-[120px]">
    <div class="box">
      <div class="progress">
        <div class="bar">
          <div
            class="bar__fill"
            :style="`width: ${(100 / (stepList.length - 1)) * curStep}%`"
          ></div>
        </div>
        <div
          v-for="(item, index) in stepList"
          :key="index"
          class="point"
          :class="{
            'point--active': item.value == curStep,
            'point--complete': item.value < curStep
          }"
        >
          <div class="h-6 w-6 bg-white rounded-full">
            <Loading v-if="item.value == curStep" class="animate-spin" />
            <CircleCheckFilled v-else-if="item.value < curStep" />
            <div v-else><MoreFilled /></div>
          </div>

          <label class="label">{{ item.label }}</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { sleep } from "@/utils";
import {
  CircleCheckFilled,
  Search,
  Loading,
  MoreFilled
} from "@element-plus/icons-vue";
const props = defineProps({
  steps: {
    type: Array,
    default: undefined
  },
  defaultStartSleep: {
    type: Number,
    default: 300
  },
  defaultEndSleep: {
    type: Number,
    default: 300
  }
});
const emit = defineEmits("confirm");
const curStep = ref(0);
const stepList = props.steps || [
  {
    label: "模型初始化",
    value: 0
  },
  {
    label: "相关数据查询",
    value: 1
  },
  {
    label: "数据分析",
    value: 2
  },
  {
    label: "分析完成",
    value: 3
  }
];
const autoAddStep = async () => {
  curStep.value = 0;
  await sleep(props.defaultStartSleep);
  while (curStep.value < stepList.length) {
    await sleep(5e2);
    curStep.value++;
  }
  await sleep(props.defaultEndSleep);
  emit("confirm");
};
onMounted(() => {
  autoAddStep();
})
</script>

<style lang="scss" scoped>

$black: #000;
$white: #fff;

.box {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
  box-shadow: 40px 0 65px rgba(#dbeafe, 0.4);
  padding: 0 80px;
  box-sizing: border-box;
  opacity: 1;
  transform-origin: center;
}
.progress {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #dbeafe;
  width: 98%;
  margin: auto 1%;
  height: 3px;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  overflow: hidden;

  &__fill {
    display: block;
    background: #1d4ed8;
    height: 100%;
  }
}

.point {
  position: relative;
  color: #818cf8;
  cursor: pointer;

  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    transition: 0.3s ease;

    .show-radius & {
      background: rgba(#000, 0.1);
    }
  }

  &--complete,
  &--active {
    color: #1d4ed8;
  }
}

.label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin: 16px 0 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font-size: 15px;
}</style>
