<script setup lang="ts">
import { ref, watch, type PropType, onMounted } from "vue";

export interface Prop {
  label: string;
  tail: string | number;
  checked?: boolean;
}

const props = defineProps({
  data: {
    type: Object as PropType<Prop>,
    required: true,
  }
});

const checked = ref(false);

watch(
  () => !!props.data.checked,
  (value: boolean) => checked.value = value
);

onMounted(() => {
  checked.value = !!props.data.checked;

});

const emits = defineEmits<{
  (e: "change", checked: boolean): void;
}>();

function onChange() {
  emits("change", checked.value);
}
</script>

<template>
  <a-row type="flex">
    <a-col :span="22">
      <a-checkbox v-model:checked="checked" @change="onChange">{{ data.label }}</a-checkbox>
    </a-col>
    <a-col :span="2">
      {{ data.tail }}
    </a-col>
  </a-row>
</template>