<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
             <v-flex xs5>
                <v-select
                    :items="statuses"
                    v-model="selected_status"
                    item-value="val"
                    item-text="label"
                    outline
                    hide-details
                    class="ma-1"
                ></v-select>
            </v-flex>

            <v-flex xs4>
                <v-select
                    :items="ref_type"
                    v-model="is_internal"
                    item-value="val"
                    item-text="label"
                    outline
                    hide-details
                    class="ma-1"
                ></v-select>
            </v-flex>

            <v-flex xs3>
                 <v-text-field class="ma-1"
                    label=""
                    placeholder="Pencarian"
                    single-line
                    outline
                    v-model="query"
                    hide-details
                    :height="height"
                    @keyup.native="searchUp"
                    ></v-text-field>
             </v-flex>
            
            <v-btn class="xs3 ma-1 one-btn-icon" color="success"  @click="search">
               <span class="icon-search"></span>
            </v-btn>
            <!-- <v-spacer></v-spacer>
            <v-btn color="primary" :disabled="selected_order.length < 1" :dark="selected_order.length > 0" class=" one-btn-icon" @click="sendSome">
                <v-icon>send</v-icon>
            </v-btn> -->
         </v-layout>
      </v-card>
      <v-card >
         <v-layout row>
            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
               <v-data-table 
                    :headers="headers" 
                    :items="orders"
                    :loading="isLoading"
                    hide-actions
                    class="elevation-1">
                  <template slot="items" slot-scope="props">
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ (props.item.T_OrderRefOutHeaderDate.split(" "))[0].split('-').reverse().join('-') }}</td>
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.company_name }}</td>
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderRefOutHeaderNumber }}</td>
                        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_OrderRefOutHeaderIsSent == 'Y' ? 'Sudah Serah Terima' : 'Belum Serah Terima' }}</td>
                        <td class="text-xs-left pr-1 pl-1 pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                            <v-btn color="orange" small dark class="ma-0" v-show="props.item.T_OrderRefOutHeaderIsSent == 'Y'" @click="printSJMe(props.item)">Cetak SJ</v-btn>
                        </td>
                     
                     
                  </template>
                        

                        
                    
               </v-data-table>
               <v-pagination
                            v-model="curr_order_page"
                            :length="total_order_page"
                            :total-visible="5"
                            @input="change_page"
                        ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>
      
      <v-snackbar
          v-model="snackbar"
          top
      >
          Order berhasil dikirim
          <v-btn flat color="red" @click.native="snackbar = false">Tutup</v-btn>
      </v-snackbar>

   </v-layout>
</template>

<style scoped>
table tr th:first-child {
    background-color: #90caf9!important;
    border-color: #90caf9!important;
}
/* .searchbox .v-input.v-text-field .v-input__slot{
   min-height:50px;
} */
/* .v-autocomplete.v-text-field--enclosed:not(.v-text-field--solo):not(.v-text-field--single-line) .v-select__slot>input {
    margin-top: 14px;
} */
.searchbox .v-btn {
   min-height:50px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}

.searchbox .one-btn-icon {
   font-size: 1.5em
}

/* Overwrite */
.v-text-field--box>.v-input__control>.v-input__slot,
.v-text-field--full-width>.v-input__control>.v-input__slot,
.v-text-field--outline>.v-input__control>.v-input__slot {
    align-items: stretch;
    min-height: 50px
}

.v-text-field--box .v-label, .v-text-field--full-width .v-label, .v-text-field--outline .v-label {
    top: 12px;
}

.v-text-field.v-text-field--enclosed .v-input__append-inner {
   margin-top: 10px;
}

.v-text-field--outline.v-text-field--single-line input {
    margin-top: 6px;
}

.v-select.v-text-field--enclosed:not(.v-text-field--single-line) .v-select__selections {
    padding-top: 6px;
}
</style>

<script>
module.exports = {
    components : {
    },

    data() {
        return {
            headers: [
                {
                    text: "TANGGAL",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "13%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "TUJUAN RUJUKAN",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "22%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NOMOR RUJUKAN",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "20%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "STATUS",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "20%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "CETAK",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "10%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],
         
            pagination : {
                descending: false,
                page: 1,
                rowsPerPage: 5,
                sortBy: 'T_OrderRefOutHeaderNumber',
                totalItems: this.$store.state.order.total_order
            },

            ref_type : [
                {val:'N', label:'Rujuk Eksternal'},
                {val:'Y', label:'Rujuk Internal'}
            ],

            height: 50
        };
    },

    computed: {

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

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

        isLoading () {
            return false
        },

        is_loading () {
            return false
        },

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

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

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

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

        is_internal : {
            get () { return this.$store.state.order.is_internal },
            set (v) { 
                this.$store.commit('order/update_is_internal', v) 
                this.search()
            }
        },

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

        selected_status : {
            get () { return this.$store.state.order.selected_status },
            set (v) { 
                this.$store.commit('order/update_selected_status', v)
                this.search()
            }
        }
   },

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

   methods : {
        isSelected(p) {
            let x = this.$store.state.order.selected_order
            if (!x)
                return false
                
            if (x.T_OrderRefOutHeaderID == p.T_OrderRefOutHeaderID)
                return true
            
            return false
        },

        search() {
            this.$store.dispatch("order/search")
        },

        searchUp(e) {
            if (e.which == 13) {
                this.search()
            }
        },

        selectMe(doc) {
            this.$store.commit('order/update_selected_order', doc)
            this.$store.dispatch('order/search_sample')

            this.$store.commit('order/update_selected_courier', {M_CourierID:doc.M_CourierID, M_StaffName:doc.M_StaffName})
        },

        one_money (x) {
            return window.one_money(x)
        },

        change_page(x) {
            this.curr_order_page = x
            this.$store.dispatch('order/search')
        },

        sendMe (doc) {
            this.$store.dispatch("order/send", doc.T_OrderRefOutID)
        },

        sendSome (doc) {
            if (this.selected_order.length < 1) {
                alert('Tidak ada yang perlu di kirim')
                return
            }

                let x = []
                for (let i in this.selected_order)
                    x.push(this.selected_order[i].T_OrderRefOutID)
            
                this.$store.dispatch("order/send", x.join(","))
        },

        printSJMe (x) {
            this.$store.commit('order/update_dialog_print', true);
        }
   },

   watch : {
   }
}
</script>
