<template>
  <section class="content-grid">
    <v-card class="span-12 panel-pad">
      <div class="toolbar-row mb-4">
        <v-select v-model="localFilters.book" :items="bookItems" label="Book" hide-details style="max-width: 180px" @update:model-value="emitFilters" />
        <v-text-field v-model.number="localFilters.year" type="number" label="Year" hide-details style="max-width: 140px" @update:model-value="emitFilters" />
        <v-spacer />
        <div class="font-weight-bold">Annual depreciation: {{ currency(depreciationReport.totals.depreciation) }}</div>
      </div>
      <div class="chart-box mb-4">
        <Bar :data="monthlyChart" :options="chartOptions" />
      </div>
      <div style="overflow-x:auto">
        <table class="asset-table">
          <thead>
            <tr>
              <th>Asset ID</th>
              <th>Description</th>
              <th>Method</th>
              <th>Cost</th>
              <th>Depreciation</th>
              <th>Accumulated</th>
              <th>NBV</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in depreciationReport.rows" :key="row.asset_id">
              <td class="font-weight-bold">{{ row.asset_id }}</td>
              <td>{{ row.description }}</td>
              <td>{{ row.methodLabel || row.method }}</td>
              <td>{{ currency(row.cost) }}</td>
              <td>{{ currency(row.depreciation) }}</td>
              <td>{{ currency(row.accumulated) }}</td>
              <td>{{ currency(row.net_book_value) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </v-card>
  </section>
</template>

<script>
import { Bar } from 'vue-chartjs';
import '../utils/charts';

export default {
  components: { Bar },
  props: {
    bookItems: { type: Array, required: true },
    chartOptions: { type: Object, required: true },
    currency: { type: Function, required: true },
    depreciationReport: { type: Object, required: true },
    monthlyChart: { type: Object, required: true },
    reportFilters: { type: Object, required: true }
  },
  emits: ['filter-reports'],
  data() {
    return {
      localFilters: { ...this.reportFilters }
    };
  },
  watch: {
    reportFilters: {
      handler(value) {
        this.localFilters = { ...value };
      },
      deep: true
    }
  },
  methods: {
    emitFilters() {
      this.$emit('filter-reports', { ...this.localFilters });
    }
  }
};
</script>
