<template>
  <div>
    <h1>{{ title }}</h1>
    <div class="clearfix">
      <!-- <img :src="imageUrl" /> -->

      <template v-if="!loading">
        <a href="javascript:;" class="file"
          >{{ buttonText }}
          <input id="" name="" type="file" @change="handleChange" />
        </a>
        <span v-if="infoMsg" class="message">{{ infoMsg }}</span>
        <p
          v-if="!loading && fileInfo.fileName"
          style="position: absolute; width: 300px"
        >
          {{ fileInfo.fileName }}
        </p>
      </template>
      <a-space v-else class="spin-block"> <a-spin size="large" /></a-space>
    </div>
  </div>
</template>
<script lang="ts">
import {
  PlusOutlined,
  LoadingOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import { message, Spin, Space } from "ant-design-vue";
import {
  defineComponent,
  onMounted,
  ref,
  computed,
  watch,
  reactive,
  SetupContext,
  provide,
} from "vue";
// import { getAvatarUrl, uploadFeedbackResource } from '@/api/system/user'
// import { uploadFirm } from '@/api/system/firmware'
// import { AxiosResponse } from 'axios'
// import { BasicResponseModel } from '@/api/BasicResponseModel'

interface uploadFileInfo {
  fileUrl: string;
  fileMd5: string;
  fileSha256: string;
  fileName?: string;
  fileType?: string;
}

function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
    UploadOutlined,
    [Spin.name]: Spin,
    [Space.name]: Space,
  },
  props: {
    size: {
      type: Number,
      default: () => 10,
    },
    types: {
      type: String,
      default: () => "all",
    },
    fileType: {
      type: String,
    },
    avatarUrl: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    buttonText: {
      type: String,
      required: true,
    },
    successMsg: {
      type: String,
      required: true,
    },
    infoMsg: {
      type: String,
      required: true,
    },
  },
  setup(props, ctx: SetupContext) {
    const loading = ref<boolean>(false);
    const fileInfo = ref<uploadFileInfo>({} as uploadFileInfo);

    const handleChange = (evnt) => {
      let reader = new FileReader();
      const uploadFile = evnt.target.files[0];
      const isCheckFile = checkFile(uploadFile);
      if (isCheckFile) {
        let rs = reader.readAsDataURL(uploadFile);
        let blob;
        reader.onload = (e) => {
          if (e.target) {
            blob = dataURLtoBlob(e.target.result);
          }
          loading.value = true;
          // uploadFirm(blob, props.fileType, uploadFile.name).then(
          //   (res: AxiosResponse<BasicResponseModel<uploadFileInfo>>) => {
          //     if (res.data.errorCode === "0") {
          //       fileInfo.value.fileUrl = res.data.data.fileUrl;
          //       fileInfo.value.fileMd5 = res.data.data.fileMd5;
          //       fileInfo.value.fileSha256 = res.data.data.fileSha256;
          //       fileInfo.value.fileName = uploadFile.name;
          //       fileInfo.value.fileType = uploadFile.type;
          //       loading.value = false;
          //       message.success(props.successMsg);
          //     } else {
          //       message.error(res.data.msg);
          //     }
          //   }
          // );
        };
      }
    };

    const checkFile = (file) => {
      const isLt100M = file.size / 1024 / 1024 < props.size;
      const ext = file.name?.split(".")[1];
      if (!isLt100M) {
        message.error("照片大小需低于" + props.size + "MB!");
        return false;
      }
      debugger;
      if (props.types !== "all") {
        if (!(ext?.toLowerCase() === props.types)) {
          message.error("文件需为" + props.types + "格式!");
          return false;
        }
      }
      return true;
    };
    return {
      loading,
      fileInfo,
      handleChange,
    };
  },
});
</script>
