<template>
  <span class="text-content">
    <div class="name">{{ name }}</div>
    <div class="hostname">{{ asset.name }}</div>
    <div class="mac">{{ mac }}</div>
    <div class="mac">{{ mac2 }}</div>
  </span>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { toWords as numberToWords } from 'number-to-words';

import snipeit from './snipeit';

@Component
export default class ComputersLabelText extends Vue {
  @Prop(Object) readonly asset: snipeit.Hardware;

  get name() {
    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
  }

  get mac() {
    return this.asset.custom_fields['MAC Address']?.value;
  }
  get mac2() {
    return this.asset.custom_fields['MAC Address 2']?.value;
  }
}
</script>
