// component/uploadImageExample/uploadImageExample.js
import { uploadFile } from '../../libs/request.js'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    currentIndex: {
      type: Number,
      value: 0
    },
    uploadImage: {
      type: String,
      value: ''
    },
    up: {
      type: String,
      value: ''
    },
    down: {
      type: String,
      value: ''
    },
    uploadImages: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowExample: false,
    exampleImages: [
      {
        src: 'http://img10.static.yhbimg.com/article/2018/11/21/15/01312f5ad204d40e0ae7ee9852d0ab942b.png',
        title: '瑕疵细节',
        style: 'example',
        imageStyle: 'example-image'
      }, {
        src: '/images/and@3x.png',
        style: 'and',
        imageStyle: 'and-image'
      }, {
        src: 'http://img10.static.yhbimg.com/article/2018/11/21/15/0181d222be867f9ae182045ca7f99864e0.png',
        title: '合格证',
        style: 'example',
        imageStyle: 'example-image'
      }, {
        src: '/images/and@3x.png',
        style: 'and',
        imageStyle: 'and-image'
      }, {
        src: 'http://img10.static.yhbimg.com/article/2018/11/21/15/01515d77fa41dc25e6bcd3996d0d76dabc.png',
        title: '条码标签',
        style: 'example',
        imageStyle: 'example-image'
      }, {
        src: '/images/and@3x.png',
        style: 'and',
        imageStyle: 'and-image'
      }, {
        src: 'http://img12.static.yhbimg.com/article/2018/11/21/15/02687dd41e9835128bdaa7854629dd60f0.png',
        title: '领标',
        style: 'example',
        imageStyle: 'example-image'
      }, 
    ],
    tempImagePaths: [],
    finalImageArray: [],
    imageBgWidth: 'upload-image-1'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showExample(e) {
      const isShowExample = !this.data.isShowExample;
      this.setData({
        isShowExample
      })
    },
    deleteImageFromUploadImages(e) {
      console.log(e);
      const index = e.currentTarget.dataset.index;
      console.log(index);
      let tempImagePaths = this.data.tempImagePaths;
      let finalImageArray = this.data.finalImageArray;
      tempImagePaths.splice(index, 1);
      finalImageArray.splice(index, 1);
      this.setData({
        tempImagePaths, 
        finalImageArray
      })
      this.triggerEvent('updateimagearrays', { currentIndex: this.properties.currentIndex, finalImageArray });
    },
    previewImages(e) {
      const index = e.target.dataset.index;
      console.log(index);
      let tempImagePaths = this.data.tempImagePaths;
      wx.previewImage({
        current: tempImagePaths[index],
        urls: tempImagePaths,
      })
    },
    selectPhoto(e) {
      let tempImagePaths = this.data.tempImagePaths;
      let finalImageArray = this.data.finalImageArray;
      let count = 4 - tempImagePaths.length;
      const that = this;
      wx.chooseImage({
        count: count,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          const imagesPromiseArr = [];
          tempFilePaths.forEach((item, index) => {
            imagesPromiseArr.push(uploadFile(item, index + finalImageArray.length).then((data) => { 
              console.log('uploadFile.data: ', data);
              console.log('uploadFile.then: ', data.index);
              return { 
                index: data.index, 
                path: data.imagesList[0]
              }
            }));
          });
          wx.showLoading({
            title: '图片上传中...',
          })
          Promise.all(imagesPromiseArr).then((res) => {
            res.forEach((item) => {
              finalImageArray[item.index] = item.path;
            });
            that.setData({
              finalImageArray
            })
            that.triggerEvent('updateimagearrays', { currentIndex: that.properties.currentIndex, finalImageArray });
            console.log(finalImageArray);
            wx.hideLoading();
          }).catch(error => {
            wx.hideLoading();
          })
          if (tempImagePaths.length < 4) {
            tempImagePaths = tempImagePaths.concat(tempFilePaths);
            that.setData({
              tempImagePaths
            })
          }

        }
      })
    },
    confirmReasonInfo(e) {
      this.triggerEvent('confirmreason', { currentIndex: this.properties.currentIndex, reason: e.detail.value});
    }
  }
})