<template>
    <form @submit.prevent="submit">
        <div class="form-group row">
          <div class="col-md-12">
            <label for="name">Number</label>
            <input type="number" class="form-control" name="number" id="number" v-model="fields.number" placeholder="Enter number..."/>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Type</label>
            
            <multiselect  name="type" v-model="fields.type" track-by="type" placeholder="Select Type" :options="types"  :allow-empty="true" :multiple="false" :max-height="150">
              
            </multiselect>
            <div v-if="errors && errors.number" class="text-danger">{{ errors.number[0] }}</div>
          </div>
          <div class="col-md-12">
            <label for="name">Question</label>
            <textarea class="form-control" name="question" id="question" v-model="fields.question" placeholder="Type question..."></textarea>
            <div v-if="errors && errors.question" class="text-danger">{{ errors.question[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';

// register globally
Vue.component('multiselect', Multiselect)


export default {
  mixins: [ FormMixin ],
  props: ['data'],
  components: { Multiselect },
  data() {
    return {
      'action': '/fc/questions/update',
      'text': 'Question updated succesfully',
      'redirect': '',
      types: ['Open','Closed'],
      fields: {
        id:this.data.id,
        survey:this.data.survey_id,
        number:this.data.number,
        type:this.data.type,
        question:this.data.question,
      }
    }
  },
  mounted() {
    this.fields.id=this.data.id;
    this.fields.survey=this.data.survey_id;
    this.fields.number=this.data.number;
    this.fields.type=this.data.type;
    this.fields.question=this.data.question;
  }
}

</script>
<!--Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>