<template>
    <v-dialog v-model="show" max-width="600px">
        <v-card>
            <v-card-title class="headline">
                Catatan Pasien
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <!-- Front Office Note -->
                    <v-flex xs12 v-if="patient.fo_note">
                        <v-subheader>Catatan Front Office</v-subheader>
                        <v-card flat>
                            <v-card-text>
                                {{ patient.fo_note }}
                            </v-card-text>
                        </v-card>
                    </v-flex>

                    <!-- Sampling Note -->
                    <v-flex xs12 v-if="patient.sampling_note">
                        <v-subheader>Catatan Sampling</v-subheader>
                        <v-card flat>
                            <v-card-text>
                                {{ patient.sampling_note }}
                            </v-card-text>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="show = false">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
const _ = require('lodash')

module.exports = {
    name: 'NoteDialog',

    props: {
        value: {
            type: Boolean,
            default: false
        },
        patient: {
            type: Object,
            default: function () { return {} }
        }
    },

    computed: {
        show: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            }
        }
    }
}
</script>

<style scoped>
.v-card {
    margin-bottom: 12px;
}

.v-card:last-child {
    margin-bottom: 0;
}
</style>