<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/ProgressBar/NumberProgressBarItem.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 
 * @LastEditTime: 2022-09-09 09:36:39
 * @LastEditors: changjun
-->
<script setup lang="ts">
import ProgressBar from './ProgressBar.vue'
import CustomTooltip from '../CustomTooltip/CustomTooltip.vue'
import NumberPlate from './NumberPlate.vue'

interface ProgressBarItemProps {
  number?: string | number,
  name: string,
  value: string | number,
  percentage: number,
  unit?: string,
  type?: string
}
const { number = '', name = '', value = 0, percentage = 0, unit = '',type = 'tradition' } = defineProps<ProgressBarItemProps>()
</script>
  
  <template>
  <div class="progress-bar-box" v-if="type == 'tradition'">
    <div class="top">
      <NumberPlate class="number-plate-progress" :number="number"/>
      <div class="name">
        {{ name }}
      </div>
      <div class="count-show">{{  value  }} {{ unit }} </div>
    </div>
    <div class="bottom">
      <ProgressBar :key="name" :percentage="percentage" color="#0095FF" />
    </div>
  </div>
  <div v-if="type == 'other'">
    <div class="other-progress-bar-box">
      <div class="other-progress-bar-box-number" :class="[number < 4?'other-active':'']">{{number}}</div>
      <div class="other-progress-bar-box-name">{{ name }}</div>
      <ProgressBar :key="name" :percentage="percentage" color="#4496C2" />
      <div class="other-progress-bar-box-value">{{value}}{{ unit }} </div>
    </div>
    <div class="other-line">
      <img src="../../assets/image/attackScreen/border-bottom.png" alt="">
    </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%;
      .number-plate-progress{
        margin-right: 5px;
      }
      .name {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
  
      .count-show {
        text-align: right;
        flex-shrink: 0;
        margin-left: 8px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  
    .bottom {
      margin-top: 5px;
      width: 100%;
    }
  }
  .other-progress-bar-box {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 12px;
    margin: 10px 0;
    // border-bottom: 1px dashed rgba(71, 116, 180, .2);
    .other-progress-bar-box-number {
      width: 44px;
      height: 14px;
      border-radius: 2px;
      text-align: center;
      margin-left: 13px;
      margin-right: 18px;
      background: rgba(255,255,255,0.15);
    }
    .other-active {
      background: #A67337;
    }
    .other-progress-bar-box-name {
      width: 50%;
      text-align: left;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap;
    }
    .other-progress-bar-box-value {
      width: 30%;
      text-align: center;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap;
    }
    
  }
  .other-line {
      width: 100%;
      margin-top: -10px;
      img {
        width: 96%;
        margin-left: 12px;
      }
    }
  </style>
  