import clothingAPI from '../../../api/clothing';
import commonAPI from '../../../api/common';
import request from '../../../api/request';
import userAPI from '../../../api/user';

Page({
  data: {
    pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTriggered:false},
    uploadOptions:{
      url:`${request.baseURL}/api/v1/upload`
    },
    uploadImg:{},
    uploading:false,
    uploadPercent:0,
    hasUploadImg:false,
    isShowUploader:false,

    categories:[],
    categoryIndex:0,
    categoryUploadIndex:0,

    hasDefaultImage:false,

    topClothingCId:'',
    bottomClothingCId:'',

    statusBarHeight:0
  },

  onLoad() {
    const windowInfo = wx.getWindowInfo();
    this.setData({
      statusBarHeight:windowInfo.statusBarHeight,
    })
    this.loadClosetList();
    clothingAPI.getCategories().then((data)=>{
      data.map((item)=>{
        if(item.name.indexOf('上衣')>-1||item.name.indexOf('衣服')>-1){
          this.data.topClothingCId = item.id;
        }
        if(item.name.indexOf('下衣')>-1||item.name.indexOf('裤子')>-1){
          this.data.bottomClothingCId = item.id;
        }
      })
      this.setData({
        categories:data
      })
    })
    this.imgUploader = this.selectComponent('#imgUploader');
  },
  refreshList(){
    this.setData({
      'pager.pageIndex':0,
      'pager.loadAll':false
    })
    this.loadClosetList();
  },
  loadClosetList() {
    if(this.data.pager.loading||this.data.pager.loadAll){
      return;
    }
    this.data.pager.loading = true;
    this.setData({
      pager:this.data.pager
    });
    const params = {
      skip:this.data.pager.pageIndex*this.data.pager.limit,
      limit:this.data.pager.limit
    }
    if(this.data.categoryIndex!=0){
      params.category_id = this.data.categories[this.data.categoryIndex-1].id
    }
    clothingAPI.getList(params).then((data)=>{
      if(this.data.pager.pageIndex==0){
        this.data.list = data;
      }else{
        this.data.list = this.data.list.concat(data);
      }
      this.data.pager.loading = false;
      this.data.pager.pageIndex++;
      if(data.length<this.data.pager.limit){
        this.data.pager.loadAll = true;
      }
      this.setData({
        list:this.data.list,
        pager:this.data.pager
      })
    }).catch((res)=>{
      console.log('res',res);
      this.setData({
        "pager.loading":false
      })
    });
  },
  changeCategory(event){
    const categoryIndex = event.currentTarget.dataset.index;
    this.data.pager.pageIndex = 0;
    this.data.pager.loadAll = false;
    this.setData({
      categoryIndex,
      pager:this.data.pager
    })
    this.loadClosetList();
  },
  changeUploadCategory(event){
    const categoryUploadIndex = event.currentTarget.dataset.index;
    this.setData({
      categoryUploadIndex
    })
  },
  addClothing(){
    this.setData({
      isShowUploader:true,
      uploadImg:{}
    })
  },
  chooseImg(){
    wx.chooseMedia({
      count:1,
      success:(res)=>{
        let file = res.tempFiles[0];
        this.setData({
          uploadImg:file,
          uploading:true
        })
        commonAPI.upload(file).then((data)=>{
          this.setData({
            "uploadImg.serverUrl":data.url
          })
        }).finally(()=>{
          this.setData({
            uploading:false
          })
        });
        file.task.onProgressUpdate((detail)=>{
          console.log(detail);
          this.setData({
            uploadPercent:detail.progress
          })
        })
      }
    })
  },
  saveClothing(){
    const cid = this.data.categories[this.data.categoryUploadIndex].id;
    console.log(cid,this.data.uploadImg.serverUrl);
    clothingAPI.create(cid,this.data.uploadImg.serverUrl).then(()=>{
      this.loadClosetList();
      this.setData({
        isShowUploader:false,
        uploadImg:{}
      })
    });
  },


  uploaderImgChange(event){
    this.setData({
      hasUploadImg:event.detail.length!=0
    })
  },

  onShow(){
    userAPI.getDefaultPersonImage().then((data)=>{
      this.setData({
        hasDefaultImage:!!data.image_url
      })
    });
  },
  toTry(event){
    const item = event.currentTarget.dataset.item;
    const param = '';
    wx.switchTab({
      url: `/pages/try/index/index`,
      success:()=>{
        const pages = getCurrentPages();
        const tryPage = pages[pages.length-1];
        console.log(this.data.topClothingCId,this.data.bottomClothingCId);
        if(item.clothing_category_id==this.data.topClothingCId){
          tryPage.setTop(item.image_url);
        }else if(item.clothing_category_id==this.data.bottomClothingCId){
          tryPage.setBottom(item.image_url);
        }
      }
    })
  },

  deleteClothing(event){
    const item = event.currentTarget.dataset.item;
    wx.showModal({
      title: '是否确认删除这件衣服',
      complete: (res) => {
        if (res.confirm) {
          clothingAPI.delete(item.id).then(()=>{
            wx.showToast({
              icon:'none',
              title: '删除成功',
            });
            this.refreshList();
          })
        }
      }
    })
  }
});