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

defineOptions({
  name: 'VSwitch'
})

const root = ref(null)

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

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

const slotConfig = useSlotConfig(props.field)

const { style } = useStyle(props)

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

defineExpose({
  root,
  focus() {
    root.value.focus()
  }
})
</script>

<template>
  <el-switch ref="root" v-model="model" v-bind="fieldInfo" :style="style">
    <template v-if="slotConfig.activeAction && slots[slotConfig.activeAction]" #active-action>
      <VRender :render="slots[slotConfig.activeAction]"></VRender>
    </template>
    <template v-if="slotConfig.inactiveAction && slots[slotConfig.inactiveAction]" #inactive-action>
      <VRender :render="slots[slotConfig.inactiveAction]"></VRender>
    </template>
  </el-switch>
</template>

<style scoped>
</style>