<template>
  <div class="md:w-2/3">
    <GunForm @save="save" :gun="gun" />
  </div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import {Nullable} from "primevue/ts-helpers";
import axios from "axios";
import {Response} from "../types/Response";
import GunForm from "../components/GunForm.vue";

interface Data {
  gun: {
    make: string
    model: string
    serial_number: string
    purchase_amount: Nullable<number>
    value_amount: Nullable<number>
    date_purchased: string
    notes: string
  }
}

export default defineComponent({
  components: {GunForm},
  data: (): Data => ({
    gun: {
      make: "",
      model: "",
      serial_number: "",
      purchase_amount: 0,
      value_amount: 0,
      date_purchased: "",
      notes: ""
    }
  }),
  methods: {
    save() {
      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
        this.$router.push('/gun/' + r.data.payload.id)
      })
    }
  }
})
</script>