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

defineOptions({
  name: 'VCheckboxGroup'
})

const root = ref(null)

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

const model = defineModel({ type: Array })

const { style } = useStyle(props)

const fieldInfo = computed(() => {
  let { options, ...rest } = props.field || {}
  return rest
})

defineExpose({
  root
})
</script>

<template>
  <el-checkbox-group ref="root" v-model="model" v-bind="fieldInfo" :style="style">
    <template v-if="field.options && field.options.length">
      <template v-for="(item, index) in field.options" :key="index">
        <el-checkbox
          v-if="!field.button"
          :label="item[field.valueField || 'value']"
          :size="item.size || field.size || 'default'"
          :disabled="item.disabled || field.disabled || false"
          :border="item.border || field.border || false"
          :checked="item.checked || false"
        >
          <VRender :render="item[field.labelField || 'label']"></VRender>
        </el-checkbox>
        <el-checkbox-button
          v-else
          :label="item[field.valueField || 'value']"
          :size="item.size || field.size || 'default'"
          :disabled="item.disabled || field.disabled || false"
          :checked="item.checked || false"
        >
          <VRender :render="item[field.labelField || 'label']"></VRender>
        </el-checkbox-button>
      </template>
    </template>
  </el-checkbox-group>
</template>

<style scoped>
</style>