<template>
  <span v-if="isLook">
    {{ select_look || '-' }}
  </span>
  <el-checkbox-group v-else v-model="select" :disabled="disabled">
    <el-checkbox
      v-for="item in options"
      :key="item[field.value]"
      :value="item[field.value]"
      :label="item[field.label]"
    />
  </el-checkbox-group>
</template>

<script setup lang="ts">
import { useOptions } from '../hooks/useOptions'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: () => ''
  },
  mode: {
    type: String,
    default: 'add'
  },
  formItem: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue'])

const { options, field, isLook, select_look, select } = useOptions(props, emits)
</script>
