<template>
  <Upload
    v-bind="$attrs"
    :on-before-upload="onBeforeUpload"
    :custom-request="onUpload"
    :file-list="[]"
    :show-file-list="false"
    style="width: 100%"
  >
    <template #upload-button>
      <Input :model-value="modelValue" :readonly="true" :placeholder="placeholder">
        <template #suffix>
          <Progress v-if="loading" :percent="percent" size="mini" />
          <IconUpload v-else />
        </template>
      </Input>
    </template>
  </Upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { IconUpload } from '@arco-design/web-vue/es/icon';
import useLoading from '@/hooks/loading';
import useOss from '@/hooks/oss';
import { Input, Message, Progress, Upload, UploadRequest, useFormItem } from '@arco-design/web-vue';
import { startsWith } from 'lodash';

type FileType = { name: string; url: string; size: number; type: string; width?: number; height?: number; duration?: number };

const props = defineProps({
  modelValue: { type: String, default: '' },
  prefix: { type: String, default: 'file' },
  limit: { type: Number, default: 0 },
  placeholder: { type: String, default: '请选择' },
});

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'success', value: FileType): void;
  (e: 'choose-file', value: File): void;
}>();
const { eventHandlers } = useFormItem();

const { loading, setLoading } = useLoading(false);
const { upload } = useOss();
const percent = ref<number>(0);

const onBeforeUpload = (file: File & { width?: number; height?: number; duration?: number }) => {
  if (props.limit !== 0 && file.size > props.limit * 1024 * 1024) {
    Message.warning(`${file.name} 文件超过${props.limit}MB，无法上传`);
    return Promise.resolve(false);
  }

  if (startsWith(file.type, 'image/')) {
    const imgObj = new Image();
    imgObj.src = URL.createObjectURL(file);
    imgObj.onload = () => {
      file.width = imgObj.width;
      file.height = imgObj.height;
    };
  }

  if (startsWith(file.type, 'audio/') || startsWith(file.type, 'video/')) {
    const audioElement = new Audio(URL.createObjectURL(file));
    audioElement.addEventListener('loadedmetadata', () => {
      file.duration = audioElement.duration * 1000;
    });
  }

  return Promise.resolve(file);
};

const onProgress = (p: number) => {
  percent.value = p;
};

const onUpload = (option: any): UploadRequest => {
  const { fileItem } = option;

  if (fileItem.file) {
    setLoading(true);
    // eslint-disable-next-line vue/custom-event-name-casing
    emits('choose-file', fileItem.file as File);
    upload(fileItem.file, props.prefix, onProgress)
      .then((res) => {
        emits('update:modelValue', res?.url || '');
        eventHandlers.value?.onChange?.();
        fileItem.percent = 100;
        fileItem.url = res?.url || '';
        fileItem.status = 'done';
        emits('success', {
          name: fileItem.name,
          url: fileItem.url,
          size: fileItem.file.size,
          type: fileItem.file.type,
          width: fileItem.file.width || 0,
          height: fileItem.file.height || 0,
          duration: fileItem.file.duration || 0,
        });
      })
      .finally(() => {
        setLoading(false);
      });
  }

  return {};
};
</script>

<style lang="less" scoped>
::v-deep(.arco-input-append) {
  padding: 0;
}
</style>