<template>
  <div class="increasing-bar-container">
    <div class="bar-container">
      <div class="bar" :style="{ width: (renderValue / max) * 100 + '%' }"></div>
    </div>
    <div class="count">{{ toThousands(renderValue) }}</div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, watch, toRaw } from "vue";
  import useGradualNumber from "@/hook/useGradualNumber";
  import { toThousands } from "@/utils/thousands";

  export default defineComponent({
    props: {
      value: {
        type: Number,
        default: 0,
      },
      max: {
        type: Number,
        default: 1,
      },
    },
    setup(props) {
      const count = toRaw(props.value);
      const [renderValue, setRenderValue] = useGradualNumber(count);
      watch(
        () => props.value,
        () => {
          setRenderValue(props.value);
        },
        {
          immediate: true,
        }
      );

      return {
        renderValue,
        toThousands,
      };
    },
  });
</script>

<style lang="less" scoped>
  .increasing-bar-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bar-container {
    width: 100%;
    height: 0.08rem;
    border-radius: 41px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;

    .bar {
      position: absolute;
      left: 0;
      top: 0;
      height: 0.08rem;
      background: linear-gradient(90deg, #0ab1eb 0%, #2bec99 25.86%);
      box-shadow: 0px 4px 4px rgba(41, 243, 160, 0.1);
      border-radius: 41px;
    }
  }
  .count {
    width: 0.6rem;
    min-width: 60px;
    font-family: DIN-Medium;
    text-align: right;
    flex: none;
    font-size: 0.18rem;
    line-height: 0.18rem;
  }
</style>
