<template>
  <div class="local-file-upload">
    <div
      class="not-upload-status"
      @click="BeforeUpload"
      v-if="UploadStatus == 'wait'"
    >
      <div class="label-1">选择图片</div>
      <div class="label-2">或拖图片到此处上传</div>
      <div class=""><UploadSvg></UploadSvg></div>
      <CustomResetButton class="chose-local-image" bold
        >选择图片</CustomResetButton
      >
    </div>
    <div class="upload-success-box" v-else>
      <span class="reset-svg" @click="BeforeUpload">
        <ResetSvg></ResetSvg>
      </span>
      <img :src="CurrentImage" alt="" />
    </div>
    <input
      ref="referenceUpload"
      class="custom-upload-file"
      type="file"
      @change="displayimg"
      name="myfile"
      accept="image/png, image/jpeg"
      required
    />
  </div>
</template>

<script lang="ts" setup>
import CustomResetButton from '@/components/custom/resetbutton.vue';
import UploadSvg from '@/assets/svg/upload/uploadTip2.svg';
import { ref } from 'vue';
import { v4 } from 'uuid';
import ResetSvg from '@/assets/svg/upload/reset.svg';
const props = defineProps<{
  modelValue: string;
}>();
const emit = defineEmits(['update:modelValue', 'SubmitImg']);
const referenceUpload = ref<HTMLElement>();
// 上传状态
const UploadStatus = ref('wait');
// 当前图片
const CurrentImage = ref('');
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) {
          // 添加到列表
          const img = fr.result.replace(/\s/g, encodeURIComponent(' '));
          emit('SubmitImg', {
            img: img,
            id: 1 + '' + v4(),
          });
          emit('update:modelValue', img);
          CurrentImage.value = img;
          UploadStatus.value = 'success';
        }
      };
    }
  }
  referenceUpload.value.value = null;
};
</script>

<style lang="less">
@import '@/style/variables.less';
.local-file-upload {
  position: relative;
  color: white;
  font-size: @font-size-16;
  height: 100%;
  background: #181818;
  border: 0.5px dashed #b1b5c4;
  border-radius: 8px;
  cursor: pointer;
  .not-upload-status {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .chose-local-image {
      background: #00dddd !important;
      font-size: 16px;
      color: #000000;
    }
    .label-1 {
      font-weight: 600;
      font-size: @font-size-20;
      color: #b3bfde;
    }
    .label-2 {
      font-weight: 500;
      font-size: @font-size-16;
      color: #888fa1;
    }
    & > :not(:first-child) {
      margin-top: 12px;
    }
  }
  .upload-success-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 80%;
      height: 80%;
    }
    .reset-svg {
      cursor: pointer;
      position: absolute;
      top: 12px;
      right: 12px;
    }
  }
  .custom-upload-file {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: none;
  }
}
</style>
