<template>
    <v-card title="Add Comment">
        <v-card-text>
            <p>Add new comment for : {{ customer.acc_no }} - {{ customer.name }}</p>
            <v-textarea v-model="comment" label="Comment"></v-textarea>
        </v-card-text>
        <v-card-actions>
            <v-btn color="blue" :loading="saving" @click="saveComment">Save</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="grey" @click="$emit('return','cancel')">Cancel</v-btn>
        </v-card-actions>

    </v-card>
</template>
<script>
import axios from 'axios'
export default {
    props: {
        customer: null
    },
    data(){
        return {
            comment: "",
            saving: false
        }
    },
    methods: {
        saveComment() {
            this.saving = true
            let url = this.$api_url + "/customers/comments"
            axios.put(url, {
                acc_no: this.customer.acc_no,
                comment: this.comment
            })
                .then(resp => {
                    console.log(resp.data)
                })
                .catch(err => {
                    console.log(err)
                })
                .finally(() => {
                    this.saving = false
                    this.$emit('return',"saved")
                })
        }
    }
}
</script>
