<template>
  <el-progress
    class="progress--bar"
    :percentage="percentage"
    :show-text="showText"
    :text-inside="textInside"
    :stroke-width="height"
    :color="activeColor"
    :style="{
      '--progress-bg-color': bgColor,
    }"
  />
</template>
<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    colors: {
      type: Array,
      default: () => ['#845EF7'],
    },
    bgColor: {
      type: String,
      default: '#2125293d',
    },
    height: {
      type: Number,
      default: 8,
    },
    showText: {
      type: Boolean,
      default: false,
    },
    textInside: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    activeColor() {
      let value = 0;
      const result = [];
      this.colors.forEach((color) => {
        value += 100 / this.colors.length;
        result.push({ color, percentage: value });
      });
      return result;
    },
  },
};
</script>

<style lang="scss">
    @import './styles.scss';
</style>
