<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="data.num1" :color="color1 || defaultColor1" />
      <Progress :percentage="data.num2" :color="color2 || defaultColor2" />
    </div>
  </div>
</template>
<script>
 import Progress from "@/components/Progress"
export default {
  props: {
    data: Object,
    labelWidth: String | Number,
    color1: String,
    color2: String,
  },
  components:{
    Progress,
  },
  data(){
    return {
      defaultColor1: 'linear-gradient(to right, #8f071e, #c0293e, #f85163)',
      defaultColor2: 'linear-gradient(to right, #0168e8, #0988e8, #13ace8))'
    }
  }
};
</script>

<style scoped>
.progress-wrap{
  padding: .03rem .02rem .03rem .08rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-wrap .progress-title{
  text-align: right;
  color: #59baf2;
  font-size: .05rem;
  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>