<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-divider class="mb-3 mt-3"></v-divider>

            <v-flex xs12>
                <!-- <v-layout row wrap>
                    <v-flex xs12>
                        <v-btn color="red" dark @click="reject" v-show="verification_show">
                            <v-icon>clear</v-icon>
                        </v-btn>
                        <v-btn color="blue" dark @click="verify" v-show="verification_show">
                            <v-icon>done</v-icon>
                        </v-btn>
                    </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 mt-2 mb-0">Specimen sudah sesuai ?</p>
                                    </v-flex>
                                    <v-flex xs6 class="text-xs-right">
                                        <v-btn color="red" dark class="one-btn-icon mr-1 ma-0" @click="reject">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn color="green" class="one-btn-icon ma-0" @click="verify" 
                                            dark>
                                            <v-icon>done</v-icon>
                                        </v-btn>
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>

                        <v-card>
                            <v-card-text>
                                <v-btn color="black" outline flat depressed small dark
                                    v-for="(req, i) in reqs" v-bind:key="i"
                                    class="mt-2 mr-2 ma-0">
                                    {{ req.req_name }}
                                </v-btn>
                            </v-card-text>
                        </v-card>
                     </v-flex>
                    
                    
                 </v-layout>
                 
                <v-layout row v-if="false">
                    
                    <v-flex xs6>
                        <v-layout column>
                            <v-flex xs12>
                                <one-field-verification
                                    label="Jenis sampel sesuai"
                                    :value="data.sample_checked"
                                    :note="data.sample_note"
                                    @change="update_data_sample"
                                    v-if="verification_show"
                                ></one-field-verification>
                            </v-flex>

                            <v-flex xs12 mt-2>
                                <one-field-verification
                                    label="Kuantitas OK"
                                    :value="data.quantity_checked"
                                    :note="data.quantity_note"
                                    @change="update_data_quantity"
                                    v-if="verification_show"
                                ></one-field-verification>
                            </v-flex>

                            <v-flex xs12 mt-2>
                                <one-field-verification
                                    label="Kualitas OK"
                                    :value="data.quality_checked"
                                    :note="data.quality_note"
                                    @change="update_data_quality"
                                    v-if="verification_show"
                                ></one-field-verification>
                            </v-flex>
                        </v-layout>
                    </v-flex>

                    <v-flex xs6 pl-2>
                        <v-layout column fill-height>
                            <v-flex xs12>
                                <v-textarea
                                auto-grow
                                label="Catatan"
                                rows="5"
                                v-model="note"
                                outline
                                v-show="verification_show"
                                ></v-textarea>
                            </v-flex>
                            <v-flex xs12>
                                <v-btn color="red" dark @click="reject" v-show="verification_show">TOLAK</v-btn>
                                <v-btn color="blue" dark @click="verify" v-show="verification_show">PROSES</v-btn>
                            </v-flex>
                        </v-layout>
                        
                    <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.verification_patient.selected_patient.data
            if (typeof x == "undefined")
                return {quality_checked:false,quantity_checked:false,sample_checked:false,
                    quality_note:"",quantity_note:"",sample_note:""}

            x.quality_checked = x.quality == "Y" ? true : false
            x.quantity_checked = x.quantity == "Y" ? true : false
            x.sample_checked = x.sample == "Y" ? true : false

            return x
        },

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

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

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

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

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

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

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

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

        reqs () {
            if (this.$store.state.verification_patient.selected_patient.reqs)
                return this.$store.state.verification_patient.selected_patient.reqs

            return []
        }
    },

    methods : {
        update_data_quality (v) {
            let data = { type:"quality", quality:v.checked?"Y":"N", quality_note:v.note }
            this.$store.commit('verification_patient/update_verification_data', data)
        },

        update_data_quantity (v) {
            let data = { type:"quantity", quantity:v.checked?"Y":"N", quantity_note:v.note }
            this.$store.commit('verification_patient/update_verification_data', data)
        },

        update_data_sample (v) {
            let data = { type:"sample", sample:v.checked?"Y":"N", sample_note:v.note }
            this.$store.commit('verification_patient/update_verification_data', data)
        },

        verify () {
            this.$store.commit('verification_patient/update_selected_requirements', [])
            this.$store.dispatch('verification_patient/verify')
        },

        reject () {
            this.$store.commit('verification_patient/update_dialog_requirement', true)
            // this.$store.dispatch('verification_patient/reject')
        },

        sampleReqOK () {
            this.$store.dispatch('verification_patient/save_requirement', "Y")
        },

        sampleReqNotOK () {
            this.$store.commit('verification_patient/update_dialog_requirement', true)
        }
    },

    mounted () {
        this.$store.dispatch('verification_patient/get_requirement')
    }
}
</script>