<script lang="ts" setup>
import { ElMessage } from 'element-plus'
// import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { upload } from '@/utils/upload'

type UploadFileItem = { name: string; url: string }

const props = withDefaults(defineProps<{ modelValue: string | UploadFileItem[]; prefix?: string }>(), {
  prefix: 'upload/admin/'
})
const emit = defineEmits(['update:modelValue'])

const fileList = ref<UploadUserFile[]>([])

watch(
  () => props.modelValue,
  value => {
    fileList.value = Array.isArray(value) ? [...value] : []
  }
)

const showFileList = computed(() => {
  return Array.isArray(props.modelValue)
})

const handleUploadRequest = async (option: UploadRequestOptions) => {
  try {
    const url = await upload(option.file)
    ;(option.file as any).url = url
    ;(option.file as any).raw = Object.assign((option.file as any).raw || {}, { url })
    option.onSuccess({ url })
  } catch (error: any) {
    option.onError(error)
  }
}

// 上传成功
const handleSuccess = (response: any, file: any, files: any) => {
  if (!files.every((item: any) => item.status === 'success')) return
  if (showFileList.value) {
    emit(
      'update:modelValue',
      files.map((item: any) => {
        return { name: item.name, url: item.url || item.raw.url }
      })
    )
  } else {
    emit('update:modelValue', file.raw.url)
  }
}

// 上传限制
const handleExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('文件超出个数限制')
}

// 删除
const handleRemove: UploadProps['onRemove'] = (file, files) => {
  emit(
    'update:modelValue',
    files.map((item: any) => {
      return { name: item.name, url: item.url || item.raw.url }
    })
  )
}

// 预览
const handlePreview: UploadProps['onPreview'] = uploadFile => {
  console.log(uploadFile)
}
</script>

<template>
  <el-upload
    action="#"
    :http-request="handleUploadRequest"
    :show-file-list="false"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :on-preview="handlePreview"
    :on-success="handleSuccess"
    :file-list="fileList"
    class="uploader">
    <el-button type="primary">选择本地图片</el-button>
  </el-upload>
</template>

<style lang="scss">
.uploader {
  flex: 1;
}
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  .el-image {
    width: 100%;
    height: 100%;
  }
}
.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
