<script setup>
const props = defineProps({
  params: Object
})

const checked = ref(!!props.params.data.completedAllMarketplaceData)

const toggle = async () => {
  checked.value = !checked.value
  props.params.data.completedAllMarketplaceData = checked.value
  props.params.api.dispatchEvent({ type: 'cellValueChanged', data: props.params.data, colDef: props.params.colDef, node: props.params.node })
}
</script>

<template>
  <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer;" @click="toggle">
    <input type="checkbox" :checked="checked" style="cursor: pointer; width: 12px; height: 12px; margin: 0; padding: 0; pointer-events: none; transform: scale(1.1);" />
  </div>
</template>
