<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 Jasa Lain</span>
        </v-card-title>
        <v-card-text class="pt-0">
          <v-container grid-list-md pa-0>
            <v-layout row wrap>
                <v-flex xs12>
                    <v-text-field
                      label="Nama item"
                      v-model="new_addon_name"
                      required
                    >

                    </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">Close</v-btn>
          <v-btn color="blue darken-1" :dark="btn_save_enabled" @click="save_addon" :disabled="!btn_save_enabled">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<style scoped>
.v-input__append-outer {
  margin: 0;
}
</style>

<script>
module.exports = {
    data () {
        return {
            
        }
      
    },

    computed : {
        dialog : {
            get () {
                return this.$store.state.price.dialog_addon_new
            },
            set (v) {
                this.$store.commit('price/update_dialog_addon_new', v)
            }
        },

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

        is_loading () {
          return false
        },

        btn_save_enabled () {
          if (this.new_addon_name == '')
            return false

          return true
        }
    },

    methods : {      
      save_addon : function() {
        this.$store.dispatch('price/save_addon')
      }
    },

    watch : {
      
    },

    mounted () {
      
    }
  }
</script>