<template>
  <li @click="onClick">
    <a>
      <div class="checkbox">
        <input
          type="checkbox"
          :value="v"
          :checked="isChecked"
          :id="id + '_' + k"
          :ref="id + '_' + k"
          @click.stop.prevent="onInput"
        />
        <label :for="id + '_' + k" v-html="v"></label>
      </div>
    </a>
  </li>
</template>

<script>
export default {
  name: "bc-multi-dropdown-option",
  data() {
    return {
      toggle: false,
    };
  },
  props: {
    id: {
      type: String,
      default: null,
    },
    k: {
      type: [Number, String],
      default: null,
    },
    v: {
      type: [Number, String],
      default: null,
    },
    is_slot: {
      type: Boolean,
      default: true,
    },
    selectedOptions: {
      type: Array,
      default: null,
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.is_slot) {
        this.$parent.$emit("mounted", { key: this.k, value: this.v });
      }
    });
  },
  computed: {
    isChecked() {
      return this.selectedOptions.includes(this.k);
    },
  },
  methods: {
    emitSelect(checked) {
      let event = {
        checked: checked,
        key: this.k,
        value: this.v,
      };
      if (this.is_slot) {
        this.$parent.$emit("select", event);
      } else {
        this.$emit("select", event);
      }
    },
    onInput() {
      // let isChecked = event.target.checked;
      // console.log("onInput -> isChecked", isChecked);
    },
    onClick() {
      this.emitSelect(!this.isChecked);
    },
  },
};
</script>
