<script setup lang="ts">
import { ref } from 'vue';
import { PlusOutlined, LoadingOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';

defineProps({
  url: {
    type: String,
    required: false,
  }
})

const emits = defineEmits<{
  (e: "change", file: File): void;
  (e: "delete"): void;
}>();

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    getBase64(info.file.originFileObj as Blob, (base64Url: string) => {
      imageUrl.value = base64Url;
      loading.value = false;
    });
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};

const beforeUpload = (file: File) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('仅支持JPG和PNG格式的图片');
  }

  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('仅支持小于2MB的图片');
  }
  if (!isJpgOrPng || !isLt2M) {
    return false;
  }

  emits("change", file);

  return false;
};

function onDelete() {
  emits("delete")
}
</script>

<template>
  <a-row>
    <a-col>
      <a-upload
        v-model:file-list="fileList"
        name="avatar"
        list-type="picture-card"
        class="logo-uploader"
        :show-upload-list="false"
        action="/"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <img width="104" v-if="url" :src="url" alt="企业Logo" />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </a-col>
    <a-col class="description-wrap">
      <div class="description">
        <div style="flex: 1;">
          请按需上传企业logo<br />仅支持 jpg.  png.  格式图片
        </div>
        <div>
          <a-popconfirm
            title="确定删除此Logoo？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDelete"
            placement="topRight"
          >
            <a-button :disabled="!url"><delete-outlined /></a-button>
          </a-popconfirm>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
@import "@/assets/base.scss";

.logo-uploader {
  margin-left: 20px;
}

.description-wrap {
  font-size: 0.85em;
  color: $desc-color;
  padding-bottom: 8px;

  .description {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
  }
}
</style>