<template>
  <ui-chip color="background">
    <div class="text-bold q-mr-md">{{ country.name }}</div>
    <div class="text-blue-grey">{{ countText }}</div>
  </ui-chip>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Country from '../../dto/Country'
import Formatter from '../../../../../helpers/Formatter'
import UiChip from '../../../../UiChip.vue'
@Component({
  components: { UiChip },
})
export default class PlaceSelectCount extends Vue {
  @Prop(Object) country!: Country

  get countText(): string {
    const countFormatter = Formatter.prettyNumber(this.country.citiesCount)

    return `${countFormatter} ${Formatter.num2str(
      this.country.citiesCount,
      'населенный пункт',
      'населенных пункта',
      'населенных пунктов'
    )}`
  }
}
</script>
