<!--两行的进度条-->
<template>
  <div class="progress-wrap">
    <div class="progress-title" :style="`width:${labelWidth}rem;`">{{data.title}}</div>
    <div class="progress-point">
      <img :src="require('@/assets/images/icon-point.png')" />
    </div>
    <!-- 为进度条部分添加类名，方便控制宽度 -->
    <div class="progress-bars">
      <Progress :percentage="percentage" :num="data.num1" :color="color1 || defaultColor1" />
      <Progress :percentage="100" :num="data.num2" :color="color2 || defaultColor2" />
    </div>
  </div>
</template>
<script>
/**
 * 进度条2
 * */
import Progress from './Progress'
export default {
  name: 'ProgressBar2',
  props: {
    data: Object,
    labelWidth: String | Number,
    color1: String,
    color2: String
  },
  components: {
    Progress
  },
  computed: {
    percentage () {
      if (this.data.percentage) {
        return this.data.percentage
      } else {
        return this.data.num1 / (this.data.num2) * 100
      }
    }
  },
  data () {
    return {
      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8)'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  .progress-wrap{
    padding: .025rem .02rem .027rem .05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; // 确保进度条包装器占满容器高度
    width: 100%;
  }
  .progress-wrap .progress-title{
    text-align: right;
    color: $progressBarTextColor;
    font-size: .07rem;
    padding-top: .01rem;
    margin-right: .03rem;
  }
  // 让进度条部分占据剩余空间
  .progress-wrap .progress-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .progress-point{
    padding-right: .02rem;
  }
  .progress-point img{
    width: .04rem;
    vertical-align: -.01rem;
  }
</style>