<template>
  <!-- 公共图片上传 -->
  <div class="uploaderPage">
    <!-- 上传图片 -->
    <van-uploader
      v-model="fileList"
      :after-read="afterRead"
      :max-count="maxCount"
      :max-size="50 * 1024 * 1024"
      @oversize="onOversize"
      :accept="acceptFormat"
      :disabled="isDisabled"
      :before-delete="deleBrfore"
      @delete="deleteFile"
    >
    </van-uploader>
    <div v-if="acceptFormat == 'video/*'">
      <!-- 显示视频列表 -->
      <div v-if="fileList.length > 0">
        <p v-for="item in fileList" :key="item.fileNo" class="van-ellipsis blueFont" @click="checkVideo(item.url)">
          {{ item.file ? item.file.name : item.name }}
        </p>
      </div>
      <!-- 查看视频弹窗 -->
      <van-popup v-model:show="showVideo" class="uploadVideo">
        <video v-if="showVideo" style="width: 100vw; height: auto" title="视频" :src="videoUrl" :autoPlay="true" />
      </van-popup>
    </div>
  </div>
</template>

<script setup name="uploaderPage">
import { fileUpload, fileDelete } from '@/api/publicApi.js';
import { useStore } from '@/pinia/store.js';
import { getCurrentInstance } from 'vue';

const props = defineProps({
  //最大上传数
  maxCount: {
    type: Number,
    default: 1,
  },
  //保存的文件数组
  saveFileArr: {
    type: Array,
    default: () => [],
  },
  // 文件格式
  acceptFormat: {
    type: String,
    default: 'image/*', //  video/*
  },
  // 是否禁用文件上传
  isDisabled: {
    type: Boolean,
    default: false,
  },
});
const pinias = useStore();
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const fileList = ref([]); //文件列表
const maxCount = props.maxCount; //最大上传数
const acceptFormat = props.acceptFormat; //文件格式
console.log(acceptFormat);
const showVideo = ref(false);
const videoUrl = ref('');

// 查看视频弹窗
function checkVideo(url) {
  videoUrl.value = url;
  showVideo.value = true;
}

// 上传图片2
const afterRead = (fileOBJ) => {
  fileOBJ.status = 'uploading';
  fileOBJ.message = '上传中...';
  let imgFile = null;
  if (fileOBJ.file.size / 1024 > 500 && fileOBJ.file.type.includes('image')) {
    blobToBase64(fileOBJ.file, fileOBJ.file.name).then((res) => {
      imgFile = res;
    });
  } else {
    imgFile = fileOBJ.file;
  }
  // 配置表单
  let formData = new FormData();
  let config = {
    headers: { 'Content-Type': 'multipart/form-data' },
  };
  formData.append('files', imgFile);
  fileUpload(formData, config).then((res) => {
    if (res && res.data.code == 1) {
      fileOBJ.status = 'done';
      fileOBJ.message = '上传成功';
      // 业务参数赋值
      fileOBJ.url = res.data.data[0].fileCloudStorageKey;
      fileOBJ.fileNo = res.data.data[0].fileNo;
      fileOBJ.fileCloundInfo = res.data.data[0];
      console.log(fileList.value);
      emit('update:saveFileArr', fileList.value); //绑定的传值赋值
    } else {
      fileOBJ.status = 'failed';
      fileOBJ.message = '上传失败';
      console.log(fileList.value);
    }
  });
};
// 图片删除
const deleBrfore = async (file) => {
  return true;
};

const deleteFile = () => {
  emit('update:saveFileArr', fileList.value);
};
const blobToBase64 = async (blob, fileName) => {
  const reader = await new FileReader(); // 实例化一个reader文件
  await reader.readAsDataURL(blob); // 添加二进制文件
  return new Promise((resolve, reject) => {
    reader.onload = async (event) => {
      const base64 = await event.target.result; // 获取到它的base64文件
      const scale = 0.6; // 设置缩放比例 （0-1）
      let file = await compressImg(base64, scale, fileName);
      resolve(file);
    };
  });
};
// 压缩大小
const compressImg = (base64, scale, fileName) => {
  // 处理缩放，转换格式
  // 用canvas来压缩
  const img = new Image();
  img.src = base64;
  return new Promise((resolve, reject) => {
    img.onload = async () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.setAttribute('width', img.width * scale);
      canvas.setAttribute('height', img.height * scale);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      // 转成base64 文件
      base64 = canvas.toDataURL('image/jpeg', 0.8); //0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值
      const arr = base64.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bytes = atob(arr[1]);
      const bytesLength = bytes.length;
      const u8arr = new Uint8Array(bytesLength);
      for (let i = 0; i < bytes.length; i++) {
        u8arr[i] = bytes.charCodeAt(i);
      }
      const file = await new File([u8arr], fileName, { type: mime });
      resolve(file);
    };
  });
};
function onOversize() {
  proxy.showFailToast('上传的文件最大为50M');
}
onMounted(() => {
  console.log('修改时图片回显--', props.saveFileArr);
  // 修改时图片回显
  fileList.value = [];
  // debugger;
  props.saveFileArr.map((item) => {
    let params = {
      fileNo: item.fileNo,
      name: item.name,
      status: 'success',
      url: item.url,
    };
    fileList.value.push(params);
    console.log('回显数据', fileList.value);
  });
});
onBeforeUnmount(() => {
  fileList.value = [];
});
</script>
<style lang="less">
/* 添加这段样式后，Primary Button 会变成红色 */
:root:root {
  --van-uploader-size: 150px;
}
.van-uploader__file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploaderPage {
  width: 100%;
  .blueFont {
    color: #0c60e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>