<template>
<v-layout column>
    <v-flex xs12 mb-2>
        <v-card>
            <v-card-text>
                <one-fo-clinic-poly-info-detail></one-fo-clinic-poly-info-detail>
            </v-card-text>
        </v-card>
    </v-flex>

    <v-flex xs12>
        <v-card>
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs6 pr-3>
                        <v-autocomplete
                            label="Diagnosa"
                            v-model="selected_diagnose"
                            :items="diagnose"
                            :search-input.sync="search"
                            auto-select-first
                            no-filter
                            return-object
                            item-text="M_DiagnoseName"
                            :loading="is_loading"
                            no-data-text="Pilih Diagnosa"
                            :clearable="true"
                            :disabled="!processEnabled"
                            >
                            <template
                                slot="item"
                                slot-scope="{ item }"
                                >
                                <v-list-tile-content>
                                    <v-list-tile-title v-text="item.M_DiagnoseName"></v-list-tile-title>
                                <!-- <v-list-tile-sub-title v-text="a"></v-list-tile-sub-title> -->
                                </v-list-tile-content>
                            </template>

                        </v-autocomplete>
                    </v-flex>

                    <v-flex xs6 pl-3>
                        <v-select
                            :disabled="!processEnabled"
                            v-model="selected_gcs"
                            :items="gcs"
                            item-text="M_GcsName"
                            label="Tingkat Kesadaran"
                            return-object
                        ></v-select>
                    </v-flex>

                    <v-flex xs2 pr-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Sistole"
                            v-model="order.sistole"
                            clearable
                            @input="(v) => update_order_d('sistole',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs2 pl-3 pr-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Diastole"
                            v-model="order.diastole"
                            clearable
                            @input="(v) => update_order_d('diastole',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs4 pl-3 pr-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Suhu Badan"
                            v-model="order.temperature"
                            clearable
                            @input="(v) => update_order_d('temperature',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs4 pl-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Berat Badan"
                            v-model="order.weight"
                            clearable
                            @input="(v) => update_order_d('weight',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs4 pr-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Laju Pernafasan"
                            v-model="order.respiratory"
                            clearable
                            @input="(v) => update_order_d('respiratory',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs4 pr-3 pl-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Denyut Nadi"
                            v-model="order.pulse"
                            clearable
                            @input="(v) => update_order_d('pulse',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs4 pl-3>
                        <v-text-field
                            :disabled="!processEnabled"
                            label="Tinggi Badan"
                            v-model="order.height"
                            clearable
                            @input="(v) => update_order_d('height',v)"
                        >                
                        </v-text-field>
                    </v-flex>

                    <v-flex xs6 pr-3>
                        <v-textarea
                            :disabled="!processEnabled"
                            label="Keluhan"
                            v-model="order.complaint"
                            clearable
                            @input="(v) => update_order_d('complaint',v)"
                        ></v-textarea>
                    </v-flex>

                    <v-flex xs6 pl-3>
                        <v-textarea
                            :disabled="!processEnabled"
                            label="Saran"
                            v-model="order.suggestion"
                            clearable
                            @input="(v) => update_order_d('suggestion',v)"
                        ></v-textarea>
                    </v-flex>

                    <v-flex xs4 pa-1>
                        <one-fo-clinic-poly-receipt></one-fo-clinic-poly-receipt>
                        <v-btn
                        block
                        color="orange"
                        :dark="processed"
                        :disabled="!processed"
                        @click="dialog_med_open()"
                        >RESEP</v-btn>
                    </v-flex>
                        
                    <v-flex xs4 pa-1>
                        <one-fo-clinic-poly-lab></one-fo-clinic-poly-lab>
                        <v-btn
                        block
                        color="green"
                        :dark="processed"
                        :disabled="!processed"
                        @click="dialog_lab_open()"
                        >LABORATORIUM</v-btn>
                    </v-flex>

                    <v-flex xs4 pa-1>
                        <v-btn
                        block
                        color="blue"
                        :dark="btn_save_enabled"
                        @click="save()"
                        :disabled="!btn_save_enabled"
                        >SIMPAN</v-btn>
                        <one-fo-clinic-poly-finish-dialog></one-fo-clinic-poly-finish-dialog>
                        <one-print-dialog></one-print-dialog>
                    </v-flex>
                </v-layout>
            </v-card-text>

        </v-card>
    </v-flex>
</v-layout>

    
    
</template>

<script>
module.exports = {
    components : {
        'one-fo-clinic-poly-info-detail' : httpVueLoader('./oneFoClinicPolyInfoDetail.vue'),
        'one-fo-clinic-poly-receipt' : httpVueLoader('./oneFoClinicPolyReceipt.vue'),
        'one-fo-clinic-poly-lab' : httpVueLoader('./oneFoClinicPolyLab.vue'),
        'one-fo-clinic-poly-finish-dialog' : httpVueLoader('./oneFoClinicPolyFinishDialog.vue'),
        'one-print-dialog' : httpVueLoader('./oneDialogPrint.vue')
    },

    computed : {
        search:{
            get() {
                return this.$store.state.diagnose.search
            },
            set(val)  {
                if (val == null) return
                this.$store.commit('diagnose/update_search',val)
            }
        },

        diagnose : {
            get () {
                return this.$store.state.diagnose.diagnose
            }
        },

        selected_diagnose : {
            get () {
                return this.$store.state.diagnose.selected_diagnose
            },
            set (v) {
                this.$store.commit('diagnose/update_selected_diagnose', v)
                return
            }
        },

        gcs : {
            get () {
                return this.$store.state.gcs.gcs
            },
            set (v) {
                return
            }
        },

        selected_gcs : {
            get () {
                return this.$store.state.gcs.selected_gcs
            },
            set (v) {
                this.$store.commit('gcs/update_selected_gcs', v)
                return
            }
            
        },

        is_loading() {
            return this.$store.state.diagnose.search_status == 1
        },
        
        order : {
            get () {
                return this.$store.state.order.order
            },
            set (v) {
                this.$store.commit('order/update_order', v)
                return
            }
        },

        btn_save_enabled () {
            
            if (!this.$store.state.patient.selected_patient.M_PatientID ||
                !this.$store.state.diagnose.selected_diagnose.M_DiagnoseID ||
                !this.$store.state.gcs.selected_gcs.M_GcsID ||
                !this.$store.state.order.order.complaint ||
                !this.$store.state.order.order.suggestion)
            return false

            return true
        },

        processEnabled () {
            if (!this.$store.state.patient.selected_patient.M_PatientID)
                return false

            if (this.$store.state.patient.selected_patient.M_StatusCode != "CLINIC.PROCESS")
                return false

            return true
        },

        processed () {
            return this.$store.state.order.processed;
        }
    },

    methods: {
        thr_search: _.debounce( function () {
            this.$store.dispatch("diagnose/search")
        }, 800),

        save () {
            this.$store.dispatch('order/save');
        },

        update_order_d (type, val) {
            this.$store.commit('order/update_order_d', {type:type,val:val})
        },

        dialog_lab_open () {
            this.$store.commit('order/update_lab_dialog_is_active', true)
        },

        dialog_med_open () {
            this.$store.commit('order/update_med_dialog_is_active', true)
        }
    },
    
    watch: {
      search(val,old) {
         // console.log("val:"+val)
         // console.log("old:"+old)
         if (val == null || typeof val == 'undefined') val = ""
         console.log("1-val:"+val)
         if (val == old ) return
         console.log("2-val:"+val)
         // if (! val) return
         console.log("3-val:"+val)
         // if (val.length < 1 ) return
         console.log("4-val:"+val)
         if (this.$store.state.diagnose.search_status == 1 ) return  
         console.log("5-val:"+val)
         this.$store.commit("diagnose/update_search",val)
         this.thr_search()

         // if (this.$store.state.doctor.search_status == 1 ) return  
         // this.$store.commit("doctor/update_search",val)
         // this.thr_search()
      }
   },

   mounted () {
       this.$store.dispatch('gcs/search')
       return;
   }
}
</script>