<template>
  <table class="table condensed highlight">
    <thead>
      <tr>
        <th class="right-align">
          Artikel
        </th>
        <th class="center-align">
          Beginn
        </th>
        <th class="center-align">
          Zugang
        </th>
        <th class="center-align">
          Ende
        </th>
        <th class="center-align">
          Verlust
        </th>
        <th class="right-align">
          Verkauft
        </th>
        <th class="right-align">
          Summe
        </th>
      </tr>
    </thead>
    <tbody>
      <InventoryItem
        v-for="(item,index) in inventory"
        :key="'item-'+index"
        :item="item"
        :total="sold"
      />
    </tbody>
    <tfoot>
      <tr>
        <th
          colspan="6"
          class="right-align"
        >
          Gesamtsumme:
        </th>
        <td class="right-align">
          <TweenedNumber
            :wert="sales"
            :precision="2"
            :einheit="'€'"
          />
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
import InventoryItem from "./InventoryItem";
import TweenedNumber from "./TweenedNumber";
import { InventoryArticle } from '../model/inventory_article';
import './InventoryTable.css';

export default {
  name: "InventoryTable",
  components: { InventoryItem, TweenedNumber },
  props: {
    articles: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      inventory: []
    };
  },
  computed: {
    meta() {
      return {
        datum: new Date().toString(),
      }
    },
    sales() {
      var total_sales = this.inventory.reduce(function(total, item) {
        return total + item.Sale;
      }, 0);
      return total_sales;
    },
    sold() {
      var total_sold = this.inventory.reduce((total, item) => {
        return total + item.Sold;
      },0);
      return total_sold;
    }
  },
  mounted() {
    this.$on('reset-inventur', this.resetInventory);
    this.$on('export-inventur', this.exportInventory);

    this.resetInventory();
  },
  methods: {
    resetInventory() {
      this.inventory = this.articles.map(item => {
        return new InventoryArticle(item);
      });
    },
    getInventurBlob() {
      let inventur = this.inventory.map(T => {
        return {
          name: T.article.name,
          preis: T.article.portion.price,
          beginn: T.start,
          zugang: T.fetched,
          ende: T.end,
          verlust: T.lost,
          verkauft: T.Sold,
          umsatz: T.Sale
        };
      });
      const data = JSON.stringify({
        meta: this.meta,
        data: inventur
      });
      const blob = new Blob([data],{type: 'text/json' });
      return blob;
    },
    exportInventory() {
      var formData = new FormData();
      formData.append('file', this.getInventurBlob(), 'inventur.json');
      this.$http
        .post(
          "/api/inventur",
          formData,
          {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }
        )
        .then(response => {
          this.$M.toast({ html: response.body });
        });
    }
  }
};
</script>

<style>
</style>