<template>
    <v-layout class="mb-2 mt-2" column >
        <v-card v-if="xsampletypes.length > 0">
            <v-layout row>
                <v-flex  xs12>
                    <v-subheader> 
                        <span class="font-weight-black">LEGENDA : </span> 
                        <v-btn depressed color="warning"><v-icon left>alarm</v-icon> Waktu Proses </v-btn> 
                        <v-btn depressed color="success"><v-icon left>alarm</v-icon> Waktu Selesai </v-btn>
                        <v-flex text-md-right>
                            <span  @click="printBarcodeGroup()" style="font-size:24px" class="icon-medium-fill-base-small xs1 white--text brown icon-barcode"></span>
                        </v-flex>
                    </v-subheader>
                    <v-divider></v-divider>
                    <v-layout pa-2 row wrap>
                        <v-flex xs5 v-for="sampletype in xsampletypes" mb-2 mr-3>
                            <v-layout>
                                <v-flex xs12>
                                    <v-card style="border:1px solid black" flat class="text">
                                        <v-layout pa-1>
                                            <v-flex md4>
                                            <v-img
                                                src= "/one-ui/libs/image/body.jpg"
                                                height="125px"
                                                contain
                                            ></v-img>
                                            </v-flex>
                                            <v-flex md8>
                                            <v-card-title style="padding-top:0;padding-left:2px">
                                                <div>
                                                    <div style="font-size:large" class="font-weight-light font-condensed pl-2">{{sampletype.T_SampleTypeName}}</div>
                                                    
                                                    <v-btn depressed v-if="sampletype.status === 'N'" color="warning"><v-icon left>alarm</v-icon>00-00-0000 00:00</v-btn>
                                                    <v-btn depressed v-if="sampletype.status === 'N'" color="success"><v-icon left>alarm</v-icon>00-00-0000 00:00</v-btn>
                                                    
                                                    <v-btn depressed v-if="sampletype.status === 'P'" color="warning"><v-icon left>alarm</v-icon>{{sampletype.process_date}} {{sampletype.process_time}}</v-btn>
                                                    <v-btn depressed v-if="sampletype.status === 'P'" color="success"><v-icon left>alarm</v-icon>00-00-0000 00:00</v-btn>
                                                    
                                                    <v-btn depressed v-if="sampletype.status === 'D' || sampletype.status === 'V'" color="warning"><v-icon left>alarm</v-icon>{{sampletype.process_date}} {{sampletype.process_time}}</v-btn>
                                                    <v-btn depressed v-if="sampletype.status === 'D' || sampletype.status === 'V'" color="success"><v-icon left>alarm</v-icon>{{sampletype.done_date}} {{sampletype.done_time}}</v-btn>
                                                </div>
                                            </v-card-title>
                                            </v-flex>
                                        </v-layout>
                                        <v-divider></v-divider>
                                        <v-card-actions class="pt-2 pb-2 pl-3 pr-3">
                                            <v-btn v-if="selected_patient.statusid === 0 || selected_patient.statusid === '0'  || selected_patient.statusid === 2 || selected_patient.statusid === '2'" depressed disabled block color="grey">Proses Sekarang</v-btn>
                                            <v-flex v-if="selected_patient.statusid === '3'" xs10>
                                                <v-btn @click="processSample(sampletype)" v-if="selected_patient.statusid === '3' && sampletype.status === 'N'" block color="warning">Proses Sekarang</v-btn>
                                                <v-btn @click="doneSample(sampletype)" v-if="selected_patient.statusid === '3' && sampletype.status === 'P'" block color="success">Selesai</v-btn>
                                            </v-flex>
                                            <v-flex v-if="selected_patient.statusid === '5'" xs10>
                                                <v-btn depressed disabled block color="grey">Selesai</v-btn>
                                            </v-flex>
                                            <v-flex xs2 v-if="selected_patient.statusid === '3' || selected_patient.statusid === '4' || selected_patient.statusid === '5'">
                                                <span  @click="printBarcode(sampletype)" style="font-size:24px" class="icon-medium-fill-base-small xs1 white--text brown icon-barcode"></span>
                                            </v-flex>
                                        </v-card-actions>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>
                        
                    </v-layout>
                </v-flex>
            </v-layout>          
        </v-card>
    </v-layout>
</template>

<style scoped>

</style>

<script>
module.exports = {
    data: () => ({
    
    }),
    computed: {
        xsampletypes(){
            return this.$store.state.samplecall.sampletypes
        },
        xstatus(){
            return this.$store.state.samplecall.selected_status
        },
        selected_patient(){
            return this.$store.state.samplecall.selected_patient
        },
    },
    methods : {
        processSample(sampletype){
            var patient = this.$store.state.samplecall.selected_patient
            var msg = "Anda yakin akan melakukan proses untuk "+sampletype.T_SampleTypeName+" dari "+patient.patient_fullname+" ? "
            this.$store.commit("samplecall/update_msg_action",msg)
            this.$store.commit("samplecall/update_act",'samplingprocess')
            this.$store.commit("samplecall/update_selected_sampletype",sampletype) 
            this.$store.commit("samplecall/update_dialog_action",true)
        },
        doneSample(sampletype){
            var patient = this.$store.state.samplecall.selected_patient
            var msg = "Anda yakin proses untuk "+sampletype.T_SampleTypeName+" dari "+patient.patient_fullname+" telah selesai ? "
            this.$store.commit("samplecall/update_msg_action",msg)
            this.$store.commit("samplecall/update_act",'samplingdone')
            this.$store.commit("samplecall/update_selected_sampletype",sampletype) 
            this.$store.commit("samplecall/update_dialog_action",true)
        },
        printBarcodeGroup(){
            var id = this.selected_patient.T_OrderHeaderID
            one_print_barcode_so_group(id)
        },
        printBarcode(sampletype){
            var id = sampletype.T_OrderDetailID
            one_print_barcode_so(id)
        },
        
    }
}
</script>
