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

defineOptions({
  name: 'VUpload'
})

const root = ref(null)

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

const fileList = defineModel('fileList', { type: Array })
const slots = useSlots()

const slotConfig = useSlotConfig(props.field)

const { style } = useStyle(props)

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

defineExpose({
  root,
  abort(...rest) {
    root.value.abort(...rest)
  },
  submit() {
    root.value.submit()
  },
  clearFiles(...rest) {
    root.value.clearFiles(...rest)
  },
  handleStart(...rest) {
    root.value.handleStart(...rest)
  },
  handleRemove(...rest) {
    root.value.handleRemove(...rest)
  }
})
</script>

<template>
  <el-upload v-model:file-list="fileList" ref="root" v-bind="fieldInfo" :style="style">
    <template v-if="slotConfig.default && slots[slotConfig.default]" #default>
      <slot :name="slotConfig.default"></slot>
    </template>
    <template v-if="slotConfig.trigger && slots[slotConfig.trigger]" #trigger>
      <slot :name="slotConfig.trigger"></slot>
    </template>
    <template v-if="slotConfig.tip && slots[slotConfig.tip]" #tip>
      <slot :name="slotConfig.tip"></slot>
    </template>
    <template v-if="slotConfig.file && slots[slotConfig.file]" #file="data">
      <slot :name="slotConfig.file" v-bind="data"></slot>
    </template>
  </el-upload>
</template>

<style scoped>
</style>