<template>
  <van-checkbox
    :value="internalValue"
    v-bind="$attrs"
    :disabled="disabled"
    @input="handleInput"
  >
    <slot>
      {{ label }}
    </slot>
  </van-checkbox>
</template>

<script>
import { Checkbox } from 'vant';
import 'vant/lib/checkbox/style';

export default {
  name: 'LjCheckbox',
  components: {
    'van-checkbox': Checkbox,
  },
  props: {
    value: {
      type: [Number, String, Boolean],
      default: 0,
    },
    trueValue: {
      type: [Number, String, Boolean],
      default: 1,
    },
    falseValue: {
      type: [Number, String, Boolean],
      default: 0,
    },
    label: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      internalValue: this.value,
    };
  },
  watch: {
    // value(newValue) {
    //   this.internalValue = Boolean(Number(newValue));
    // },
    value: {
      handler(newValue) {
        this.internalValue = Boolean(Number(newValue));
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleInput(value) {
      this.internalValue = value ? this.trueValue : this.falseValue;
      this.$emit('input', this.internalValue);
    },
  },
};
</script>
