<template>
  <div>
    <h5 :style="{ color: widget.style.headingColor }">
      {{ widget.text.qheading }}
    </h5>
    <label>{{ widget.text.question }}</label>
    <select class="form-control" v-model="widget.value.Ans">
      <option value selected disabled>Please select</option>
      <option
        v-for="(optionList, index) in widget.text.Answers"
        :key="index"
        :value="optionList.value"
        >{{ optionList.text }}</option
      >
    </select>
  </div>
</template>

<script>
export default {
  name: "groups_widget",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false
      // selected: [], // Must be an array reference!
    };
  },
  props: {
    isRender: Boolean,
    widget: Object
  },
  created() {
    if (this.isRender) {
      //call api to show groups
      this.getApi
        .getGroupsDynamic(this.widget.text.spaceId)
        .then(res => {
          console.log("got groups", res);
          res.data.forEach(elem => {
            this.widget.text.Answers.push({
              text: elem.name,
              value: elem.mri
            });
          });
        })
        .catch(err => {
          console.log("err", err);
        });
    } else {
      //do nothing
    }
  }
};
</script>
