<template>
  <div class="out-div">
    <div v-for="(item,dkprogressIndex) in 10" :key="dkprogressIndex">
      <div v-if="(item) <= getInt(progress)" style="border-radius: 2px;background: #77C5D5;width: 100%;height: 100%;"></div>
      <div v-if="(item) === (getInt(progress)+1)" style="border-radius: 2px;background: #77C5D5;height: 100%;" :style="{width:(getFloat(progress)*100)+'%'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wx-progress",
  props:{
    progress:{
      type:Number,
      default:0
    }
  },
  methods:{
    getFloat(number){
      let arr =  parseFloat(number/10).toFixed(2).split(".")
      return parseFloat('0.'+arr[1])
    },
    getInt(number){
      return parseInt(number/10)
    }
  }
}
</script>

<style scoped>
/* components/dk-progress/dk-progress.wxss */
.out-div{
  display: flex;
  justify-content: flex-end;
}
.out-div>div:nth-child(n){
  height: 12px;
  width: 6px;
  background: #AFBED9;
  border-radius: 1px;
  overflow: hidden;
}

.out-div>div:nth-child(n+2){
  margin-left: 2px;
}
</style>
