<template>
  <div>
    <!-- <a-checkbox @change="onChange" :checked="value"> Checkbox </a-checkbox> -->
    <a-switch
      :checked-children="checkedChildren"
      :un-checked-children="unCheckedChildren"
      :disabled="disabled"
      :checked="value"
      @change="onChange"
    />
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checkedChildren: {
      default: "",
    },
    unCheckedChildren: {
      default: "",
    },
    checked: {
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    value() {
      return this.checked === 1 || this.checked === "1";
    },
  },
  methods: {
    onChange(checked) {
      this.$emit("change", checked ? 1 : 0);
      this.$emit("onChange", checked ? 1 : 0);
    },
  },
};
</script>

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