import userApi from '../../api/user';

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    loading:{
      type:Boolean,
      value:false
    },
    maxImgCount:{
      type:Number,
      value:10
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tempImgs:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    chooseImage(){
      wx.chooseMedia({
        count:this.properties.maxImgCount - this.data.tempImgs.length,
        mediaType:['image'],
        sourceType:['camera'],
        success:(res)=>{
          this.setData({
            tempImgs:this.data.tempImgs.concat(res.tempFiles)
          });
          this.uploadImages();
        }
      });
    },
    async uploadImages(){
      let imgIndex = -1;
      const file = this.data.tempImgs.find((item,index)=>{
        imgIndex = index;
        return !item.uploaded;
      });
      if(!file){
        this.setData({
          loading:false
        })
        return;
      }
      this.setData({
        loading:true
      })
      let onProgress = (res)=>{
        //进度
        this.setData({
          [`tempImgs[${imgIndex}].progress`]:res.progress
        })
      }
      //无奈之举，不大范围改动代码的同时，我需要获取到上传任务task，来中断上传操作，不然要出问题task在上传时被附加到了onProgress
      this.data.tempImgs[imgIndex].onProgress = onProgress;
      let uploadResult = {};
      try {
        // uploadResult = await userApi.uploadImg({tempFilePath:'123'},onProgress); 
        uploadResult = await userApi.uploadImg(file,onProgress); 
      } catch (error) {
        //这里要死循环
        // await this.uploadImages();
        // return;
      }
      if(uploadResult.url){
        this.setData({
          [`tempImgs[${imgIndex}].uploaded`]:true,
          [`tempImgs[${imgIndex}].serverUrl`]:uploadResult.url
        })
        await this.uploadImages();
      }else{
        //上传失败
        this.setData({
          loading:false
        })
        wx.showToast({
          icon:'error',
          title: '上传失败',
        })
        return new Error('失败')
      }
    },
    removeImage(event){
      const index = event.currentTarget.dataset.index;
      if(this.data.tempImgs[index].onProgress&&this.data.tempImgs[index].onProgress.task){
        this.data.tempImgs[index].onProgress.task.abort();
      }
      console.log('remove',new Date().getTime());
      this.data.tempImgs.splice(index,1);
      this.setData({
        tempImgs:this.data.tempImgs
      });
    },
    async getUploadedUrl(){
      await this.uploadImages();
      let urls = [],loadAll = true;
      this.data.tempImgs.map((item)=>{
        if(!item.uploaded)loadAll = false;
        urls.push(item.serverUrl);
      })
      if(loadAll){
        return urls
      }
      throw new Error('图片上传失败');
    },
    setUploadedImgs(imgs){
      this.setData({
        tempImgs:imgs.concat(this.data.tempImgs)
      })
    }
  },
  lifetimes:{
    attached(){
      console.log('img uploader init');
    }
  }
})