<template>
  <div class="star-comp">
    <img class="star" v-for="(d, index) in stars" :key="index" :src="d" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

declare module 'vue/types/vue' {
  interface Vue {
    level:number
  }
}

@Component({
  name: 'LevelStar',
  components: {
  },
  props: ['level']
})
export default class extends Vue {
  starType = [
    require('@/assets/main/detail/star-00.png'),
    require('@/assets/main/detail/star-01.png'),
    require('@/assets/main/detail/star-02.png'),
    require('@/assets/main/detail/star-03.png')
  ]

  stars: string[] = []
  created() {
    this.level = this.level || 0
    this.level = this.level > 15 ? 15 : this.level
    const v = (this.level / 5) | 0
    const p = this.level % 5
    console.log(p)
    for (let i = 0; i < 5; i++) {
      if (p === 0) {
        this.stars.push(this.starType[v])
      } else {
        if (i < p) {
          this.stars.push(this.starType[v + 1])
        } else {
          this.stars.push(this.starType[0])
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@media (max-width: 767px) {
 .star-comp{
   .star{
     width: 30px;
   }
 }
}
</style>
