<template>
  <div class="van-uploader">
    <div class="van-uploader__wrapper">
      <!-- 图片预览 -->
      <div
        class="van-uploader__preview"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <div class="van-image van-uploader__preview-image">
          <img
            :src="item"
            class="van-image__img"
            style="object-fit: cover"
            @click="previewImgBtn(index)"
          />
        </div>

        <div
          role="button"
          class="van-uploader__preview-delete van-uploader__preview-delete--shadow"
          :tabindex="index"
          aria-label="删除"
          @click="delBtn(index)"
        >
          <i
            class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon"
          >
          </i>
        </div>
      </div>

      <!-- 图片选择 -->
      <div class="van-uploader__upload" @click="selectImg">
        <i
          class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon"
        >
        </i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
const imgList = ref([]);
const imgList1 = ref([]);
const selectImg = () => {
  console.log("===selectImg===");
  wx.chooseImage({
    count: 9, // 默认9
    sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
    defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
    isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
    success: function (res) {
      console.log("==chooseImage==", res);
      const localIds = res.localIds;
      console.log("==localIds==", localIds);
      // 返回选定照片的本地ID列表，
      // andriod中localId可以作为img标签的src属性显示图片；
      // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
      console.log("==wkwebview===", window.__wxjs_is_wkwebview);
      /*判断ios是不是用的 wkwebview 内核*/
      if (window.__wxjs_is_wkwebview) {
        console.log("==__wxjs_is_wkwebview===");
        localIds.forEach((element) => {
          console.log("==forEach==element==", element, localIds[0].toString());
          wx.getLocalImgData({
            localId: element,
            success: function (res) {
              console.log("==getLocalImgData==", res);
              var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
              console.log("==localData==", localData);
              localData = localData.replace("jgp", "jpeg"); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
              imgList.value.push(localData);
            },
          });
        });
      } else {
        //如果不是用的wkwebview 内核 或者是用的安卓系统
        console.log("==不是用的wkwebview===");
        imgList.value.push(...localIds);
      }
    },
  });
};
// 删除待上传的文件
const delBtn = (index) => {
  // 先判断当前的选中的索引是否是在有效范围中，如果不是则跳出方法
  if (isNaN(index) || index >= imgList.value.length) {
    return false;
  }
  const tmp = [];
  // 将没被选中的上传文件存放进一个临时数组中
  for (let i = 0; i < imgList.value.length; i++) {
    if (imgList.value[i] !== imgList.value[index]) {
      tmp.push(imgList.value[i]);
    }
  }
  // 存放当前未被选中的上传文件
  imgList.value = tmp;
};
const previewImgBtn = (index) => {
  // 先判断当前的选中的索引是否是在有效范围中，如果不是则跳出方法
  if (isNaN(index) || index >= imgList.value.length) {
    return false;
  }
  const curUrl = imgList.value[index];
  const urls = [];
  for (let i = 0; i < imgList.value.length; i++) {
    if (imgList.value[i] !== imgList.value[index]) {
      urls.push(imgList.value[i]);
    }
  }
  wx.previewImage({
    current: curUrl, // 第一张显示的图片链接
    urls: urls, // 需要预加载的图片http链接列表，预加载后，可以滑动浏览这些图片
  });
};
</script>
<style lang="scss" scoped>
.van-uploader__input_copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}
</style>
