<template>
  <div class="radio" :class="rowOrientation && columnClasses">
    <input
      type="radio"
      :value="v"
      :checked="isChecked"
      :disabled="!is_enabled"
      :id="id + '_' + k"
      @input="onSelect"
    />
    <label :for="id + '_' + k">
      {{ v }}
      <span class="info">{{ info }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "bc-radio-option",
  props: {
    id: {
      type: String,
      default: null,
    },
    info: {
      type: String,
      default: null,
    },
    k: {
      type: String,
      default: null,
    },
    v: {
      type: String,
      default: null,
    },
    is_checked: {
      type: Boolean,
      default: false,
    },
    is_enabled: {
      type: Boolean,
      default: true,
    },
    is_slot: {
      type: Boolean,
      default: true,
    },
    selectedOption: {
      type: String,
      default: null,
    },
    data: {
      type: String,
      default: null,
    },
    orientation: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      columnClasses: "col-sm-12 col-md-4 col-lg-3",
    };
  },
  mounted() {
    this.$nextTick(function () {
      if (this.is_slot) {
        this.$parent.$emit("mounted", { key: this.k, value: this.v });
      }
    });
  },
  computed: {
    isChecked() {
      if (this.is_checked) {
        return true;
      } else {
        // check in the selected options if the key belongs to the array
        if (this.selectedOption && this.selectedOption === this.k) {
          return true;
        }
      }
      return false;
    },
    rowOrientation() {
      if (this.orientation === "row") {
        return true;
      }
      return false;
    },
  },
  methods: {
    onSelect(event) {
      let isChecked = event.target.checked;
      let value = event.target.value;
      console.log("[RadioOption]", isChecked, value);
      if (this.is_slot) {
        this.$parent.$emit("select", {
          checked: isChecked,
          key: this.k,
          value: value,
        });
      } else {
        this.$emit("select", { checked: isChecked, key: this.k, value: value });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>