<template>
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="2"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <template #tip>
      <div class="el-upload__tip">
        只能上传 doc/docx/pdf 文件，且不超过 20MB
      </div>
    </template>
    <template #trigger>
      <el-button :icon="FolderAdd"></el-button>
    </template>
    <el-button
      class="ml-3"
      type="success"
      @click="submitUpload"
      :icon="UploadFilled"
    >
    </el-button>
  </el-upload>
</template>

<script setup>
import { FolderAdd, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  }
  // {
  //   name: 'food2.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  // }
])
const uploadRef = ref()
const submitUpload = () => {
  uploadRef.value.submit()
  // uploadRef.value!.submit()
}
const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}
const handlePreview = (file) => {
  console.log(file)
}
// 文件上传数量限制
const handleExceed = (files, fileList) => {
  ElMessage.warning({
    message: `最多只能上传 2 个文件，本次添加了 ${files.length} 个文件，共添加
    了 ${files.length + fileList.length} 个文件`
  })
}
// 阻止移除上传文件操作
const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定移除 ${file.name}？`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(
    () => true,
    () => false
  )
}
</script>

<style lang="scss" scoped>
.upload-demo {
  width: 100%;
  height: 100%;
  .ml-3 {
    margin-left: 15px;
  }
}
</style>
