<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="600px">
      
      <v-card>
        <v-card-title>
          <span class="headline">Tambah Data Harga</span>
        </v-card-title>
        <v-card-text class="pt-0">
          <v-container grid-list-md pa-0>
            <v-layout row wrap>
                <v-flex xs10 pr-3>
                    <v-autocomplete
                        v-show="!state_edit"
                        label="Nama Test"
                        v-model="selected_px"
                        :items="pxs"
                        :search-input.sync="query_px"
                        
                        auto-select-first
                        no-filter
                        return-object
                        clearable
                        item-text="T_TestName"
                        :loading="is_loading"
                        no-data-text="Pilih Test"

                        ref="ref_px"
                        >
                        <template
                            slot="item"
                            slot-scope="{ item }"
                            >
                            <v-list-tile-content>
                                <v-list-tile-title v-text="item.T_TestName"></v-list-tile-title>
                                <v-list-tile-sub-title v-text="item.T_TestSasCode"></v-list-tile-sub-title>
                            </v-list-tile-content>
                        </template>

                    </v-autocomplete>

                     <v-text-field v-show="state_edit" label="Nama Test" readonly v-model="sel_T_TestName"></v-text-field>
                </v-flex>
                <v-flex xs2>
                  <v-checkbox
                    v-model="new_price_cito"
                    label="Cito ?"
                    :readonly="state_edit"
                  ></v-checkbox>
                </v-flex>
              <!-- <v-flex xs6>&nbsp;</v-flex> -->
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="new_price_amount" v-on:keyup="update_new_price_amount" solo label="" hide-details required reverse suffix="Harga"></v-text-field>
              </v-flex>

              <!-- <v-flex xs6>&nbsp;</v-flex> -->
              <v-flex xs6 sm6 md6>
                <v-text-field v-model="new_price_disc" v-on:keyup="update_new_price_disc" label="" hide-details required reverse solo suffix="Diskon (%)"></v-text-field>
              </v-flex>

              <!-- <v-flex xs6>&nbsp;</v-flex> -->
              <v-flex xs6 sm6 md6>
                <v-text-field v-model="new_price_discrp" v-on:keyup="update_new_price_discrp" label="" hide-details required reverse solo suffix="Diskon (Rp)"></v-text-field>
              </v-flex>

              <!-- <v-flex xs6>&nbsp;</v-flex> -->
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="new_price_subtotal" readonly label="" hide-details required reverse solo suffix="Sub Total"></v-text-field>
              </v-flex>

              <v-flex xs12 sm12 md12 pt-2 pb-2><v-divider></v-divider></v-flex>

              <!--<v-flex xs6>
                <v-select
                  :items="addons"
                  label="Item Tambahan"
                  item-text="T_AddonName"
                  item-value="T_AddonID"
                  v-model="selected_addon"
                  return-object
                  class="mt-0"
                >
                <template v-slot:append-outer>
                       
                        <v-btn icon flat color="blue" @click="add_other" :disabled="!selected_addon.T_AddonID" class="btn-outer"><v-icon>arrow_forward</v-icon></v-btn>
                      </template>

                <template v-slot:prepend>
                        <v-btn fab small color="green"  dark class="ml-0 btn-outer-2" @click="new_addon"><v-icon dark>add</v-icon></v-btn>
                        
                        
                      </template>
                </v-select>

                
              </v-flex>-->
              

              <!--<v-flex xs1>&nbsp;</v-flex>
              <v-flex xs5 sm5 md5>
                <v-layout column>
                  <v-flex v-for="(o, i) in others" v-bind:key="i">
                    <v-text-field v-model="o.price" :disabled="other_disabled(o)" v-on:keyup="update_other_price(i, o.price)" label="" hide-details required reverse solo :suffix="o.name">
                      <template v-slot:append-outer>
                        
                        <v-btn icon color="red" @click="remove_other(o)" flat class="ml-0 btn-outer"><v-icon>clear</v-icon></v-btn>
                      </template>

                    </v-text-field>
                    
                    
                  </v-flex>
                </v-layout>
                
              </v-flex>-->

              <v-flex xs12 sm12 md12>
                <v-text-field ref="ref_total" v-model="new_price_total" readonly label="" hide-details required reverse solo suffix="Total"></v-text-field>
              </v-flex>
              
              
            </v-layout>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Tutup</v-btn>
          <v-btn color="blue darken-1" :dark="btn_save_enabled" @click="save_price" :disabled="!btn_save_enabled">Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<style scoped>

.v-input__append-outer {
  margin: 0;
}
</style>
<style>
.btn-outer, .btn-outer-2 {
  margin-top: -6px;
  /* border-radius: 5% !important; */
}
.btn-outer-2 {
  margin-top: -10px;
  margin-right: -5px;
}
</style>

<script>
module.exports = {
    data () {
        return {
            // new_price_amount: this.$store.state.price.new_price.amount,
            // new_price_disc: this.$store.state.price.new_price.disc,
            // new_price_discrp: this.$store.state.price.new_price.discrp
            in_saving: false
        }
      
    },

    computed : {
        state_edit () {
          return this.$store.state.price.edit_price
        },
        sel_T_TestName() {
           if (this.selected_px) return this.selected_px.T_TestName 
          return ''
        },
        dialog : {
            get () {
                return this.$store.state.price.dialog_px_new
            },
            set (v) {
                this.$store.commit('price/update_dialog_px_new', v)
            }
        },

        pxs () {
          return this.$store.state.price.pxs
        },

        selected_px : {
          get () {
            return this.$store.state.price.selected_px
          },
          set (v) {
            this.$store.commit('price/update_selected_px', v)
          }
        },

        query_px : {
          get () {
            return this.$store.state.price.query_px
          },
          set (v) {
            this.$store.commit('price/update_query_px', v)
          }
        },

        new_price : {
          get () {
            return this.$store.state.price.new_price
          },
          set (v) {
            
            this.$store.commit('price/update_new_price', v)
          }
        },

        new_price_amount : {
          get () {
            return this.$store.state.price.new_price.amount
          },
          set (v) {
            let x = this.$store.state.price.new_price
            x.amount = v
            this.$store.commit('price/update_new_price', x)
          }
        },

        new_price_disc : {
          get () {
            return this.$store.state.price.new_price.disc
          },
          set (v) {
            let x = this.$store.state.price.new_price
            x.disc = v
            this.$store.commit('price/update_new_price', x)
          }
        },

        new_price_discrp : {
          get () {
            return this.$store.state.price.new_price.discrp
          },
          set (v) {
            let x = this.$store.state.price.new_price
            x.discrp = v
            this.$store.commit('price/update_new_price', x)
          }
        },
            

        new_price_subtotal : {
          get() {
            return this.$store.state.price.new_price.sub_total
          },
          set (v) {
            let x = this.new_price
            x.sub_total = v
            this.$store.commit('price/update_new_price', x)
          }
        },

        new_price_total : {
          get() {
            return this.$store.state.price.new_price.total
          },
          set (v) {
            let x = this.new_price
            x.total = v
            this.$store.commit('price/update_new_price', x)
          }
        },

        new_price_other : {
          get() {
            return this.$store.state.price.new_price.other
          },
          set (v) {
            let x = this.new_price
            x.other = v
            this.$store.commit('price/update_new_price', x)
          }
        },

        new_price_cito : {
          get() {
            return this.$store.state.price.new_price.cito == 'Y' ? true : false
          },
          set (v) {
            let x = this.new_price
            x.cito = v == true ? 'Y' : 'N'
            this.$store.commit('price/update_new_price', x)
            console.log('cito',v)
            this.$store.commit("price/update_pxs",{records:[],total:0})
            //reset pencarian
            this.$store.commit("price/update_query_px", "")
            this.thr_search()
          }
        },

        addons () {
          return this.$store.state.price.addons
        },

        selected_addon : {
          get() {
            return this.$store.state.price.selected_addon
          },
          set(v) {
            this.$store.commit('price/update_selected_addon', v)
          }
        },

        others : {
          get() {
            return this.$store.state.price.others
          },
          set(v) {
            this.$store.commit('price/update_others', {records:v, total:v.length})
          }
        },
        // new_price_amount : {
        //   get () {
        //     return this.$store.state.price.new_price.amount
        //   },
        //   set (v) {
        //     let x = this.new_price
        //     x.amount = v
        //     this.new_price = x
        //   }
        // },

        is_loading () {
          return false
        },

        btn_save_enabled () {
          if (!this.$store.state.price.selected_px.T_TestID)
            return false
          if ( this.in_saving ) return false 

          return true
        }
    },

    methods : {      
      thr_search: _.debounce( function () {
         this.$store.dispatch("price/search_px")
      }, 300),

      update_new_price_amount : _.debounce( function() { this.update_new_price('amount') }, 500),
      update_new_price_disc : _.debounce( function() { this.update_new_price('disc') }, 500),
      update_new_price_discrp : _.debounce( function() { this.update_new_price('discrp') }, 500),
      
      update_new_price(type) {
        let x = this.new_price
        if (type == 'amount')
          x.amount = this.new_price_amount
        if (type == 'disc')
          x.disc = this.new_price_disc
        if (type == 'discrp')
          x.discrp = this.new_price_discrp

        this.new_price = x
        this.new_price_subtotal = Math.round(this.new_price_amount * (100-parseFloat(this.new_price_disc))) / 100 - Math.round(this.new_price_discrp)
        this.new_price_total = this.new_price_subtotal + Math.round(this.new_price_other)
      },

      update_other_price(idx, price) {
        try {
          this.$store.commit('price/update_other_price', {
            idx: idx,
            price: price
          })
        } catch(e) {
          console.log(e.message())
        }
      },

      add_other() {
        this.$store.commit('price/add_other')
      },

      remove_other(item) {
          // this.$refs.ref_px.$el.focus()
        
        
        this.$store.commit('price/remove_other', item)
      },

      other_disabled(item) {
        if (item.disabled)
          return true

        return false
      },

      new_addon() {
        this.$store.commit('price/update_dialog_addon_new', true)
      },

      async save_price () {
        if ( this.in_saving ) return
        this.in_saving = true
        let x = this.state_edit
        if (x == true)
          await this.$store.dispatch('price/save_px', this.$store.state.price.selected_price.T_PriceID)
        else
          await this.$store.dispatch('price/save_px')
       this.in_saving = false
      }
    },

    watch : {
      query_px(val,old) {
            
         if (val == null || typeof val == 'undefined') val = ""
         if (val == old ) return
         if (this.$store.state.price.search_status == 1 ) return  
         this.$store.commit("price/update_query_px", val)
         this.thr_search()

      },

      others (v, o) {
        console.log(v)
      }
    },

    mounted () {
      this.$store.dispatch('price/search_addon')
      this.in_saving = false
    }
  }
</script>
