<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
             <v-flex xs7 pa-1>
                  <v-select
                      :items="types"
                      v-model="is_internal"
                      item-text="text"
                      item-value="val"
                      
                      hide-details
                      outline
                  ></v-select>
              </v-flex> 
             <v-flex xs5>
                 <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-flex  pt-1 pb-1 pl-2 pr-1 xs4>
                  <v-autocomplete
                     label="Perusahaan"
                     v-model="selected_company"
                     :items="companies"
                     :search-input.sync="query_company"
                     
                     auto-select-first
                     no-filter
                     return-object
                     clearable
                     item-text="M_CompanyName"
                     :loading="is_loading"
                     no-data-text="Pilih Company"
                     hide-details
                     outline
                     :height="height"
                     >
                     <template
                        slot="item"
                        slot-scope="{ item }"
                        >
                        <v-list-tile-content>
                           <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                           
                        </v-list-tile-content>
                     </template>

                  </v-autocomplete>
               </v-flex> -->

            <v-btn class="xs3 ma-1 one-btn-icon" color="success"  @click="search">
               <span class="icon-search"></span>
            </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="companies"
                  :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.company_name }}</td>
                     
                     
                  </template>
                        

                        
                    
               </v-data-table>
               <v-pagination
                            v-model="curr_company_page"
                            :length="total_company_page"
                            :total-visible="5"
                            @input="change_page"
                        ></v-pagination>
            </v-flex>
         </v-layout>
      </v-card>
   </v-layout>
</template>

<style scoped>
/* .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 : {
        'one-dialog-confirm': httpVueLoader('../../common/oneDialogConfirm.vue')
   },

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

   methods : {
      isSelected(p) {
         let x = this.$store.state.company.selected_company
         if (!x)
            return false
            
         if (x.company_id == p.company_id)
            return true
         
         return false
      },

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

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

      selectMe(doc) {
         this.$store.commit('company/update_selected_company', doc)

         // SELECTED ORDER = []
         this.$store.commit('patient/update_selected_order', [])
         this.$store.dispatch('patient/search')
      },

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

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

   computed: {

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

      companies : {
         get () {
            return this.$store.state.company.companies
         },
         set (v) {
            this.$store.commit('testref/update_companies', v)
         }
      },

      selected_company() {
         return this.$store.state.company.selected_company
      },

      isLoading () {
         return false
      },

      is_loading () {
         return false
      },

      dialog_confirm () {
         return this.$store.state.dialog_confirm
      },

      total_company_page () {
         return this.$store.state.company.total_company_page
      },

      curr_company_page : {
         get () { return this.$store.state.company.curr_company_page },
         set (v) { this.$store.commit('company/update_curr_company_page', v) }
      },

      is_internal : {
          get() { return this.$store.state.company.is_internal },
          set(v) { this.$store.commit('company/update_is_internal', v); this.search() }
      }
   },
   data() {
      return {
         headers: [
            {
               text: "NAMA COMPANY / CABANG",
               align: "left",
               sortable: false,
               value: "mr",
               width: "100%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'company_name',
            totalItems: this.$store.state.company.total_company
         },

         height: 50,
         types: [
             {val:'N', text:'Rujuk Eksternal'},
             {val:'Y', text:'Rujuk Internal'}
         ]
      };
   },

   watch : {
   
   
   }
}
</script>
