<!-- <template>
  <div class="upload-file clear-both">
    <div class="upload-file-list flex">
      <template v-if="modelList.length">
        <div v-for="(item, index) in modelList" :key="item.uid" class="file-wrap mr-16 border border-solid border-gray">
          <template v-if="item.status === 'done'">
            <a-image
              width="100%"
              height="100%"
              class="mini-img"
              v-if="fileType === 'image'"
              v-show="item.url || item.response?.result"
              :src="item.url || item.response?.result"
            ></a-image>
            <div v-if="fileType === 'video'" class="video-box bg-black w-full h-full flex items-center justify-center">
              <PlayCircleOutlined class="fs-28 c-primary cursor-pointer" @click="openVideo(item)"></PlayCircleOutlined>
            </div>
          </template>
          <div v-if="item.status === 'uploading'" class="w-full h-full flex items-center justify-center fs-30">
            <LoadingOutlined class="fs-20"></LoadingOutlined>
          </div>
          <CloseCircleFilled
            @click="delFile(item.uid)"
            class="btn-del bg-white rounded-full p-2 fs-20 c-999 hover:color-primary transition cursor-pointer"
          />
        </div>
      </template>
      <a-upload
        v-model:fileList="modelList"
        :accept="accept[props.fileType]"
        :action="props.api"
        :maxCount="limit"
        :multiple="limit > 1"
        :before-upload="beforeUpload"
        :show-upload-list="false"
        @change="handleChange"
      >
        <div
          class="w-100 h-100 border border-dashed border-gray flex flex-col items-center justify-center cursor-pointer hover:border-primary transition-duration-300"
          v-if="modelList.length < limit"
        >
          <plus-outlined />
          <div style="margin-top: 8px">上传{{ props.fileType }}</div>
        </div>
      </a-upload>

      <a-modal v-model:open="videoVisible">
        <video class="w-full h-full block" v-if="videoVisible" :src="videoUrl"></video>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PlusOutlined, CloseCircleFilled, PlayCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue'
import { message } from 'ant-design-vue'
const emits = defineEmits(['success'])

const accept: { [key: string]: string } = {
  image: '.jpg,.jpeg,.png,.gif',
  video: '.mp4,.flv,.mov',
}
const modelList = defineModel<Array<UploadFile>>('list', { type: Array, default: [] })
type Props = {
  api: string
  limit: number
  limitSize: number
  fileType: 'image' | 'video'
  accept: string
}
type FileType = 'image' | 'video'
const props = defineProps({
  api: {
    type: String,
    default: '/jeecgboot/sys/oss/file/otherUpload',
  },
  // 上传数量限制
  limit: {
    type: Number,
    default: 1,
  },
  // 文件大小限制
  limitSize: {
    type: Number,
    default: 5,
  },
  fileType: {
    type: String,
    default: 'image',
  },
  accept: {
    // 文件类型限制
    type: String,
    default: '.jpg,.jpeg,.png,.gif',
  },
})

// let modelList = modelList

const beforeUpload = (file: UploadFile) => {
  const suffix = '.' + file.name.substring(file.name.lastIndexOf('.') + 1)
  const isFileTypeRight = props.accept.split(',').includes(suffix)
  const isLimitSize = file.size! / 1024 / 1024 < props.limitSize

  if (!isFileTypeRight) {
    message.error('文件格式错误')
  } else if (!isLimitSize) {
    message.error(`文件大小不能超过${props.limitSize}MB!`)
  }
  if (!isFileTypeRight || !isLimitSize) {
    delFile(file.uid)
    return false
  }
}
const handleChange = (info: UploadChangeParam) => {
  const { file, fileList } = info
  modelList.value = fileList.filter((item) => !!item.status)

  if (file.status === 'uploading') {
    // return
  }
  if (file.status === 'removed') {
  }
  if (file.status === 'done') {
    if (file.response && file.response.success) {
    } else {
      // 如果接口上传失败 删除列表中此项
      message.error(file.response.message)
      delFile(file.uid)
      // modelList.value = modelList.value.filter((item) => item.uid !== file.uid)
      // console.log(modelList.value.map((item) => item.uid))
      // console.log(file.uid)
    }
  }
  if (file.status === 'error') {
    message.error('上传失败')
  }
}
const delFile = (uid: string) => {
  console.log(uid)
  // console.log(1)
  modelList.value = modelList.value.filter((item) => item.uid !== uid)
  // modelList.value = modelList.value
  // console.log(toRaw(modelList))
  // modelList.value = modelList.value.filter((item, _index) => _index !== index )
}
const videoVisible = ref(false)
const videoUrl = ref('')
const openVideo = (url: string) => {
  videoUrl.value = url
  videoVisible.value = true
}
</script>
<style scoped lang="less">
.upload-file {
  :deep(.ant-upload-list-item) {
    border: none;
  }
  .file-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    :deep(.mini-img) {
      display: block;
      object-fit: cover;
    }
    .btn-del {
      position: absolute;
      z-index: 99;
      top: -10px;
      right: -10px;
    }
  }
}
</style>
 -->

