<!--
 * @Author: tqh
 * @FilePath: /yuan-flow-threat-collector-browser/src/components/ProgressBar/ProgressBar.vue
 * @Date:  2023-04-03 19:46:04
 * @Description: 进度条组件
 * @LastEditTime: 2023-05-31 17:13:37
-->
<script setup lang="ts">
import { computed, defineProps, unref, watchEffect, ref } from "vue";
import { bigNumberTransform } from "../../utils/utils";
interface ProgressBarProps {
  percentage: number;
  color?: string;
  backgroundColor?: string;
  number?: number;
  label?: string;
  value?: string | number;
}

const {
  percentage = 0,
  color,
  backgroundColor = "rgba(255,255,255,0.15)",
  number = 1,
  label = "",
  value = "",
} = defineProps<ProgressBarProps>();
const getCss = ref({})
const getBackgroundBarCss = computed(() => {
  return {
    background: unref(backgroundColor),
  };
});
const beforeEnter = (el) => {
  el.style.width = 0;
};
const enter = (el) => {
  el.style.background = unref(color)
  el.style.width = `${unref(percentage)}%`;
  el.style.transition = `width 1s linear`;
};
watchEffect(()=>{
  getCss.value = {
    background: unref(color),
    width: `${unref(percentage)}%`,
    transition: `width 1s linear`
  }
})
</script>

<template>
  <div class="progress-bar">
    <div
      class="progress-bar-index"
      :class="
        number == 0
          ? 'progress-bar-index-first'
          : number == 1
          ? 'progress-bar-index-two'
          : number == 2
          ? 'progress-bar-index-three'
          : ''
      "
    >
      {{ number + 1 }}
    </div>
    <div class="progress-bar-item">
      <div class="progress-bar-item-top">
        <div class="progress-bar-item-label">
          <CustomTooltip
            :placement="'top'"
            :hideAfter="0"
            :show="true"
            :text="label"
          ></CustomTooltip>
        </div>
        <div class="progress-bar-item-value">{{ bigNumberTransform(value) || "-" }}</div>
      </div>
      <div class="background-bar" :style="getBackgroundBarCss"></div>
      <transition appear @before-appear="beforeEnter" @after-appear="enter" >
        <div class="tracker-bar" :style="getCss"></div>
      </transition>
    </div>
  </div>
</template>

<style scoped lang="scss">
.progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  .progress-bar-index {
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #a7c0d2;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    margin-right: 6px;
  }
  .progress-bar-index-first {
    background: var(--el-color-danger);
  }
  .progress-bar-index-two {
    background: var(--el-color-warning);
  }
  .progress-bar-index-three {
    background: #1c92d0;
  }
  .progress-bar-item {
    flex: 1;
    .progress-bar-item-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      .progress-bar-item-label {
        max-width: 250px;
      }
      .progress-bar-item-value {
      }
    }
  }
  .background-bar {
    width: 100%;
    height: 4px;
    border-radius: 3px;
  }
  .tracker-bar {
    background: transparent;
    height: 4px;
    width: 0;
    transition: width 0.5s linear;
    margin-top: -4px;
    border-radius: 3px;
    // border-radius: 4px;
  }
}
</style>
