<template>
    <div class="row">
        <div class="col-12">
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="name" label="Name"></basic-input-field>
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="email" label="Email"></basic-input-field>
            <basic-input-field :resource="user" :set-resource="setUserProperty" property="password" label="Password"></basic-input-field>

            <vue-button :on-click="updateUser" label="Save"></vue-button>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import basicInputField from '../general/forms/basic-input-field.vue';
    import vueButton from '../general/buttons/vue-button.vue';

    export default {
        name: 'user',
        data() {
            return {
            };
        },
        mixins: [],
        components: {
            basicInputField,
            vueButton
        },
        computed: {
            user() {
                return this.$store.state.user;
            },
        },
        mounted() {
            this.$httpGet('user', {id: 5});
        },
        watch: {
            'user': function (newUser) {
                // I want to trigger an event inside the component vue-button
                // I do not want to trigger then event in every vue-button component on the page just this vue-button
                // I need to call a resetStatus method within the vue-button component when the user changes
                // This would have worked in vue 1 with an event 'resetStatus' that would call the method in the vue-button component
                this.$broadcast('resetStatus');
            }
        },
        methods: {
            setUserProperty(property, value) {
                this.$store.commit('UPDATE_MODULE_RESOURCE', {module: 'user', resource: property, value: value});
            },
            updateUser() {
                return this.$httpPut('user', {id: this.user.id}, this.user);
            }
        },
    };
</script>