<template>
   <v-layout class="fill-height" column>
      
      <v-card class="mb-2 pa-2 fill-height">
            <v-card-text class="grow pa-1">
                <v-layout >
                    <v-flex xs5>
                        <v-layout row wrap v-show="selected_order">
                            <!-- <v-flex xs12>
                                <v-text-field
                                    outline
                                    hide-details
                                    solo
                                    label="Scan Barcode Specimen"
                                    v-model="query_barcode"
                                    @keyup.native="barcodeMeUp"
                                ></v-text-field>

                                <hr class="mt-2">
                            </v-flex> -->

                            <v-flex xs12>
                                <v-select
                                    :items="couriers"
                                    v-model="selected_courier"
                                    item-value="M_CourierID"
                                    item-text="M_StaffName"
                                    return-object
                                    label="Pilih Kurir"
                                    hide-details
                                    outline
                                    :disabled="selected_order.T_OrderRefOutHeaderIsSent == 'Y'"
                                ></v-select>
                            </v-flex>

                            <v-flex xs12 pt-3>
                                <p class="body-1 mb-1">Tujuan pengiriman :</p>
                                <hr class="mt-1 mb-2">
                                <h3 class="title mb-1">{{ selected_order ? selected_order.company_name : '' }}</h3>
                                <p class="body-1 mb-1">{{ selected_order ? selected_order.company_address : '' }}</p>
                                <p class="body-1 mb-1">Kel. {{ selected_order ? selected_order.M_KelurahanName : '' }}</p>
                                <p class="body-1 mb-1">Kec. {{ selected_order ? selected_order.M_DistrictName : '' }}</p>
                                <p class="body-1 mb-1">{{ selected_order ? selected_order.M_CityName : '' }}</p>
                                <hr class="mt-2 mb-2">
                            </v-flex>

                            

                            <v-flex xs12 class="text-xs-right">
                                <v-spacer></v-spacer>
                                <!-- <v-btn color="orange"  
                                    @click="printDO"
                                    dark>Cetak SJ</v-btn> -->

                                <v-btn color="success" 
                                    :disabled="!selected_courier.M_CourierID || selected_sample_length == 0" 
                                    :dark="selected_sample_length > 0 && selected_courier.M_CourierID > 0"
                                    @click="send">Serahkan ke Kurir</v-btn>
                            </v-flex>
                        </v-layout>
                        
                    </v-flex>

                    <v-flex xs7 pl-3>
                        <v-layout row wrap>
                            <v-flex xs12>
                                <v-text-field
                                    outline
                                    hide-details
                                    solo
                                    label="Scan Barcode Specimen"
                                    v-model="query_barcode"
                                    @keyup.native="barcodeMeUp"
                                    :disabled="selected_order.T_OrderRefOutHeaderIsSent == 'Y'"
                                ></v-text-field>
                                <hr class="mt-2 mb-1">
                            </v-flex>
                            <v-flex xs12>
                                
                                <v-btn color="success" v-for="(sample, n) in samples" 
                                    v-bind:key="n"
                                    small
                                    class="mr-2 mb-2 ma-0"
                                    :outline="sample.selected == 'N'"
                                    :dark="sample.selected == 'Y'"
                                    :disabled="selected_order.T_OrderRefOutHeaderIsSent == 'Y'"
                                    block
                                    @click="barcodeClick(sample)">{{sample.T_BarcodeLabBarcode}} - {{sample.T_SampleTypeName}}</v-btn>
                            </v-flex>
                        </v-layout>
                        
                    </v-flex>

                    
                </v-layout>
            </v-card-text>
         
            <!-- <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="success" 
                                    :disabled="!selected_courier.M_CourierID || selected_sample_length == 0" 
                                    :dark="selected_sample_length > 0 && selected_courier.M_CourierID > 0"
                                    @click="send">Kirim</v-btn>
            </v-card-actions> -->

      </v-card>
      
      
        <v-snackbar
            v-model="snackbar"
            top
        >
            Order berhasil diserahkan ke kurir
            <v-btn flat color="red" @click.native="snackbar = false">Tutup</v-btn>
        </v-snackbar>

        <one-process-ref-out-status-sent></one-process-ref-out-status-sent>
        <one-process-ref-out-status-print-dialog></one-process-ref-out-status-print-dialog>
   </v-layout>
</template>

<style scoped>


</style>

<script>
module.exports = {
    components : {
        'one-process-ref-out-status-sent' : httpVueLoader('./oneProcessRefOutStatusSent.vue'),
        'one-process-ref-out-status-print-dialog' : httpVueLoader('./oneProcessRefOutStatusPrintDialog.vue')
    },
    data() {
        return {       
            query_barcode: "",
            pagination:{
                descending: false,
                page: 1,
                rowsPerPage: 5,
                sortBy: 'T_OrderRefOutHeaderNumber',
                totalItems: this.$store.state.order.total_order
            },

            height: 50
        };
   },

   computed: {
        samples () {
            return this.$store.state.order.samples
        },

        couriers () {
            return this.$store.state.order.couriers
        },
      
        selected_courier : {
            get () { return this.$store.state.order.selected_courier },
            set (v) { this.$store.commit('order/update_selected_courier', v) }
        },

        selected_sample_length () {
            let n = 0
            for (let i in this.samples) {
                if (this.samples[i].selected == "Y")
                    n++
            }

            return n
        },

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

        snackbar : {
            get () { return this.$store.state.order.snackbar },
            set (v) { this.$store.commit('order/update_snackbar', v) }
        }
   },

   mounted() {
       this.$store.dispatch('order/search_courier')
        
   },

   methods : {
        barcodeMeUp(e) {
            if (e.which == 13) {
                return this.barcodeMe(e)
            }
        },

        barcodeMe (e) {
            let x = this.query_barcode
            let y = this.samples
            let found = false
            for (let i in y) {
                    if (y[i].T_BarcodeLabBarcode == x) {
                        found = true
                        if (y[i].selected == 'N')
                            y[i].selected = "Y"
                        else
                            alert('Sampel tersebut sudah dibarcode !!!')
                    }
            }

            if (found)
                this.$store.commit('order/update_samples', {records:y})       
            else
                alert('No barcode Found !!!')

            e.target.select()
        },

        barcodeClick (x) {
            x.selected = x.selected == "Y" ? "N" : "Y"
            let y = this.samples
            for (let i in y) {
                if (y[i].T_BarcodeLabBarcode == x.T_BarcodeLabBarcode)
                    y[i] = x
            }

            this.$store.commit('order/update_samples', {records:y})
        },

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

        printDO () {
            return
        }
   },

   
   

   watch : {
   
   
   }
}
</script>
