<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: 'VSelect'
})

const root = ref(null)

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

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

const slotConfig = useSlotConfig(props.field)

const { style } = useStyle(props)

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

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

<template>
  <el-select
    ref="root"
    v-model="model"
    v-bind="fieldInfo"
    :style="style"
    :placeholder="field.placeholder || '请选择'"
    :value-key="field.valueKey || field.valueField || 'value'"
  >
    <!-- prefix slot -->
    <template v-if="slotConfig.prefix && slots[slotConfig.prefix]" #prefix>
      <VRender :render="slots[slotConfig.prefix]"></VRender>
    </template>
    <!-- 顶部slot -->
    <template v-if="slotConfig.header && slots[slotConfig.header]" #header>
      <VRender :render="slots[slotConfig.header]"></VRender>
    </template>
    <template v-if="field.options && field.options.length">
      <template v-for="(item, index) in field.options" :key="index">
        <el-option
          v-if="!item.children || !item.children.length"
          :value="field.valueKey ? item : item[field.valueField || 'value']"
          :disabled="item.disabled || field.disabled || false"
          :label="item[field.labelField || 'label']"
        >
          <!-- 自定义option slot -->
          <template v-if="slotConfig.option && slots[slotConfig.option]">
            <slot :name="slotConfig.option" v-bind="item"></slot>
          </template>
          <VRender v-else :render="item[field.labelField || 'label']"></VRender>
        </el-option>
        <el-option-group
          v-else
          :label="item[field.labelField || 'label']"
          :disabled="item.disabled || field.disabled || false"
        >
          <el-option
            v-for="(child, childIndex) in item[field.childrenField || 'children']"
            :key="`child-${childIndex}`"
            :value="field.valueKey ? child : child[field.valueField || 'value']"
            :disabled="child.disabled || item.disabled || field.disabled || false"
          >
            <!-- 自定义option slot -->
            <template v-if="slotConfig.option && slots[slotConfig.option]">
              <slot :name="slotConfig.option" v-bind="child"></slot>
            </template>
            <VRender v-else :render="child[field.labelField || 'label']"></VRender>
          </el-option>
        </el-option-group>
      </template>
    </template>
    <!-- 底部slot -->
    <template v-if="slotConfig.footer && slots[slotConfig.footer]" #footer>
      <VRender :render="slots[slotConfig.footer]"></VRender>
    </template>
    <!-- empty slot -->
    <template v-if="slotConfig.empty && slots[slotConfig.empty]" #empty>
      <VRender :render="slots[slotConfig.empty]"></VRender>
    </template>
  </el-select>
</template>

<style scoped>
</style>