<template>
  <Upload :accept="accept" :custom-request="onUpload" :file-list="[]" :show-file-list="false">
    <template #upload-button>
      <div class="arco-upload-list-item">
        <Image
          v-if="modelValue"
          :style="{ minHeight }"
          :width="width"
          :height="height"
          :preview="false"
          :src="modelValue"
          :fit="fit"
          show-loader
        />
        <div v-else :style="style" class="arco-upload-picture-card">
          <div class="arco-upload-picture-card-text">
            <IconPlus />
          </div>
        </div>
      </div>
    </template>
  </Upload>
</template>

<script lang="ts" setup>
import useOss from '@/hooks/oss';
import { computed } from 'vue';
import { IconPlus } from '@arco-design/web-vue/es/icon';
import { UploadRequest, useFormItem, Upload, Image } from '@arco-design/web-vue';

type PropType = {
  modelValue?: string;
  accept?: string;
  width?: number | string;
  height?: number | string;
  minHeight?: string;
  fit?: 'none' | 'contain' | 'cover' | 'fill' | 'scale-down' | undefined;
};

const props = withDefaults(defineProps<PropType>(), {
  modelValue: '',
  accept: 'image/*',
  width: 80,
  height: 'auto',
  minHeight: '100%',
  fit: 'cover',
});

const emits = defineEmits(['update:modelValue']);
const { eventHandlers } = useFormItem();

const style = computed(() => {
  return {
    width: `${props.width}px`,
    height: props.height.constructor === String ? 'auto' : `${props.height}px`,
    maxWidth: '100%',
    maxHeight: '100%',
    minHeight: '80px',
  };
});

const { upload } = useOss();

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

  if (fileItem.file) {
    upload(fileItem.file, 'image').then((res) => {
      emits('update:modelValue', res?.url || '');
      eventHandlers.value?.onChange?.();
    });
  }

  return {};
};
</script>

<style lang="less" scoped>
:deep(.arco-avatar-text) {
  width: 100%;
  height: 100%;
}

:deep(.arco-upload-list-item) {
  margin-top: 0 !important;
}

.no-avatar {
  position: absolute;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>