<template>
  <el-switch
    v-model="model"
    class="ml-2"
    :style="{
      '--el-switch-on-color': props.activeColor,
      '--el-switch-off-color': props.inactiveColor,
    }"
    v-bind="$attrs"
  />
</template>
<script lang="ts" setup>
const model = ref()
const props = withDefaults(
  defineProps<{
    activeColor?: string
    inactiveColor?: string
    modelValue?: unknown
  }>(),
  {
    activeColor: '#13ce66',
    inactiveColor: ' #ff4949',
    modelValue: undefined,
  },
)
watch(
  () => props.modelValue,
  (val) => {
    console.log(32, val)
    model.value = val
  },
  { immediate: true },
)
watch(model, (val) => {
  emits('update:modelValue', val)
})

const emits = defineEmits<{
  (e: 'update:modelValue', data: string | number | undefined): void
}>()
</script>
<style lang="scss" scoped></style>
