<template>
  <div>
    <h5 :style="{'color' : widget.style.headingColor}">{{widget.text.qheading}}</h5>
    <p class="m-0" :style="{'font-size': (widget.style.size*3)/4+'px'}">{{widget.text.question}}</p>
    <div style="paddding: 10px" v-bind:class="{wfborderTLR : widget.style.boxborder}">
      <div
        style="padding: 5px 15px;"
        v-for="(radioButtonve, index) in widget.text.Answers"
        :key="index"
        v-bind:class="{optionActive : radioButtonve.value == widget.value.Ans, wfborderB : widget.style.boxborder}"
      >
        <p-radio
          :style="{'width':'100%', 'font-size':widget.style.size+'px', 'margin':(widget.style.size/2)+'px 0px', 'padding':'0 5px'}"
          :name="'radiobutton' + index"
          class="p-icon"
          :class="widget.style.boxStyle"
          :color="widget.style.boxColor"
          v-model="widget.value.Ans"
          :value="radioButtonve.value"
        >
          <i class="icon mdi" :class="widget.style.boxType" slot="extra"></i>
          <span :style="{'font-size': (widget.style.size*3)/4+'px'}">{{radioButtonve.text}}</span>
        </p-radio>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false,
      selected: "",
      options: [
        {
          text: "First radio",
          value: "first"
        },
        {
          text: "Second radio",
          value: "second"
        },
        {
          text: "Third radio",
          value: "third"
        }
      ]
    };
  },
  props: {
    widget: Object
  }
};
</script>
