<template>
  <div class="fileUpload">
    <TButton @click="BeforeUpload"
      >{{ label }}
      <input
        ref="referenceUpload"
        class="custom-upload-file"
        type="file"
        @change="displayimg"
        name="myfile"
        accept="image/png, image/jpeg"
        required
      />
    </TButton>
  </div>
</template>

<script lang="ts" setup>
import { Button as TButton } from 'tdesign-vue-next';
import { ref } from 'vue';
import { v4 } from 'uuid';
const props = defineProps<{
  list_len: number;
  label: string;
}>();
const emit = defineEmits(['SubmitImg']);
const referenceUpload = ref<HTMLElement>();
const BeforeUpload = () => {
  referenceUpload.value.click();
};
const displayimg = (e) => {
  //   单个上传
  //   var file = e.target.files[0];
  //   //判断当前是否支持使用FileReader
  //   if (window.FileReader) {
  //     //创建读取文件的对象
  //     var fr = new FileReader();
  //     //以读取文件字符串的方式读取文件 但是不能直接读取file
  //     //因为文件的内容是存在file对象下面的files数组中的
  //     //该方法结束后图片会以data:URL格式的字符串（base64编码）存储在fr对象的result中
  //     fr.readAsDataURL(file);
  //     fr.onloadend = function () {
  //       // 添加到列表
  //       emit('SubmitImg', {
  //         img: fr.result.replace(/\s/g, encodeURIComponent(' ')),
  //         id: props.list_len + 1 + '',
  //       });
  //     };
  //   }
  //   循环获取
  let files = e.target.files;
  for (let i = 0, j = files.length; i < j; i++) {
    console.log(files[i]);
    //判断当前是否支持使用FileReader
    if (window.FileReader) {
      //创建读取文件的对象
      const fr = new FileReader();
      //以读取文件字符串的方式读取文件 但是不能直接读取file
      //因为文件的内容是存在file对象下面的files数组中的
      //该方法结束后图片会以data:URL格式的字符串（base64编码）存储在fr对象的result中
      fr.readAsDataURL(files[i]);
      fr.onloadend = function () {
        if (fr.result) {
          // 添加到列表
          emit('SubmitImg', {
            img: fr.result.replace(/\s/g, encodeURIComponent(' ')),
            id: props.list_len + '' + v4(),
          });
        }
      };
    }
  }
  referenceUpload.value.value = null;
};
</script>

<style lang="less">
@import '@/style/variables.less';
.fileUpload {
  position: relative;
  overflow: hidden;
  height: 32px;
  color: white;
  font-size: @font-size-16;
  .custom-upload-file {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: none;
  }
}
</style>
