<template>
    <v-layout class="fill-height" column>
      <v-card class="grow">
         <v-layout column ma-3>
             <v-flex xs12>
                 <h3 class="title mb-2">INFORMASI SPECIMEN :</h3>
             </v-flex>

             <v-flex xs12>
                 <v-layout row>
                     <v-flex xs4>
                         <v-text-field
                            label="Durasi Sampling"
                            outline
                            v-model="duration_sampling"
                            readonly
                            hide-details
                         ></v-text-field>
                     </v-flex>

                     <v-flex xs8 ml-2>
                         <v-text-field
                            label="Petugas Sampling"
                            outline
                            v-model="user_sampling"
                            readonly
                            hide-details
                         ></v-text-field>
                     </v-flex>
                 </v-layout>

             </v-flex>

             <v-flex xs12 mt-1>
                 <v-layout row>
                     <v-flex xs6>
                         <v-text-field
                            label="Petugas Verifikasi"
                            outline
                            v-model="user_verification"
                            readonly
                            hide-details
                         ></v-text-field>
                     </v-flex>

                     <v-flex xs6 ml-2>
                         <v-text-field
                            label="Catatan Verifikasi"
                            outline
                            v-model="verification_note"
                            readonly
                            hide-details
                         ></v-text-field>
                     </v-flex>
                 </v-layout>

             </v-flex>

             <v-divider class="mb-0 mt-2"></v-divider>

            <v-flex xs12>

                <v-layout row wrap v-show="verification_show">
                     <v-flex xs12 pt-2>
                        <v-card color="blue lighten-3 white--text" outlined flat v-show="true">
                            <v-card-text class="pt-2 pb-2">
                                <v-layout row wrap>
                                    <v-flex xs6>
                                        <p class="title mb-0 mt-2">Sampling Verification</p>
                                    </v-flex>
                                    <v-flex xs6 class="text-xs-right">
                                        
                                        <v-btn 
                                            :color="req_status_handling == 'N' ? 'red' : 'white'" 
                                            :dark="req_status_handling == 'N'"
                                            class="one-btn-icon mr-1 ma-0" @click="req_handling_notok">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn 
                                            :color="req_status_handling == 'Y' ? 'green' : 'white'" class="one-btn-icon ma-0" @click="req_handling_ok" 
                                            
                                            :dark="req_status_handling == 'Y'">
                                            <v-icon>done</v-icon>
                                        </v-btn>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>

                        <v-card v-if="false">
                            <v-card-text class="pb-2 pt-2">
                                <v-layout row wrap>
                                    <v-flex v-bind:class="this.reqs_handling.length <= 5 ? 'xs12' : 'xs6'">
                                        <v-layout row wrap>
                                            <v-flex xs12 v-for="(req, i) in reqs_odd_handling" v-bind:key="i">
                                            <v-checkbox :label="req.req_name" :value="req.req_id"
                                                hide-details
                                                class="mt-2"></v-checkbox>
                                            </v-flex>
                                        </v-layout>
                                        </v-flex>

                                        <v-flex xs6 v-if="this.reqs_handling.length > 5">
                                        <v-layout row wrap>
                                            <v-flex xs12 v-for="(req, i) in reqs_even_handling" v-bind:key="i">
                                            <v-checkbox :label="req.req_name" :value="req.req_id"
                                                hide-details
                                                class="mt-2"></v-checkbox>
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>

                                <v-layout row wrap>
                                    <v-flex xs12 pt-4>
                                    <v-textarea
                                        auto-grow
                                        label="Catatan"
                                        rows="3"
                                        outline
                                    ></v-textarea>
                                    </v-flex>
                                </v-layout>
                                
                            </v-card-text>
                        </v-card>

                        <v-card v-if="true">
                            <v-card-text class="pb-2 pt-2">
                                <v-btn :color="selected_reqs_handling.indexOf(req.req_id) > -1 ? 'red' : 'black'" outline flat depressed small dark
                                    v-for="(req, i) in reqs_handling" v-bind:key="i"
                                    class="mt-1 mr-1 ma-0">
                                    {{ req.req_name }}
                                </v-btn>
                            </v-card-text>
                        </v-card>

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

                <v-layout row wrap v-show="verification_show">
                     <v-flex xs12 pt-2>
                        <v-card color="blue lighten-3 white--text" outlined flat v-show="true">
                            <v-card-text class="pt-2 pb-2">
                                <v-layout row wrap>
                                    <v-flex xs6>
                                        <p class="title mb-0 mt-2">Pre Analitik</p>
                                    </v-flex>
                                    <v-flex xs6 class="text-xs-right">
                                        <v-btn 
                                            :color="req_status_process == 'N' ? 'red' : 'white'"
                                            :dark="req_status_process == 'N'"
                                            class="one-btn-icon mr-1 ma-0" @click="req_process_notok">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn 
                                            :color="req_status_process == 'Y' ? 'green' : 'white'" 
                                            class="one-btn-icon ma-0" @click="req_process_ok" 
                                            :dark="req_status_process == 'Y'">
                                            <v-icon>done</v-icon>
                                        </v-btn>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>

                        <v-card v-if="true">
                            <v-card-text class="pb-2 pt-2">
                                <v-btn :color="selected_reqs_process.indexOf(req.req_id) > -1 ? 'red' : 'black'" outline flat depressed small dark
                                    v-for="(req, i) in reqs_process" v-bind:key="i"
                                    class="mt-1 mr-1 ma-0">
                                    {{ req.req_name }}
                                </v-btn>
                            </v-card-text>
                        </v-card>

                        <v-card v-if="false">
                            <v-card-text class="pb-2 pt-2">
                                <v-layout row wrap>
                                    <v-flex v-bind:class="this.reqs_process.length <= 5 ? 'xs12' : 'xs6'">
                                        <v-layout row wrap>
                                            <v-flex xs12 v-for="(req, i) in reqs_odd_process" v-bind:key="i">
                                            <v-checkbox :label="req.req_name" :value="req.req_id"
                                                hide-details
                                                class="mt-2"></v-checkbox>
                                            </v-flex>
                                        </v-layout>
                                        </v-flex>

                                        <v-flex xs6 v-if="this.reqs_process.length > 5">
                                        <v-layout row wrap>
                                            <v-flex xs12 v-for="(req, i) in reqs_even_process" v-bind:key="i">
                                            <v-checkbox :label="req.req_name" :value="req.req_id"
                                                hide-details
                                                class="mt-2"></v-checkbox>
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>

                                <v-layout row wrap>
                                    <v-flex xs12 pt-4>
                                    <v-textarea
                                        auto-grow
                                        label="Catatan"
                                        rows="3"
                                        outline
                                    ></v-textarea>
                                    </v-flex>
                                </v-layout>
                                
                            </v-card-text>
                        </v-card>

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

                

                <v-layout row wrap v-show="verification_show">
                     <v-flex xs12 pt-2>
                        <v-card color="blue lighten-3 white--text" outlined flat v-show="true">
                            <v-card-text class="pt-2 pb-2">
                                <v-layout row wrap>
                                    
                                    <v-flex xs12 class="text-xs-right">
                                        <v-btn color="red" 
                                            :dark="btn_process_enabled"
                                            class="mr-1 ma-0"
                                            @click="reject"
                                            :disabled="!btn_process_enabled">
                                            REJECT
                                        </v-btn>

                                        <v-btn color="green" class="ma-0" 
                                            :dark="btn_process_enabled"
                                            @click="verify"
                                            :disabled="!btn_process_enabled">
                                            PROSES
                                        </v-btn>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>

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

      </v-card>
   </v-layout>
</template>

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

    computed : {
        data () {
            let x = this.$store.state.handling_patient.selected_patient.data
            if (typeof x == "undefined")
                return {clott_checked:false,lipemik_checked:false,lisis_checked:false,
                    clott_note:"",lipemik_note:"",lisis_note:""}

            x.clott_checked = x.clott == "Y" ? true : false
            x.lipemik_checked = x.lipemik == "Y" ? true : false
            x.lisis_checked = x.lisis == "Y" ? true : false

            return x
        },

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

        user_sampling () {
            let x = this.$store.state.handling_patient.selected_patient
            if (typeof x.user_sampling == "undefined")
                return '-'

            return 'Sampling : ' + x.user_sampling + ' / Receive : ' + x.user_receive
        },

        duration_sampling () {
            let x = this.$store.state.handling_patient.selected_patient
            if (typeof x.sampling_duration == "undefined")
                return '0'

            return Math.round(moment.duration(x.sampling_duration).asMinutes()) + ' menit'
        },

        user_verification () {
            let x = this.$store.state.handling_patient.selected_patient
            if (typeof x.user_verification == "undefined")
                return '-'

            return x.user_verification
        },

        verification_note () {
            let x = this.$store.state.handling_patient.selected_patient
            if (typeof x.verification_note == "undefined")
                return '-'

            return x.verification_note
        },

        note : {
            get () {
                let x = this.$store.state.handling_patient.selected_patient.data
                if (typeof x == "undefined")
                    return ""

                return x.note
            },
            set (v) {
                this.$store.commit('handling_patient/update_verification_note', v)
            }
        },

        verification_show : {
            get () {
                return this.$store.state.handling_patient.verification_show
            },
            set (v) {
                this.$store.commit('handling_patient/update_verification_show', v)
            }
        },

        reqs_handling () {
            return this.$store.state.handling_patient.reqs
        },

        reqs_process () {
            return this.$store.state.handling_process_patient.reqs
        },

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

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

        selected_reqs_handling () {
            return this.$store.state.handling_patient.selected_reqs
        },

        selected_reqs_process () {
            return this.$store.state.handling_process_patient.selected_reqs
        },

        reqs_odd_handling () {
            if (!this.reqs_handling) return []
            if (this.reqs_handling.length <= 5) return this.reqs_handling
            if (this.reqs_handling <= 10) return this.reqs_handling.slice(0,4)
        
            let x = Math.ceil(this.reqs_handling.length / 2)
            return this.reqs_handling.slice(0, x-1)
        },

        reqs_even_handling () {
            if (!this.reqs_handling) return []
            if (this.reqs_handling.length <= 5) return []
            if (this.reqs_handling.length <= 10) return this.reqs_handling.slice(5, this.reqs_handling.length-1)

            let x = Math.ceil(this.reqs_handling.length / 2)
            return this.reqs_handling.slice(x, this.reqs_handling.length-1)
        },

        reqs_odd_process () {
            if (!this.reqs_process) return []
            if (this.reqs_process.length <= 5) return this.reqs_process
            if (this.reqs_process <= 10) return this.reqs_process.slice(0,4)
        
            let x = Math.ceil(this.reqs_process.length / 2)
            return this.reqs_process.slice(0, x-1)
        },

        reqs_even_process () {
            if (!this.reqs_process) return []
            if (this.reqs_process.length <= 5) return []
            if (this.reqs_process.length <= 10) return this.reqs_process.slice(5, this.reqs_process.length-1)

            let x = Math.ceil(this.reqs_process.length / 2)
            return this.reqs_process.slice(x, this.reqs_process.length-1)
        },

        btn_process_enabled () {
            if (this.req_status_handling == 'X' || this.req_status_process == 'X')
                return false
            return true
        }
    },

    methods : {
        req_handling_ok () {
            this.$store.commit('handling_patient/update_req_status', {req_status:'Y', reqs:this.reqs_handling})
            this.$store.commit('handling_patient/update_selected_reqs', [])
        },

        req_handling_notok () {
            this.$store.commit('handling_patient/update_dialog_requirement', true)
        },

        req_process_ok () {
            this.$store.commit('handling_process_patient/update_req_status', {req_status:'Y', reqs:this.reqs_process})
            this.$store.commit('handling_process_patient/update_selected_reqs', [])
        },

        req_process_notok () {
            this.$store.commit('handling_process_patient/update_dialog_requirement', true)
        },

        verify () {
            this.$store.dispatch('handling_patient/verify')
        },

        reject () {
            this.$store.dispatch('handling_patient/reject')
        }
    }
}
</script>