<template>
  <div>
    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    },
    wrapColor: {
      type: String,
      default: ''
    },
    borderColor: {
      type: String,
      default: ''
    },
    dotColor: {
      type: String,
      default: ''
    },
  },
  computed: {
    dotCount() {
      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
    },
  },
}
</script>
<style lang="scss" scoped>
.title{
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.percent{
 position: relative;
 img{
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
 }
}
.progress-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 10px;
  border-radius: 2px;
  padding: 1px;
  border: 1px solid transparent;
  box-sizing: border-box;
  .progress-dot {
    width: 4px;
    height: 12px;
    border-radius: 3px;
    // background-color: #1661ad;
    margin-right: 1px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>