<template>
  <div class="van-uploader">
    <div class="van-uploader__wrapper">
      <div
        class="van-uploader__preview"
        v-for="(item, index) in uploadVideoList"
        :key="index"
      >
        <div class="van-image van-uploader__preview-image">
          <!-- <video
            style="width: 80px; height: 80px; object-fit: cover"
            :src="item"
          ></video> -->
          <img
            :src="item"
            class="van-image__img"
            style="width: 80px; height: 80px; object-fit: cover"
          />
          <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>
      <div class="van-uploader__upload" v-show="uploadVideoList.length < 3">
        <van-uploader
          :after-read="beforeRead"
          :max-size="50 * 1024 * 1024"
          @oversize="onOversize"
        >
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script setup>
import { showFailToast } from "vant";
import { ref } from "vue";

const tagList = ref([]);
const uploadTitle = ref("");
const currentTag = ref(null);
const tagId = ref(null);
const fileIdArr = ref([]);
const uploadVideoList = ref([]); // 选中的上传视频列表
const videoSrc = ref(""); // 选中的视频的src，用来显示视频
const uploadDocList = ref([]); // 选中的上传文档列表
const uploadAudioList = ref([]); // 选中的上传音频列表
const uploadPicList = ref([]); // 选中的上传图片列表
const picSrc = ref(""); // 选中的图片的src，用来显示图片缩略图
let tmp = ref([]);
const fileTypes = ["video/mp4"];

// 文件选中后先提交给后台，后台根据选中的文件，返回数组（这一业务根据后台而定）
const beforeRead = (file) => {
  console.log(file, "111111111");
  //   if (!fileTypes.includes(file.file.type)) {
  //     showFailToast("仅可上传视频");
  //     return false;
  //   }

  let formData = new FormData(); // 为上传文件定义一个formData对象
  let config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };
  // let uploadUrl = URL.createObjectURL(file) as any; // 将选中的上传文件转化为二进制文件，显示在页面上
  uploadVideoList.value.push(file.content);
  // console.log(uploadVideoList.value, "2222222222")
  // videoSrc.value = file.content;
  // console.log(videoSrc.value, "333333333")
  // 这里使用foreach是为了将选中的多个文件都添加进定义的formdata变量中
  uploadVideoList.value.forEach((item) => {
    console.log(item, "4444444");
    formData.append(item.name, item);
  });

  // formData.append(file.name, file); // 单个文件上传时可以这么写，上面的foreach就可以删掉
  // this.$api.post(uploadFile, formData, config).then(res => {
  //   this.fileIdArr = res.data.data;  // 把選中的文件傳送給後台
  // }).catch(err => {
  //   Toast('文件上傳失敗！')
  // })
};
// 删除待上传的文件
const delBtn = (index) => {
  // 先判断当前的选中的索引是否是在有效范围中，如果不是则跳出方法
  if (isNaN(index) || index >= uploadVideoList.value.length) {
    return false;
  }
  const tmp = [];
  // 将没被选中的上传文件存放进一个临时数组中
  for (let i = 0; i < uploadVideoList.value.length; i++) {
    if (uploadVideoList.value[i] !== uploadVideoList.value[index]) {
      tmp.push(uploadVideoList.value[i]);
    }
  }
  // 存放当前未被选中的上传文件
  uploadVideoList.value = tmp;
};
const doSubmit = () => {
  let params = {
    classify: tagId.value, // 针对视频资源时对应的分类id
    file: fileIdArr.value, // 选择完文件后，调用uploadFile这个接口，后端返回的数组
    resourceColumnId: JSON.parse("视频"), // 资源栏目id(视频、图片、音频、文档)
    title: uploadTitle.value, // 上传时填写的标题
  };
  // this.$api.post(addResources, params).then(res => {
  //   if(res.data.code === 1001){
  //     if(columnName === '视频'){
  //       this.$router.push({name: 'myVideo'});
  //     }else {
  //       this.$router.push({name: 'myResourceClassify'});
  //     }
  //   }
  // }).catch(err => {
  //   console.log(err)
  // })
};

const onOversize = (file) => {
  showFailToast("支持MP4格式的视频，每个视频最大50M");
  return false;
};
</script>
<style lang="scss" scoped>
.upload {
  box-sizing: border-box;
}

.forPreview_video {
  position: relative;

  /*background: rgba(0,0,0,.7);*/
  video {
    width: 95%;
    max-height: 430px;
  }

  .delte {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.forPreview_doc,
.forPreview_audio {
  display: flex;
  margin-bottom: 10px;
  align-items: center;

  img {
    width: 56px;
    height: 56px;
    margin-right: 20px;
  }

  span:nth-of-type(1) {
    flex: 1;
  }

  span:nth-of-type(2) {
    margin-right: 20px;
  }
}

.forPreview_pic {
  display: flex;
  align-items: flex-end;

  img {
    width: 160px;
    height: 160px;
  }
}

.diy-detail {
  width: 100%;
  overflow: hidden;

  .btn {
    span {
      margin-bottom: 10px;
    }
  }

  .van-cell {
    background-color: #f0f0f0;
    border-radius: 35px;
    font-size: 26px;
    height: 69px;
    line-height: 69px;
    padding: 0 22px;
    color: #999;
  }

  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }

  p {
    height: 64px;
    line-height: 64px;
    font-size: 32px;
    color: #333;
    position: relative;
    padding-left: 16px;
  }

  p::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "*";
    color: #ff0000;
  }

  span {
    display: inline-block;
    width: 157px;
    background: #f0f0f0;
    border-radius: 35px;
    color: #999;
    font-size: 26px;
    padding: 14px 18px;
    margin-right: 28px;
    text-align: center;
  }

  .active {
    color: #fff;
    background: linear-gradient(to right, #fd5130, #fa6c34);
  }
}

.diy-submit {
  position: fixed;
  height: 150px;
  width: 90%;
  bottom: 0;
  background: #fff;

  .van-button {
    width: 100%;
    height: 90px;
    border-radius: 45px;
    font-size: 36px;
    color: #fff;
    background: linear-gradient(to right, #fd5130, #fa6c34);
    top: 50%;
    transform: translate(0, -50%);
  }

  .van-button--default {
    border: none;
  }
}

.van-uploader__preview {
  margin: 0 10px;
}
</style>
