<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="600px">
      
      <v-card>
        <v-card-title>
          <span class="headline" v-show="!state_edit">Tambah Data Harga Rujukan</span>
          <span class="headline" v-show="state_edit">Ubah Data Harga Rujukan</span>
        </v-card-title>
        <v-card-text class="pt-0">
          <v-container grid-list-md pa-0>
            <v-layout row wrap>
                <v-flex xs12 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_TestCode"></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="selected_px.T_TestName"></v-text-field>
                </v-flex>
              <!-- <v-flex xs6>&nbsp;</v-flex> -->
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="new_price_amount" solo label="" hide-details required reverse suffix="Harga"></v-text-field>
              </v-flex>

              <v-flex xs6 pr-3>
                <one-date-picker
                    label="Start Date"
                    :date="init_start_date"
                    @change="startDateChange"
                    v-if="refresh_date"                
                ></one-date-picker>
              </v-flex>

              <v-flex xs6 pl-3>
                <one-date-picker
                    label="End Date"
                    :date="init_end_date"
                    @change="endDateChange"
                    v-if="refresh_date"                   
                ></one-date-picker>
              </v-flex>

              <v-flex xs12 sm12 md12 pt-2 pb-2><v-divider></v-divider></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 = {
  components : {
    'one-date-picker': httpVueLoader('./oneDatePicker.vue')
  },
    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
        }
      
    },

    computed : {
        state_edit () {
          return this.$store.state.priceref.edit_price
        },

        dialog : {
            get () {
                return this.$store.state.priceref.dialog_px_new
            },
            set (v) {
                this.$store.commit('priceref/update_dialog_px_new', v)
            }
        },

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

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

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

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

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

        is_loading () {
          return false
        },

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

          return true
        },

        init_start_date () {
          if (this.$store.state.priceref.edit_price)
            return this.$store.state.priceref.selected_price.T_PriceRefStartDate
          else
            return ''          
        },

        init_end_date () {
          if (this.$store.state.priceref.edit_price)
            return this.$store.state.priceref.selected_price.T_PriceRefEndDate
          else
            return null
        },

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

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

      save_price () {
        let x = this.state_edit
        if (x == true)
          this.$store.dispatch('priceref/save_px', this.$store.state.priceref.selected_price.T_PriceRefID)
        else
          this.$store.dispatch('priceref/save_px')
      },

      startDateChange (prm) {
        let x = this.$store.state.priceref.new_price
        x.start_date = prm.new_date
        this.$store.commit('priceref/update_new_price', x)
      },

      endDateChange (prm) {
        let x = this.$store.state.priceref.new_price
        x.end_date = prm.new_date
        this.$store.commit('priceref/update_new_price', x)
      }
    },

    watch : {
      query_px(val, old) {
            
         if (val == null || typeof val == 'undefined') val = ""
         console.log("1-val:"+val)
         if (val == old ) return
         console.log("2-val:"+val)
         // if (! val) return
         console.log("3-val:"+val)
         // if (val.length < 1 ) return
         console.log("4-val:"+val)
         if (this.$store.state.priceref.search_status == 1 ) return  
         console.log("5-val:"+val)
         this.$store.commit("priceref/update_query_px", val)
         this.thr_search()

      },

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

    mounted () {
      this.$store.dispatch('priceref/search_addon')
    }
  }
</script>