<!-- UploadBlock.vue  -->
<template>
  <div class="upload-block">
    <el-button type="primary" @click="showFileInput">
      <el-icon><Upload /></el-icon>选择文件</el-button
    >
    <input class="inner-file" ref="fileRef" type="file" @change="uploadFiles" :accept="getAccept()" />
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { request } from '@/utils/request'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'image'
  },
  headers: {
    type: Object,
    default: () => ({})
  },
  multiple: {
    type: Boolean,
    default: true
  },
  limit: {
    type: Number,
    default: 9
  },
  // 占位提示文字
  placeholder: {
    type: String,
    default: ''
  }
})

const fileRef = ref(null)

const emit = defineEmits(['update:modelValue'])

// 按钮文字
const buttonText = computed(() => {
  return props.placeholder || '点击上传'
})

// 默认提示文字
const defaultTip = computed(() => {
  if (props.type === 'image') {
    return '支持图片格式，单个文件不超过 10MB'
  }
  return '支持文件格式，单个文件不超过 10MB'
})

const showFileInput = () => {
  fileRef.value.click()
}

// 上传前校验
const beforeUpload = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }

  if (props.type === 'image') {
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
      ElMessage.error('只能上传图片文件!')
      return false
    }
  }
  return true
}

const getAccept = () => {
  if (props.type === 'image') {
    return 'image/*'
  }
  if (props.type == 'video') {
    return 'video/*'
  }
  return '*/*'
}

const uploadFiles = async (event) => {
  const file = event.target.files[0]
  const name = file.name
  try {
    const formData = new FormData()
    formData.append('file', file)
    const res = await request({
      url: '/snow-ops-platform/file/upload',
      method: 'post',
      data: formData
    })
    if (res.code === '00000') {
      let fileType = 3
      if(props.type == 'image') fileType = 1
      if(props.type == 'video') fileType = 2

      const url = res.data
      const fileData = {
        fileName: name,
        fileUrl: url,
        fileType,
        fileSize: file.size
      }
      emit('update:modelValue', [...props.modelValue, fileData])
    } else {
      throw new Error(res.message)
    }
  } catch (error) {
    console.log(error)
  }
  fileRef.value.value = null
}
</script>

<style scoped>
.upload-block {
  position: relative;
  margin-bottom: 20px;
}
.inner-file {
  z-index: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
</style>
