<template>
        
    <v-card flat>
        <v-layout row wrap>
            <v-flex xs12>
                <v-layout>

                    <v-flex xs2>
                        <v-img
                            :src="patient_photo"
                            aspect-ratio="1"
                            class="grey lighten-2 elevation-2"
                        >
                    </v-flex>

                    <v-flex xs10 pl-2>
                        <v-layout row wrap>
                            <v-flex xs6>
                                <v-layout column>
                                    <v-flex>
                                        <v-layout row wrap>
                                            <v-flex xs6>
                                                <h5 class="headline">{{ labno }}</h5>
                                            </v-flex>
                                            <v-flex xs6 class="text-xs-right">
                                                <v-btn
                                                    :color="btn_call.color"
                                                    class="pr-2 pl-2 ml-0 mr-1 one-btn-icon"
                                                    
                                                    @click="call(btn_call.act)"
                                                    :disabled="!btn_order_enable || !btn_call.enable"
                                                    :dark="btn_order_enable  && btn_call.enable">
                                                    <span :class="btn_call.icon"></span>
                                                        
                                                </v-btn>

                                                <v-btn
                                                    color="blue"
                                                    class="pr-2 pl-2 ml-0 one-btn-icon"
                                                    @click="process()"
                                                    :disabled="!btn_process_enable"
                                                    :dark="btn_process_enable"
                                                    v-show="btn_process_show">
                                                    <span class="icon-process"></span>
                                                </v-btn>

                                                <v-btn
                                                    color="orange"
                                                    class="pr-2 pl-2 ml-0 one-btn-icon"
                                                    @click="recall()"
                                                    v-show="btn_recall_show"
                                                    dark>
                                                    <span class="icon-speaker"></span>
                                                </v-btn>

                                        </v-flex>
                                        </v-layout>
                                        
                                        
                                    </v-flex>
                                    <v-flex pt-3>
                                        <v-layout row wrap>
                                            
                                            <v-text-field
                                                v-model="mr"
                                                label="No RM"
                                                readonly
                                                hide-details
                                            >
                                            </v-text-field>
                                            
                                            
                                        </v-layout>
                                        
                                    </v-flex>
                                    <v-flex>
                                        <v-text-field
                                            v-model="name"
                                            label="Nama"
                                            readonly
                                            hide-details
                                        >
                                        </v-text-field>
                                    </v-flex>
                                    
                                    
                                    
                                </v-layout>
                            </v-flex>

                            <v-flex xs6 pl-2>
                                <v-layout column>
                                    <v-flex>
                                        <v-layout row>
                                            <v-flex xs6>
                                                <v-text-field
                                                    v-model="dob"
                                                    label="Tanggal lahir"
                                                    readonly
                                                    hide-details
                                                >
                                                </v-text-field>
                                            </v-flex>
                                            <v-flex xs6 pl-1>
                                                <v-text-field
                                                    v-model="age"
                                                    label="Umur"
                                                    readonly
                                                    hide-details
                                                >
                                                </v-text-field>
                                            </v-flex>
                                        </v-layout>
                                        
                                    </v-flex>

                                    <v-flex>
                                        <v-text-field
                                            v-model="phone"
                                            label="HP"
                                            readonly
                                            hide-details
                                        >
                                        </v-text-field>
                                    </v-flex>

                                    <v-flex>
                                        

                                        <v-btn
                                        color="orange"
                                        :dark="btn_order_enable && btn_order_enable_by_call"
                                        class="mt-3 one-btn-icon"
                                        
                                        @click="print_barcode"
                                        :disabled="!btn_order_enable || !btn_order_enable_by_call">
                                            <span class="icon-barcode"></span>
                                        </v-btn>
                                        
                                        <v-btn
                                        color="brown"
                                        :dark="btn_order_enable && btn_order_enable_by_call"
                                        class="mt-3"
                                        
                                        @click="update_dialog_supervisor"
                                        :disabled="!btn_order_enable || !btn_order_enable_by_call">
                                            Catatan SPV
                                        </v-btn>
                                        
                                    </v-flex>
                                </v-layout>
                            </v-flex>

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

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

            <v-flex xs12 pt-1>
                <v-layout row>
                    <v-flex xs2>
                        <one-field-verification
                            label="Foto sesuai dengan pasien"
                            :value="ver_photo.checked"
                            :note="ver_photo.note"
                            @change="update_ver_photo"
                            v-if="if_ver_photo"
                            :disabled="!btn_order_enable || !btn_order_enable_by_call"
                        >
                        </one-field-verification>
                    </v-flex>
                    <v-flex xs5 pl-1>
                        <v-textarea
                            auto-grow
                            label="Catatan FO"
                            rows="1"
                            :value="note_fo"
                            readonly
                            outline
                            class="mb-0"
                            hide-details
                        ></v-textarea>
                    </v-flex>

                    <v-flex xs5 pl-1>
                        <v-textarea
                            auto-grow
                            label="Catatan Sampling"
                            rows="1"
                            v-model="note_sampling"
                            outline
                            hide-details
                            :disabled="!btn_order_enable || !btn_order_enable_by_call"
                        ></v-textarea>
                    </v-flex>

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

        <one-sampling-supervisor></one-sampling-supervisor>
    </v-card>
                
    
</template>

<style scoped>
.v-text-field--outline>.v-input__control>.v-input__slot {
    min-height: 62px;
}
.one-btn-icon { font-size: 1.5em }
</style>

<script>
module.exports = {
	components : {
        'one-field-verification' : httpVueLoader('./../../common/oneFieldVerification.vue'),
        'one-sampling-supervisor' : httpVueLoader('./oneSamplingSupervisorNote.vue')
    },
    
    data () {
      return {
        
      }
    },

    computed : {
        mr () {
            return this.$store.state.patient.selected_patient.mr;
        },

        name () {
            return this.$store.state.patient.selected_patient.name;
        },

        dob () {
            try {
                return this.$store.state.patient.selected_patient.dob.split('-').reverse().join('-');
            } catch(e) {
                console.log(e.message)
                return '-';
            }
            
        },

        phone () {
            return this.$store.state.patient.selected_patient.phone;
        },

        labno () {
            return this.$store.state.patient.selected_patient.lab_no
        },

        age () {
            return this.$store.state.patient.selected_patient.age
        },

        sex () {
            return this.$store.state.patient.selected_patient.sex
        },

        ver_photo : {
            get () {
                return this.$store.state.sampling.ver_photo
            },
            set (v) {
                this.$store.commit('sampling/update_ver_photo', v)
                return
            }
        },

        note_sampling : {
            get () {
                return this.$store.state.sampling.note_sampling
            },
            set (v) {
                this.$store.commit('sampling/update_note_sampling', v)
                return
            }
        },

        note_fo () {
            return this.$store.state.sampling.note_fo
        },

        if_ver_photo () {
            return this.$store.state.sampling.if_ver_photo
        },

        btn_order_enable () {

            if (this.$store.state.patient.selected_patient.order_id) {
                let x = this.$store.state.patient.patients
                let y = {}
                for (let i in x) {
                    if (x[i].T_OrderHeaderID == this.$store.state.patient.selected_patient.order_id)
                        y = x[i]
                }
                    
                if (y.status_code == "Y")
                    return false
                    
                if (this.$store.state.patient.selected_patient.order_id != 0)
                    return true
            }
                
            return false
        },

        btn_order_enable_by_call () {
            if (this.call_status != 'QUE.Sampling.Process')
                return false

            return true
        },

        btn_call () {
            let x = this.$store.state.queue.call_status
            if (x == null || x == 'QUE.Sampling.Skip') 
                { return { text: "Panggil", color: "green", act: "CALL", enable: true, icon: "icon-speaker" } }
            else if (x == 'QUE.Sampling.Call') 
                { return { text: "Skip", color: "orange", act: "SKIP", enable: true, icon: "icon-skip" } }
            else if (x == 'QUE.Sampling.Process') 
                { return { text: "Done", color: "blue", act: "DONE", enable: true, icon: "icon-check" } }
            else
                { return { text: "Done", color: "blue", act: "DONE", enable: false, icon: "icon-check" } }
        },

        btn_process_enable () {
            let x = this.$store.state.queue.call_status
            if (x == 'QUE.Sampling.Call')
                return true

            return false
        },

        btn_process_show () {
            let x = this.$store.state.queue.call_status
            if (x == 'QUE.Sampling.Done')
                return false

            return true
        },

        btn_recall_show () {
            return !this.btn_process_show
        },

        req_status () {
            return this.$store.state.patient.req_status
        },

        patient_photo () {
            
            let x = this.$store.state.patient.selected_patient.photo
            if (x != null)
                return x

            return "https://www.sgm-inc.com/wp-content/uploads/2014/06/no-profile-male-img.gif"
        },

        call_status () {
            return this.$store.state.queue.call_status
        },

        btn_req_enabled () {
            return this.btn_process_show
        }
    },

    methods : {
        update_ver_photo (v) {
            this.ver_photo = v
        },

        update_dialog_supervisor () {
            this.$store.commit('sampling/update_supervisor_dialog_is_active', true)
        },

        call (act) {
            this.$store.commit('queue/update_act', act)
            this.$store.dispatch('queue/call')
        },

        process () {
            this.$store.commit('queue/update_act', 'PROCESS')
            this.$store.dispatch('queue/call')
        },

        recall () {
            this.$store.commit('queue/update_act', 'CALL')
            this.$store.dispatch('queue/recall')
        },

        print_barcode () {
            this.$store.commit('sampling/update_dialog_barcode', true)
        },

        sampleReq () {
            this.$store.commit('sampling/update_dialog_requirement', true)
        },

        sampleReqOK () {
            this.$store.commit('sampling/update_selected_requirements', [])
            // this.$store.dispatch('sampling/save_requirement', 'Y')

            this.$store.commit('patient/update_req', {req_status:'Y', reqs:[]})
        }
    }
}
</script>
