<!-- FileUpload.vue -->
<template>
  <div class="file-upload">
    <UploadBlock v-if="!readonly" v-model="modelValue" :type="type" :multiple="multiple" :limit="limit" :placeholder="placeholder" :customFileType="fileType" />
    <PreviewBlock :readonly="readonly" v-model:file-list="modelValue" :type="type" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import UploadBlock from './UploadBlock.vue'
import PreviewBlock from './PreviewBlock.vue'

const modelValue = defineModel('modelValue', {
  type: Array,
  default: () => []
})

const props = defineProps({
  // 文件类型: 'image' 或其他
  type: {
    type: String,
    default: 'image'
  },
  // 上传接口地址
  action: {
    type: String
  },
  // 上传请求头
  headers: {
    type: Object,
    default: () => ({})
  },
  // 是否支持多选
  multiple: {
    type: Boolean,
    default: true
  },
  // 最大上传数量
  limit: {
    type: Number,
    default: 9
  },
  // 占位提示文字
  placeholder: {
    type: String,
    default: ''
  },
  // 只读模式
  readonly: {
    type: Boolean,
    default: false
  },
  // 自定义fileType
  fileType: {
    type: Number,
    default: null,
  }
})

const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error', 'remove'])
</script>

<style scoped>
.file-upload {
  width: 100%;
}
</style>
