<template>
  <div>
    <AssetLabel
      v-for="asset in assets.rows.filter((t) => t.name !== '')"
      :asset="asset"
      :key="asset.id"
    >
      <component :is="asset.category.name + 'LabelText'" :asset="asset" />
    </AssetLabel>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

import snipeit from './snipeit';
import AssetLabel from './AssetLabel.vue';
import ComputersLabelText from './ComputersLabelText.vue';

import assets from './computers.json';

@Component({ components: { AssetLabel, ComputersLabelText } })
export default class App extends Vue {
  assets: { rows: [snipeit.Hardware]; total: number } = assets;
}
</script>

<style>
@page {
  size: calc(146.64pt - 4.32pt) calc(69.12pt - 4.08pt);
  margin: 1mm;
}

body {
  margin: 0;
}
</style>
