<script setup>
import { ref } from 'vue'
import VRender from '../VRender/index.vue'
import useStyle from '../hooks/useStyle'

defineOptions({
  name: 'VCheckbox'
})

const root = ref(null)

const props = defineProps({
  field: {
    type: Object,
    required: true
  }
})

const model = defineModel({ type: [Boolean, String, Number] })

const { style } = useStyle(props)

defineExpose({
  root
})
</script>

<template>
  <el-checkbox
    ref="root"
    v-model="model"
    v-bind="field"
    :style="style"
    :true-label="field.trueValue"
    :false-label="field.falseValue"
  >
    <VRender :render="field[field.labelField || 'label']"></VRender>
  </el-checkbox>
</template>

<style scoped>
</style>