<script setup lang="ts">
import { computed, reactive, defineProps, ref } from 'vue';

const props = defineProps({
  step: {
    type: Number,
    default: 1
  }
});

let textLeft = ref(['55px', 'calc(50% + 90px)']);
let imgLeft = reactive(['15px', 'calc(50% + 38px)']);
const activeWidth = computed(() => {
  switch (props.step) {
    case 1:
      return 'calc((100% / 2) + 70px)';
    case 2:
      return 'calc((100%))';
    default:
      return 'calc((100% / 2) - 10px)';
  }
});
const texts = computed(() => {
  return ['UPDATE_START', 'UPDATE_ACTIVE_START'];
});
const step1Img = computed(() => {
  return 'image/step-active-1.svg';
});
const step2Img = computed(() => {
  if (props.step >= 2) {
    return 'image/step-active-2.svg';
  } else {
    return 'image/step-black-2.svg';
  }
});
</script>
<template>
  <div class="step-container">
    <div class="bg">
      <div class="default-bg"></div>
      <div class="active-bg" :style="{ width: activeWidth }"></div>
      <div class="text-content">
        <div class="box">
          <div class="img-box">
            <img :src="step1Img" alt="" :style="{ left: imgLeft[0] }" />
            <img :src="step2Img" alt="" :style="{ left: imgLeft[1] }" />
          </div>
          <span
            :class="['text', { active: i <= step }]"
            v-for="(i, idx) in 2"
            :key="idx"
            :style="{ left: textLeft[idx] }"
          >
            {{ $t(texts[idx]) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.step-container {
  width: 100%;
  height: 56px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  padding-top: 24px;
  .bg {
    width: 100%;
    height: 32px;
    position: relative;
    background-color: var(--o-bg-color-light);
    .active-bg {
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      background-color: var(--o-color-brand);
      z-index: 1;
    }
    .text-content {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
      .box {
        position: relative;
        width: 100%;
        height: 100%;
        img {
          position: absolute;
          bottom: 0;
          height: 48px;
          width: 48px;
        }
        & > .text {
          position: absolute;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600;
          color: var(--o-text-color-secondary);
          top: 8px;
          &.active {
            color: #fffffe;
          }
        }
      }
    }
  }
}
</style>
