<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/ProgressBar/CardNumberItem.vue
 * @Date: 2022-08-31 15:21:28
 * @Description: 
 * @LastEditTime: 2022-09-03 10:19:11
 * @LastEditors: changjun
-->
<script setup lang="ts">
import NumberPlate from './NumberPlate.vue'

interface OrgConBlockProps {
  name: string;
  count: string | number;
  number: string | number
}

const { number = '', name, count } = defineProps<OrgConBlockProps>()

const getClass = computed(() => {
  if (unref(number) > 3) return `number-box number-box-5`
  return `number-box number-box-${number}`
})
</script>
<template>
  <div class="card-number-item">
    <div class="item">
      <div class="number-box" :class="getClass">{{ number }}</div>
      <div class="name">{{ name }}</div>
      <div class="count">{{ count }}</div>
    </div>
  </div>

</template>
    
<style lang="scss" scoped>
.card-number-item {
  display: flex;
  width: 100%;
  height: 32px;
  background: #F4F4F4;
  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;

  .item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    

    .number-box {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      font-size: 12px;
      font-family: 'DIN';
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
    }

    .number-box-1 {
      background: #E65857;
    }
    .number-box-2 {
      background: #F18301;
    }
    .number-box-3 {
      background: #0095FF;
    }

    .name{
      margin-left: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.65);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .count{
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.4);
      flex-shrink: 0;
      text-align: right;
    }
  }
}
</style>
    