<template>
  <div>
    <multi-upload
      ref="commonUploadPicRef"
      @pushListData="pushListData"
      @delListData="delListData"
      :params="params"
      :fileList="fileList"
      :limitNums="limitNums"
      :accept-file="acceptFile"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
const multiUpload = defineAsyncComponent(() => import('./multiUpload.vue'))

// Props
const props = defineProps<{
  fileList: any[]
  type?: string
  params?: any
  limitNums?: number
  acceptFile?: string
}>()

// 组件引用
const commonUploadPicRef = ref()

// 推送列表数据
const pushListData = (data: { name: string; url: string }) => {
  props.fileList.push(data)
}

// 删除列表数据
const delListData = (file: string) => {
  const index = props.fileList.findIndex((item: any) => item.url === file)
  if (index > -1) {
    props.fileList.splice(index, 1)
  }
}

// 暴露方法
defineExpose({
  commonUploadPic: commonUploadPicRef
})
</script>

<style scoped>
</style>
