<template>
  <el-switch
    :model-value="modelValue"
    :disabled="isDisabled"
    active-text="是"
    inactive-text="否"
    @update:model-value="handleChange"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FieldConfig } from '@/types/form'

interface Props {
  modelValue: boolean
  field: FieldConfig
  disabled?: boolean
  readonly?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const isDisabled = computed(() => {
  if (props.disabled) return true
  if (typeof props.field.disabled === 'function') {
    return false
  }
  return props.field.disabled || false
})

const handleChange = (value: boolean) => {
  emit('update:modelValue', value)
}
</script>

<style scoped lang="scss">
// 继承全局样式
</style>
