<template>
  <div>
    <heading
      :ts="formBody.sharedStyle.heading"
      :ls="widget.style.heading"
      :d="widget.style.heading.defaultStyle"
      >{{ widget.text.heading }}
    </heading>
    <heading
      :ts="formBody.sharedStyle.subHeading"
      :ls="widget.style.subHeading"
      :d="widget.style.subHeading.defaultStyle"
      >{{ widget.text.subHeading }}
    </heading>
    <!--    <h5 :style="{'color' : widget.style.headingColor}">{{widget.text.qheading}}</h5>-->
    <!--    <label for="exampleFormControlInput1">{{widget.text.question}}</label>-->
    <label>
      <select
        class="ra-select"
        v-model="widget.value.response"
        :style="{
          'border-radius': input.borderRadius + 'px',
          border: `${input.borderWidth}px ${input.borderType} ${input.borderColor}`,
          width: '100% !important',
          height: input.borderHeight + 'px',
          fontFamily: input.fontFamily,
          fontSize: input.fontSize + 'px',
          margin: `${input.borderMargin.top}px ${input.borderMargin.right}px ${input.borderMargin.bottom}px ${input.borderMargin.left}px`,
          padding: `${input.borderPadding.top}px ${input.borderPadding.right}px ${input.borderPadding.bottom}px ${input.borderPadding.left}px`,
          fontWeight: input.fontWeight,
          color: input.textColor,
          borderRadius: input.borderRadius + 'px',
          backgroundColor: input.backgroundColor,
          outlineColor: input.borderActive,
        }"
      >
        <option selected disabled value="">Please select</option>
        <option
          v-for="(optionList, index) in widget.text.options"
          :key="index"
          :value="optionList.value"
        >
          {{ optionList.text }}
        </option>
      </select>
    </label>

    <!-- <b-form-group :label="widget.text.question">
      <b-form-select v-model="widget.value.Ans">
        <option value>Please Select</option>
        <option
          v-for="(optionList, index) in widget.text.Answers"
          :key="index"
          :value="optionList.value"
        >{{optionList.text}}</option>
      </b-form-select>
    </b-form-group>-->
  </div>
</template>

<script>
import Heading from "@/components/widgets/components/heading";
export default {
  components: { Heading },
  props: {
    formBody: Object,
    widget: Object,
  },
  data: function () {
    return {
      input: this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.checkbox
        : this.widget.style.input,
    };
  },
  watch: {
    "widget.style.input.defaultStyle": function () {
      this.input = this.widget.style.input.defaultStyle
        ? this.formBody.sharedStyle.checkbox
        : this.widget.style.input;
    },
  },
};
</script>

<style lang="scss">
.ra-select {
  width: 30%;
  padding: 10px;
  /* Replace Default styling (arrow) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.127L12 18.127L20 10.127H4Z" fill="%238E8E93"/></svg>');
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-position-x: 98%;
  background-color: purple;
}
</style>
