<template>
    <v-dialog
        v-model="dialog" 
        max-width="400px"
    >
        <v-card>
            <v-card-title primary-title class="grey darken-3 white--text">
                <h3 class="headliine">Tambah Template Hasil</h3>
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-text-field
                            label="Pemeriksaan"
                            readonly
                            v-model="curr_px"
                        ></v-text-field>
                    </v-flex>

                    <v-flex xs12>
                        <v-text-field
                            label="Keterangan Hasil"
                            v-model="template_new_value"
                            :error="error || dup_error"
                            :error-messages="error_msg"
                        ></v-text-field>
                    </v-flex>
                </v-layout>
            </v-card-text>

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

<script>
module.exports = {
    data() {
        return {
            error_messages: ''
        }
    },

    computed : {
        dialog : {
            get() {
                return this.$store.state.re_px.dialog_template_new
            },
            set (v) {
                this.$store.commit('re_px/update_dialog_template_new', v)
            }
        },

        template_new_value : {
            get() {
                return this.$store.state.re_px.template_new_value
            },
            set (v) {
                this.$store.commit('re_px/update_template_new_value', v)
            }
        },

        curr_px () {
            return this.$store.state.re_px.selected_px.t_testname
        },

        error () {
            
            if (this.template_new_value.length < 1) {
                this.error_messages = "Keterangan Isi Hasil tidak boleh kosong !"
                return true
            }

            this.error_messages = ""
            return false
        },

        error_msg () {
            if (this.error_messages != '')
                return this.error_messages

            return this.dup_error_messages
        },

        dup_error : {
            get() { return this.$store.state.re_px.dup_template_error.status },
            set (v) {
                let x = this.$store.state.re_px.dup_template_error
                x.status = v
                this.$store.commit('re_px/update_dup_template_error', x) 
            }
        },

        dup_error_messages : {
            get() { return this.$store.state.re_px.dup_template_error.messages },
            set (v) {
                let x = this.$store.state.re_px.dup_template_error
                x.messages = v
                this.$store.commit('re_px/update_dup_template_error', x) 
            }
        }
    },

    methods : {
        save () {
            if (this.error) {
                return
            } else {
                this.$store.dispatch('re_px/save_template')
            }
        }
    },

    watch : {
        template_new_value (v, o) {
            
            if (this.dup_error) {
                if (v != o)
                    this.$store.commit('re_px/update_dup_template_error', {
                        status: false,
                        messages: ''
                    })
            }
        },

        dialog (v, o) {
            if (v && !o)
                this.template_new_value = ''
        }
    }
}
</script>
