<template>
  <q-btn
    v-on="$listeners"
    v-bind="$attrs"
    class="task-level"
    round
    dense
    text-color="white"
    flat
    :class="{ [color]: true }"
  >
    {{ level }}
    <slot></slot>
  </q-btn>
</template>

<style scoped lang="sass">
.task-level
  border-radius: 8px
  position: relative
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import TaskLevelHelper from '@/widgets/tasks/helpers/TaskLevelHelper'
import { QBtn } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QBtn },
})
export default class TaskLevel extends Vue {
  @Prop(Number)
  level!: number

  get color(): string {
    return TaskLevelHelper.getColor(this.level)
  }
}
</script>
