<template>
   <div :class="['s-progress', { mr: showText }]">
      <div class="container" :style="{ width }">
         <div :class="type" :style="{ width: `${val}%` }"></div>
      </div>
      <span v-if="showText" class="text" :style="{ left: `${val}%` }">
         {{ `${val}%` }}
      </span>
   </div>
</template>

<script lang="ts" setup>
import { watch } from "vue"
interface Props {
   type?: "loading" | "step" | "error";
   width?: string;
   val?: number;
   showText?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
   type: "loading",
   width: "100%",
   val: 50,
   showText: false
})

watch(() => props.type, () => {
   console.log(props)
})
</script>

<style scoped lang="less">
   .s-progress {
      position: relative;
      &.mr {
         margin-right: 42px;
      }
      .container {
         margin: 10px 0;
         overflow: hidden;
         background-color: rgba(0, 0, 0, 0.2);
         .loading {
            background: @primary;
            height: 2px;
            animation: loading 2s infinite;
         }
         .error {
            background: @danger;
            height: 2px;
         }
         .step {
            background: @primary;
            height: 2px;
            transition: width 2s;
         }
      }
      .text {
         position: absolute;
         color: @primary;
         margin-left: 8px;
         top: -4px;
         background-color: @white;
         transition: left 2s;
      }
   }

   @keyframes loading {
      0% {
         transform: translateX(-100%);
      }
      100% {
         transform: translateX(200%);
      }
   }
</style>
