<!--两行的进度条-->
<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>
      <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;
}
.progress-wrap .progress-title{
  text-align: right;
  color: $progressBarTextColor;
  font-size: .07rem;
  padding-top: .01rem;
  margin-right: .03rem;
}
.progress-wrap > div:last-child{
  flex: 1;
}
.progress-point{
  padding-right: .02rem;
}
.progress-point img{
  width: .04rem;
  vertical-align: -.01rem;
}
</style>