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

defineOptions({
  name: 'VCascader'
})

const root = ref(null)

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

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

const slotConfig = useSlotConfig(props.field)

const { style } = useStyle(props)

defineExpose({
  root,
  getCheckedNodes(...rest) {
    return root.value.getCheckedNodes(...rest)
  },
  get cascaderPanelRef() {
    return root.value.cascaderPanelRef
  },
  togglePopperVisible(...rest) {
    root.value.togglePopperVisible(...rest)
  },
  get contentRef() {
    return root.value.contentRef
  },
  clearCheckedNodes() {
    root.value.clearCheckedNodes()
  }
})
</script>

<template>
  <component
    :is="field.panel ? 'el-cascader-panel' : 'el-cascader'"
    ref="root"
    v-model="model"
    v-bind="field"
    :style="style"
  >
    <template v-if="slotConfig.default && slots[slotConfig.default]" #default="data">
      <slot :name="slotConfig.default" v-bind="data"></slot>
    </template>
    <template v-if="slotConfig.empty && slots[slotConfig.empty]" #empty>
      <slot :name="slotConfig.empty"></slot>
    </template>
  </component>
</template>

<style scoped>
</style>