<template>
  <div style="padding: 10px 0;">
    <el-upload drag action="" :auto-upload="false" :file-list="fileList" :on-change="handleFileChange"
      :show-file-list="false" :limit="limit" :on-exceed="handleExceed">
      <div class="flex-container">
        <div>
          <el-icon :size="52" color="rgb(51, 153, 255)">
            <upload-filled />
          </el-icon>
        </div>
        <div class="text-container">
          <div class="accept-type-container">{{ props.prompt }}</div>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
const props = defineProps({
  prompt: {
    type: String,
    default: '点击或拖拽文件到此处进行上传'
  },
  loading: Boolean,
  limit: {
    type: Number,
    default: 1
  },
  fileList: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['file-change']);

// 处理文件数量超出限制
const handleExceed = (files, uploadFiles) => {
  emit('file-change', files[0]);
};

const handleFileChange = (file, fileList) => {
  emit('file-change', file, fileList);
};
</script>

<style lang="scss" scoped>
:deep(.el-upload){
    width: 100%;
    .flex-container {
      display: flex;
      align-items: center;
      flex-direction: column;
      .text-container{
        font-size: 14px;
        color: rgb(188, 195, 203);
      }
    }
  }
</style>
