<template>
   <v-layout class="fill-height" column>
      
      <v-card   class="mb-2 pa-2 searchbox">
         <v-layout >
               <!-- <v-text-field class="xs6 ma-1"
                             label=""
                             placeholder="Pencarian"
                             single-line
                             outline
                             v-model="query_mou"
                             hide-details
                             ></v-text-field>

               <v-select class="xs6 ma-1" :items="companies" 
                  item-text="M_CompanyName"
                  item-value="M_CompanyID"
                  return-object
                  v-model="selected_company"
                  label="Company" outline   hide-details></v-select> -->
            <v-text-field class="xs6 ma-1"
                        label=""
                        placeholder="Pencarian"
                        single-line
                        outline
                        v-model="query_price"
                        hide-details
                        ></v-text-field>
            <v-btn class="xs3 ma-1" color="success"  @click="search_price" dark>Cari</v-btn>
            <v-btn class="xs3 ma-1" color="primary"  @click="add" :disabled="!btn_add_enabled" :dark="btn_add_enabled" >Tambah</v-btn>
            
            
            <!-- <v-btn class="xs3 ma-1" color="info"  @click="set" >Baru</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="prices"
                  :loading="isLoading"
                  :pagination.sync="pagination"
                   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_TestName }}</td>
                     <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.T_PriceRefAmount) }}</td>
                     <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
                        <v-btn icon @click="edit_price(props.item)" color="blue" dark class="ma-0"><v-icon>create</v-icon></v-btn>
                        <v-btn icon @click="del_price(props.item)" color="red" dark class="ma-0"><v-icon>clear</v-icon></v-btn>
                     </td>
                  </template>
                  <template>
                     <div class="text-xs-center">
                        <v-pagination
                           
                           :length="15"
                           :total-visible="7"
                        ></v-pagination>
                     </div>
                  </template>
               </v-data-table>
            </v-flex>
         </v-layout>
      </v-card>
       <one-md-price-ref-new-dialog></one-md-price-ref-new-dialog>
       <one-dialog-confirm :data="selected_price" v-if="refresh_confirm" @confirm="confirm_delete"></one-dialog-confirm>
   </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

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

</style>

<script>
module.exports = {
components : {
      'one-md-price-ref-new-dialog': httpVueLoader('./oneMdPriceRefNewDialog.vue'),
      'one-dialog-confirm': httpVueLoader('../../common/oneDialogConfirm.vue')
   },

   mounted() {
      // this.$store.dispatch("priceref/search_company")
   },

   methods : {
      one_money (p) {
         return window.one_money(p)
      },

      isSelected(p) {
         return false
      },

      search_price() {
         this.$store.dispatch("priceref/search_price")
      },

      selectMe(doc) {
         this.$store.commit('priceref/update_selected_price', doc)
      },

      add() {
         this.$store.commit('priceref/update_refresh_date', false)

         this.$store.commit('priceref/update_new_price', { amount: 0 })
         this.$store.commit('priceref/update_selected_px', {})

         this.$store.commit('priceref/update_edit_price', false)
         this.$store.commit('priceref/update_dialog_px_new', true)

         var x = this
         setTimeout(function() {
            x.$store.commit('priceref/update_refresh_date', true)
            delete x
         }, 100)
      },

      edit_price(data) {
         
         this.$store.commit('priceref/update_refresh_date', false)
         // this.$store.commit('priceref/update_others', {records:data.others, total:data.others.length})
         this.$store.commit('priceref/update_new_price', {
            amount: data.T_PriceRefAmount,
            start_date: data.T_PriceRefStartDate,
            end_date: data.T_PriceRefEndDate
         })
         this.$store.commit('priceref/update_selected_price', data)
         this.$store.commit('priceref/update_selected_px', data.px)
         this.$store.commit('priceref/update_edit_price', true)
         this.$store.commit('priceref/update_dialog_px_new', true)

         var x = this
         setTimeout(function() {
            x.$store.commit('priceref/update_refresh_date', true)
            delete x
         }, 100)
         
      },

      del_price(data) {
         this.refresh_confirm = false
         this.$store.commit('update_dialog_confirm', true)
         var x = this
         setTimeout(function() {
            x.refresh_confirm = true
         }, 100)
         
      },

      confirm_delete(data) {
         this.$store.dispatch('priceref/del_price', data.data.T_PriceRefID)
      }
   },
   computed: {
      prices : {
         get () {
            return this.$store.state.priceref.prices
         },
         set (v) {
            this.$store.commit('priceref/update_prices', v)
         }
      },

      selected_price : {
         get () {
            return this.$store.state.priceref.selected_price
         },
         set (v) {
            this.$store.commit('priceref/update_selected_price', v)
         }
      },

      query_price : {
         get () {
            return this.$store.state.priceref.query_price
         },
         set (v) {
            this.$store.commit('priceref/update_query_price', v)
         }
      },

      isLoading () {
         return false
      },

      btn_add_enabled () {
         if (this.$store.state.priceref.selected_mou.M_MouID)
            return true

         return false
      }
   },

   data() {
      return {
         headers: [
            {
               text: "NAMA",
               align: "left",
               sortable: false,
               value: "mr",
               width: "25%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "HARGA",
               align: "center",
               sortable: false,
               value: "lab",
               width: "10%",
               class: "pa-2 blue lighten-3 white--text"
            },
            {
               text: "ACTION",
               align: "center",
               sortable: false,
               value: "name",
               width: "15%",
               class: "pa-2 blue lighten-3 white--text"
            }
         ],
         
         pagination:{
            descending: false,
            page: 1,
            rowsPerPage: 5,
            sortBy: 'T_TestName',
            totalItems: this.$store.state.priceref.total_price
         },

         refresh_confirm : false
      };
   }
}
</script>
