<script lang="ts">
import { defineComponent } from "vue";
import { TITLE } from "../store/mutation-types";

export default defineComponent({
    mounted() {
        this.$store.dispatch(TITLE, "Budget for " + this.month + " " + this.year)
    },
    props: ["budgetid", "year", "month"],
    data() {
        return {
            Year: this.year || new Date().getFullYear(),
            Month: this.month || new Date().getMonth()
        }
    },
    computed: {
        previous() {
            return {
                Year: new Date(this.$data.Year, this.$data.Month - 1, 1).getFullYear(),
                Month: new Date(this.$data.Year, this.$data.Month - 1, 1).getMonth(),
            }
        },
        current() {
            return {
                Year: new Date().getFullYear(),
                Month: new Date().getMonth(),
            }
        },
        next() {
            return {
                Year: new Date(this.$data.Year, this.$data.Month + 1, 1).getFullYear(),
                Month: new Date(this.$data.Year, this.$data.Month + 1, 1).getMonth(),
            }
        }
    }
})

/*{{define "title"}}
    {{printf "Budget for %s %d" .Date.Month .Date.Year}}
{{end}}*/
</script>

<template>
    <div>
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + current.Year + '/' + current.Month">Current Month</router-link> - 
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + next.Year + '/' + next.Month">Next Month</router-link>
    </div>
    <table class="container col-lg-12" id="content">
        <tr>
            <th>Group</th>
            <th>Category</th>
            <th></th>
            <th></th>
            <th>Leftover</th>
            <th>Assigned</th>
            <th>Activity</th>
            <th>Available</th>
        </tr>
        <tr v-for="category in $store.state.Categories">
            <td>{{category.Group}}</td>
            <td>{{category.Name}}</td>
            <td>
            </td>
            <td>
            </td>
            <td>{{category.AvailableLastMonth}}</td>
            <td>{{category.Assigned}}</td>
            <td>{{category.Activity}}</td>
            <td>{{category.Available}}</td>
        </tr>
    </table>
</template>