<template>
    <form @submit.prevent="update">
        
        <div class="form-group row">
     
          <div class="col-md-12">
            <label for="import_name">Contact Name</label>
            <input type="hidden" class="form-control" name="import_id" id="import_id" v-model="fields.import_id"/>
            <input type="text" class="form-control" name="import_name" id="import_name" v-model="fields.import_name"/>
            <div v-if="errors && errors.import_name" class="text-danger">{{ errors.import_name[0] }}</div>
          </div>

                 <div class="col-md-12">
            <label for="phone">Phone</label>

            <input type="text" class="form-control" name="phone" id="phone" v-model="fields.phone"/>
            <div v-if="errors && errors.phone" class="text-danger">{{ errors.phone[0] }}</div>
          </div>


        <div class="col-md-12">
            <label for="message">Message</label>

            <input type="text" class="form-control" name="message" id="message" v-model="fields.message"/>
            <div v-if="errors && errors.message" class="text-danger">{{ errors.message[0] }}</div>
          </div>
          
          



                
	
         </div>
     
        <div class="form-group">
            <button type="submit" class="btn btn-success btn-round">Save</button>
            <button type="reset" class="btn btn-danger btn-round">Clear</button>
        </div>       
     
    </form>
</template>

<script>
import FormMixin from '../shared/FormMixin';
import Multiselect from 'vue-multiselect';
export default {
  mixins: [ FormMixin ],
   components: { Multiselect },
   props: [
            'contactsdata',
              
        ],
        
  data() {
    return {
      'text': 'SMS Contact Updated succesfully',
      'redirect': '',
      action2: '/Accounts/public/fc/imports/editImports',
       group_names: [],
      
     computed: {
    isInvalid () {
      return this.isTouched && this.value.length === 0
    },
  },
    methods: {

      getGroups: function(){
        axios.get('/Accounts/public/fc/group/get')
        .then(function(response){
          this.group_names = response.data;
        }.bind(this));
      },
    nameWithphone ({ cust_client_fullname, cust_client_phone }) {
      return `${cust_client_fullname} — [${cust_client_phone}]`
    },
    onChange (value) {
      this.value = value
      if (value.indexOf('Reset me!') !== -1) this.value = []
    },
    onSelect (option) {
      if (option === 'Disable me!') this.isDisabled = false
    },
    onTouch () {
      this.isTouched = true
    },
    }, 
      fields:{
        import_id:this.contactsdata.import_id,
        import_name:this.contactsdata.import_name,
             phone:this.contactsdata.phone,
                message:this.contactsdata.message
 
      }

    }
    
    
  },
  
  
  
  
  mounted() {
              this.fields.import_id=this.contactsdata.import_id;        
            this.fields.import_name=this.contactsdata.import_name;   
              this.fields.name=this.contactsdata.name;    
               this.fields.message=this.contactsdata.message;       
     
            console.log(this.contactsdata);
        }
}
</script>