<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/ProgressBar/ProgressBarItem.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 
 * @LastEditTime: 2023-08-31 20:16:34
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import ProgressBar from './ProgressBar.vue'
import CustomTooltip from '../CustomTooltip/CustomTooltip.vue'

interface ProgressBarItemProps {
  number?: string | number,
  name: string,
  value: string | number,
  percentage: number,
  unit?: string
}
const { number, name = '', value = 0, percentage = 0, unit = '' } = defineProps<ProgressBarItemProps>()
</script>

<template>
  <div class="progress-bar-box">
    <div class="top">
      <div class="name ya-primary-text">
        <CustomTooltip :text="name"></CustomTooltip>
      </div>
      <div class="count-show ya-regular-text">{{ value }} {{ unit }} </div>
    </div>
    <div class="bottom">
      <ProgressBar :key="name" :percentage="percentage" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.progress-bar-box {
  display: flex;
  flex-direction: column;
  width: 100%;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .name {
      width: 100%;
      max-width: 70%;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }

    .count-show {
      width: 100%;
      max-width: 70%;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .bottom {
    margin-top: 5px;
    width: 100%;
  }
}
</style>
