<template>
    <v-card   class="mb-1 pa-1">
        <v-layout row>
            <v-flex xs4>
                <v-layout>
                    <one-date-picker
                        label="Tanggal"
                        :date="sdate"
                        data="0"
                        @change="changeDate"
                    ></one-date-picker>
                    <v-text-field class="flex xs8 ma-1"
                                label=""
                                placeholder="Pemeriksaan"
                                single-line
                                solo
                                hide-details
                                v-model="search"
                                @keyup.enter="keySearch"
                                ></v-text-field>
                </v-layout>
            </v-flex>

            <v-flex xs3 pt-1 pl-2>
                <v-select
                    :items="groups"
                    v-model="selected_group"
                    item-text="group_name"
                    item-value="group_id"
                    label="Grup Pemeriksaan"
                    return-object
                    solo
                    hide-details
                    @change="changeGroup"
                    clearable
                ></v-select>                
            </v-flex>
            <v-flex xs2>
                <v-layout>
                    <v-btn class="btn-search one-btn-icon ma-1" color="success" @click="search_px" >
                        <span class="icon-search"><span>
                    </v-btn>
                </v-layout>
            </v-flex>

            <v-flex xs3 class="text-xs-right">
                <v-btn
                    color="blue"
                    class="white--text ma-1"
                    @click="confirm_verifikasi"
                    >
                    Konfirm Verifikasi 
                    <v-icon right dark>save_alt</v-icon>
                </v-btn>
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
button {
    height: 48px;
}

.btn-search {
    font-size: 1.5em
}

</style>

<script>
module.exports = {
    components : {
        'one-date-picker' : httpVueLoader('./oneDatePicker.vue')
    },
    computed : {
       sdate: {
          get() { return this.$store.state.search_box.sdate }
          ,set(v) { this.$store.commit('search_box/update_sdate',v) }
       },
       search:{
          get() { return this.$store.state.search_box.search}
          ,set(v) { this.$store.commit('search_box/update_search',v) }
       },
       groups() {
          return this.$store.state.search_box.groups
       },
       selected_group: {
          get() { return this.$store.state.search_box.selected_group },
          set(v) { this.$store.commit('search_box/update_selected_group',v) }
       }
    },
    methods : {
       changeDate(o) {
          this.sdate = o.new_date
          this.search_px()
       },
       keySearch(src) {
        this.search_px()  
       },
       changeGroup() {
          let self = this
          setTimeout( function() {
             self.search_px()
          },1)
       },
       async search_px() {
          let sel_group = this.$store.state.search_box.selected_group
          let group_id =0
          if (sel_group != undefined && sel_group.group_id != undefined) group_id = sel_group.group_id
          let search = this.$store.state.search_box.search 
          let sdate= this.$store.state.search_box.sdate
        
          
          this.$store.commit("list_px/update_selected_px",{})
          this.$store.commit("list_px/update_orders",[])
          let prm = { group_id : group_id , search : search, sdate: sdate, token: window.one_token() }
          await this.$store.dispatch("search_box/search_px", prm)
         let pxs = this.$store.state.search_box.pxs
         if (pxs.length > 0 ) {
            this.$store.commit("list_px/update_selected_px",pxs[0])
            let sdate = this.$store.state.search_box.sdate
            let prm = { nat_test_id : pxs[0].Nat_TestID, sdate: sdate , token: window.one_token() }
            this.$store.dispatch("list_px/search_order",prm)
         }
       },
       async confirm_verifikasi() {
       },
       async save_result() {
         // list change
         let orders = this.$store.state.list_px.orders
         let upd_order = _.filter(orders, function(it) {
            if (it.OriginalResult == null && (it.T_OrderDetailResult == "" || it.T_OrderDetailResult == null) ) return false
            return it.T_OrderDetailResult != it.OriginalResult
         })
         if ( upd_order ) {
            let prm = { orders : upd_order , token: window.one_token() }
            await this.$store.dispatch("list_order/save",prm)
            let msg = _.map(upd_order,"T_OrderHeaderLabNumber").join(", ")
            msg = 'Hasil <b>' + this.$store.state.list_px.selected_px.Nat_TestName + '</b> untuk No Reg. <b>' + msg + 
               ' </b>sudah di simpan'
            this.$store.commit("list_order/update_snackbar_info",msg) 
            this.$store.commit("list_order/update_snackbar",true) 
         }
          
       }
    },
    mounted () {
        this.$store.dispatch('search_box/search_group')
    }
}
</script>
