<template>
  <div class="progress-wrap">
    <div class="progress-title" :style="`width:${labelWidth};`">{{data.title}}</div>
    <div class="progress-point">
      <img :src="require('@/assets/images/icon-point.png')" />
    </div>
    <div>
      <Progress :percentage="data.num/data.max*100" :num="data.num" :color="color1 || defaultColor1" />
    </div>
  </div>
</template>
<script>
import Progress from './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: .025rem .02rem .027rem .05rem;
  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{
  margin-top: .03rem;
  flex:1;
}
.progress-point{
  padding-right: .02rem;
}
.progress-point img{
  width: .03rem;
  vertical-align: -.005rem;
}
</style>