<template>
  <uni-file-picker
      v-model="fileList"
      :auto-upload="false"
      file-mediatype="all"
      mode="grid"
      @delete="delFile"
      @select="select"
  >
    <text class="iconfont icon-zengjiatianjiajiahao"></text>
  </uni-file-picker>
</template>
<script setup>
import {ref, reactive, watch} from "vue";
const props = defineProps({
  appendixEntityList: {default: []},
});
const emit = defineEmits(["update:appendixEntityList"]);
let fileList = ref([]);
// 選擇上傳觸發(fā)函數(shù)
const select = (e) => {
  // 根據(jù)所選圖片的個數(shù)，多次調(diào)用上傳函數(shù)
  let promises = [];
  for (let i = 0; i < e.tempFilePaths.length; i++) {
    const promise = uploadFiles(e.tempFilePaths, i);
    promises.push(promise);
  }
  Promise.all(promises).then(() => {
  });
};
// 上傳函數(shù)
const uploadFiles = async (tempFilePaths, i) => {
  await uni.uploadFile({
    url: '/api/xxx/xxxx/xxxx', //后端用于處理圖片并返回圖片地址的接口
    filePath: tempFilePaths[i],
    name: "file",
    header: {
      Authorization: "Bearer " + uni.getStorageSync("token") || "",
      ContentType: "application/x-www-form-urlencoded",
      skipToken: true,
    },
    success: (res) => {
      let v = JSON.parse(res.data); //返回的是字符串，需要轉(zhuǎn)成對象格式
      if (v.code == 200) {
        props.appendixEntityList.push({
          appendixId: v.data.id,
          appendixOriginal: v.data.original,
          appendixUrl: v.data.attachUrl,
        });
        emit("update:appendixEntityList", props.appendixEntityList);
      }
    },
    fail: () => {
      console.log("err");
    },
  });
};
//文件列表回顯
const fileListEcho = () => {
  if (props.appendixEntityList.length > 0) {
    fileList.value = [];
    props.appendixEntityList?.forEach((v) => {
      //改成官方文檔要求的格式。才能回顯附件
      fileList.value.push({
        name: v?.appendixOriginal,
        extname: v?.appendixType,
        url: v?.appendixUrl,
      });
    });
  }
};
// 移出圖片函數(shù)
const delFile = async (val) => {
  //在提交數(shù)組中刪除那個被刪的文件
  props.appendixEntityList.some((v, i) => {
    if (v.appendixOriginal === val.tempFile.name) {
      props.appendixEntityList.splice(i, 1);
      emit("update:appendixEntityList", props.appendixEntityList);
      return true;
    }
  });
};
watch(
    () => props.appendixEntityList,
    (newVal) => {
      fileListEcho();
    },
);
</script>
<style lang="scss" scoped>
.icon-zengjiatianjiajiahao {
  font-size: 42rpx;
  color: #a2a3a5;
  position: absolute;
  right: 0;
  top: -50rpx;
}
</style>

    <!--        上傳-->
        <c-upload
          ref="uploadRef"
          v-model:appendixEntityList="form.appendixEntityList"
        ></c-upload>