<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 16:45:58
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-03-14 17:01:36
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\ProgressBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, computed, defineProps } from "vue";
interface BlockHeaderProps {
  color: String;
  percentage: Number;
}
const { color = "rgba(1, 121, 234, 1)", percentage = 0 } =
  defineProps<BlockHeaderProps>();

const beforeEnter = (el) => {
  el.style.width = 0;
};
const enter = (el) => {
  el.style.width = `${percentage}%`;
  el.style.transition = `width 1s linear`;
};
const getComputedCss = computed(() => {
  return {
    background: "linear-gradient(270deg, #2B8AFF 0%, #2FF3FF 100%)",
  };
});
</script>

<template>
  <div class="progress-bar">
    <div class="background-bar"></div>
    <transition appear @before-appear="beforeEnter" @after-appear="enter">
      <div class="tracker-bar" :style="getComputedCss"></div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.progress-bar {
  width: 100%;
  .background-bar {
    background: rgba(10, 51, 126, 0.3);
    width: 100%;
    height: 6px;
    border-radius: 4px;
  }

  .tracker-bar {
    background: transparent;
    height: 6px;
    width: 0;
    transition: width 0.5s linear;
    margin-top: -6px;
    border-radius: 4px;
  }
}
</style>
