<template>
  <p class="desc">{{ getDesc() }}</p>
</template>

<script lang="ts">
import Vue from "vue";
import LocaleMixin from "../../../../mixins/locale-mixin";

export default Vue.extend({
  name: "star",
  mixins: [LocaleMixin],
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  watch: {
    item: {
      handler(val) {
        this.getDesc();
      },
      deep: true,
    },
  },
  methods: {
    getDesc() {
      let max = this.item.range.max || null;
      let min = this.item.range.min || 0;
      if (max == null) {
        return this.t(`survey_creator.question.evaluation.desc.outOfRange`, [
          min,
        ]);
      }
      return max == min
        ? this.t(`survey_creator.question.evaluation.desc.atPoint`, [min])
        : this.t(`survey_creator.question.evaluation.desc.inRange`, [min, max]);
    },
  },
});
</script>
