<template>
    <div class="memo-edit p-2">
        <div class="flex-between mb-1">
            <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
        </div>
        <form @submit.prevent="submitForm">
            <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
            <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
            <div class="flex-end mt-1">
                <button class="btn-primary">Save</button>
            </div>

        </form>
    </div>
</template>

<script>
    import InputField from "../../components/InputField";
    import TextAreaField from "../../components/TextAreaField";

    export default {
        name: "MemoEdit",
        components: {
            InputField, TextAreaField
        },
        data: function () {
            return {
                form: {
                    'name': '',
                    'memo': '',
                },
                errors: null,
                loading: true,
            }
        },
        methods: {
            submitForm: function () {
                axios.patch('/api/memos/' + this.$route.params.id, this.form)
                    .then(response => {
                        this.$router.push(response.data.links.self)
                    })
                    .catch(errors => {
                        this.errors = errors.response.data.errors
                    })
            }
        },
        mounted() {
            axios.get('/api/memos/' + this.$route.params.id)
                .then(response => {
                    this.form = response.data.data
                    this.loading = false
                })
                .catch(error => {
                    this.loading = false
                    if (error.response.status === 404) {
                        this.$router.back()
                    }
                })
        }
    }
</script>
