<template>
  <div class="bgo-single-checkbox">
    <van-checkbox
      ref="checkbox"
      v-model="checked"
      :disabled="disabled"
      v-bind="$attrs"
      @click="forwardEvent('click', $event)"
      @change="forwardEvent('change', $event)"
    >
      <slot></slot>
      <template #icon="props">
        <img
          :src="getCustomIcon(props.checked)"
          alt=""
          style="width: 20px; height: 20px"
        />
      </template>
    </van-checkbox>
  </div>
</template>

<script>
export default {
  name: "BgoSingleCheckbox",
  props: {
    value: Boolean,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checked: this.value,
    };
  },
  watch: {
    checked(newVal) {
      this.$emit("input", newVal);
    },
    value(newVal) {
      this.checked = newVal;
    },
  },
  methods: {
    getCustomIcon(checked) {
      let icon;
      if (checked) {
        icon = require("../../assets/icons/checkbox-checked.png");
        if (this.disabled) {
          icon = require("../../assets/icons/checkbox-check-disabled.png");
        }
      } else {
        icon = require("../../assets/icons/uncheck.png");
        if (this.disabled) {
          icon = require("../../assets/icons/disabled.png");
        }
      }

      return icon;
    },
    forwardEvent(event, data) {
      this.$emit(event, data);
    },
    toggle(checked) {
      this.$refs.checkbox.toggle(checked);
    }
  },
};
</script>

<style lang="scss">
@use "./index.scss";
</style>