<template>
    <div class="row">
    {{this.data_row}}
      <div class="col-md-6">
        <div class="form-group">
          <label>Language</label>
          <multiselect  track-by="language_l"  label="language_l"  v-model="data_row.language_id" 
          :options="languageOption" placeholder="Select Language" selectLabel='' deselectLabel='X' selectedLabel=''  ></multiselect>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Proficiency</label>
            <multiselect  track-by="proficiency"  label="proficiency"  v-model="data_row.proficiency_id" 
            :options=proficiencyOption placeholder="Select Proficiency" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
            <span class="text-danger help-block" v-if="has_error && errors.proficiency_id">{{ errors.proficiency_id[0] }}</span>
        </div>
      </div>
    </div>
</template>

<script>
  import Multiselect from 'vue-multiselect';
  export default {
    props: ['userShow','languageOption','proficiencyOption'],
    components: {  Multiselect  },
    data() {
      return {
        data_row : {language_id:[],proficiency_id:[]},
        language_id : [],
        proficiency_id : []
      }
    },

    mounted() {
    },
    methods: {
      openAddLanguageModel() {
        let userLanguages = this.userSkills.map(item => { return parseInt(item.language_id) ;});
        //setTimeout(function(){
          let languageList =  this.languages.filter(language => !userLanguages.includes(language.id));
          this.languageOption =  languageList.slice() ;
          this.proficiencyOption =  this.proficiencys.slice() ; 
          $("#addLanguage").modal('show')
        //}.bind(this), 100);
      },
    }
  }
</script>