<template>
  <div ref="progress" class="custom-progress-val" :style="{ background: inactiveBg }">
    <div class="progress-warp" :style="{ height: height }">
      <div class="progress" :style="{ height: height, width: pWidth + 'px', background: activateBg }"></div>
    </div>
    {{ width }}
  </div>
</template>
<script setup>
import { ref, onMounted, watch, reactive, computed } from 'vue';

const props = defineProps({
  height: {
    type: String,
    default: '10px',
  },
  inactiveBg: {
    type: String,
    default: 'transparent',
  },
  activateBg: {
    type: String,
    default: 'linear-gradient(90deg, #45bfe9 0%, #01589c 100%)',
  },
  percent: {
    type: Number,
    default: 20,
  },
  width: {
    type: String,
    default: null,
  },
});

let progress = ref(null);
let maxwidth = computed(() => {
  return progress.value && progress.value.clientWidth;
});
let pWidth = computed(() => {
  let num = 0;
  num = Number(((maxwidth.value * props.percent) / 100).toFixed(0));
  return num;
});
</script>
<style lang="scss" scoped>
.custom-progress-val {
  width: calc(100%);
  border-radius: 6px;
  .progress-warp {
    width: 100%;
    .progress {
      height: 100%;
      border-radius: 6px;
      animation: expandWidth 1s ease-in-out forwards;
    }

    @keyframes expandWidth {
      from {
        width: 0;
      }
      to {
        width: maxwidth + 'px';
      }
    }
  }
}
</style>
