<template>
  <a-upload
    :accept="accept"
    :custom-request="onUpload"
    :file-list="[]"
    :show-file-list="false"
  >
    <template #upload-button>
      <div class="arco-upload-list-item">
        <a-image
          v-if="modelValue"
          :height="height"
          :preview="false"
          :src="modelValue"
          :width="width"
        />
        <div v-else :style="style" class="arco-upload-picture-card">
          <div class="arco-upload-picture-card-text">
            <IconPlus />
          </div>
        </div>
      </div>
    </template>
  </a-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 } from '@arco-design/web-vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  size: {
    type: Number,
    default: 80,
  },
  accept: {
    type: String,
    default: 'image/*',
  },
  width: {
    type: Number,
    default: 80,
  },
  height: {
    type: [Number, String],
    default: 'auto',
  },
});

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%;
}

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