import userAPI from "../../../api/user";
import commonAPI from "../../../api/common";
import {rpxToPx} from '../../../utils/util';

// pages/try/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    personImage:{},
    topClothing:{},
    bottomClothing:{},
    uploadPercent:0,
    defaultPersonImage:'',
    imgHeight:0,
    trying:false,
    history:[],
    currentHistory:{},

    hasTryon:false,
    personImageUploading:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const windowInfo = wx.getWindowInfo();
    console.log(windowInfo);
    const imgWidth = windowInfo.windowWidth - rpxToPx(80);
    const imgHeight = imgWidth*4/3;
    console.log(imgWidth,imgHeight);
    this.setData({
      imgHeight
    })
    this.getDefaultPersonImage();
    this.getHistory();
  },
  getHistory(){
    userAPI.tryonHistory().then((data)=>{
      let hasTryon = false;
      data.map((item)=>{
        if(!item.completion_url&&item.status!='失败'){
          hasTryon = true;
          this.checkResult(item.id)
        }
      })
      this.setData({
        history:data,
        hasTryon
      })
    })
  },
  chooseImg(){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        wx.cropImage({
          cropScale:'3:4',
          src: res.tempFiles[0].tempFilePath,
          success:(_res)=>{
            _res.uploading = true;
            this.setData({
              personImage:_res
            })
            commonAPI.upload(_res).then((data)=>{
              this.setData({
                "personImage.serverUrl":data.url
              });
              userAPI.addPersonImages(data.url).then(()=>{
                return this.getDefaultPersonImage();
              })
            }).finally(()=>{
              this.setData({
                'personImage.uploading':false
              })
            });
            _res.task.onProgressUpdate((detail)=>{
              this.setData({
                uploadPercent:detail.progress
              })
            })
          }
        })
      }
    })
  },

  chooseTopClothing(){
    if(this.data.currentHistory&&this.data.currentHistory.id){
      return;
    }
    this.chooseAndUpload('topClothing');
  },
  chooseBottomClothing(){
    if(this.data.currentHistory&&this.data.currentHistory.id){
      return;
    }
    this.chooseAndUpload('bottomClothing');

  },

  chooseAndUpload(key){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        let file = res.tempFiles[0];
        file.uploading = true;
        this.setData({
          [key]:file
        })
        commonAPI.upload(file).then((data)=>{
          this.setData({
            [`${key}.serverUrl`]:data.url
          })
        }).finally(()=>{
          this.setData({
            [`${key}.uploading`]:false
          })
        });
      }
    })
  },

  tryon(){
    if(!this.data.topClothing.serverUrl&&!this.data.bottomClothing.serverUrl){
      wx.showToast({
        title: '请先选择衣服',
      })
      return;
    }
    this.setData({
      trying:true
    })
    userAPI.tryon({
      top_clothing_url:this.data.topClothing.serverUrl,
      bottom_clothing_url:this.data.bottomClothing.serverUrl
    }).then((data)=>{
      this.getHistory();
    }).finally(()=>{
      this.setData({
        trying:false
      })
    })
  },

  checkResult(id){
    this.setData({
      hasTryon:true
    })
    setTimeout(()=>{
      userAPI.checkTryon(id).then((data)=>{
        if(data.completion_url){
          this.getHistory();
        }else{
          this.checkResult(id);
        }
      })
    },1000);
  },

  selectHistory(event){
    const item = event.currentTarget.dataset.item;
    this.setData({
      currentHistory:item
    })
  },

  addNew(){
    this.setData({
      currentHistory:{}
    })
  },

  deleteHistory(event){
    const item = event.currentTarget.dataset.item;
    wx.showModal({
      title:'你确定删除这个搭配吗？',
      complete: (res) => {
        if (res.confirm) {
          userAPI.deleteTryon(item.id).then(()=>{
            wx.showToast({
              icon:'none',
              title: '删除成功',
            })
            this.getHistory();
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },
  
  /**
   * 生命周期函数--监听页面显示
   */
  onShow(options) {
  },
  getDefaultPersonImage(){
    userAPI.getDefaultPersonImage().then((data)=>{
      this.setData({
        defaultPersonImage:data.image_url
      })
    });
  },
  setTop(url){
    this.setData({
      topClothing:{
        serverUrl:url,
        tempFilePath:url
      },
      currentHistory:{}
    })
  },
  setBottom(url){
    this.setData({
      bottomClothing:{
        serverUrl:url,
        tempFilePath:url
      },
      currentHistory:{}
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})