<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/ProgressBarItem.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 
 * @LastEditTime: 2022-11-09 11:30:57
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import NumberPlate from './NumberPlate.vue'
import ProgressBar from './ProgressBar.vue'
import CustomTooltip from './CustomTooltip.vue'

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

<template>
  <div class="progress-bar-box horizontal-progress-bar-box">
    <div class="top">
      <NumberPlate :number="number" />
      <div class="name ya-primary-text">
        <CustomTooltip :text="name"></CustomTooltip>
      </div>
    </div>
    <div class="bottom">
      <ProgressBar :percentage="percentage" />
    </div>
    <div class="value  ya-regular-text">{{ value }}</div>
  </div>
</template>

<style scoped lang="scss">
.ml-16 {
  margin-left: 16px;
}

.progress-bar-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;

  .top {
    display: flex;
    align-items: center;

    .name {
      cursor: pointer;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      width: 143px;
      min-width: 143px;
      padding-left: 15px;
      padding-right: 10px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
  }

  .bottom {
    width: 100%;
    margin-top: 8px;
  }
}

.horizontal-progress-bar-box {
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;

  .top {
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
  }

  .bottom {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }

  .value {
    width: 50px;
    font-size: 16px;
    font-family: 'PangMenZhengDao';
    font-weight: 400;
    color: #ffffff;
    flex-shrink: 0;
    margin-left: 15px;
  }
}
</style>
