// pages/home/xyc/index.js
import FormData from './../../../utils/formdata/index'
import Toast from 'tdesign-miniprogram/toast/index';
import Wxml2Canvas from 'wxml2canvas'; 
const app = getApp();//新建页面时 默认引入
const req = app.xzjlReq();//初始化一个的request() 实例
Page({

    /**
     * 页面的初始数据
     */
    data: {
        xyLink:'',
        xyContent:'',
        imgUrl:'',
        fileList: [],//图片list
        form:{
            content:"",
            deadline:'',
            link:'',
            img:''
        },
        minDate:new Date().getTime() + 24 * 60 * 60 * 1000,
        cvisible: false,
        note: '',
        xyForm:{},
        visible:false,//弹窗
        single:true,
        xzInfo:{},
        userInfo:{},
        xyNfc:true,
        xyInfo:{},
        showXyz:false, //显示许愿中弹层
        showDetail:false, //许愿成功回显弹层
        shareVisible:false, //显示分享页面
        showToast:false, //显示提示弹层
        showCanvas:false
    },
    // 添加图片
    handleAdd(e){
      // 上传图片显示loading
      wx.showLoading({
        title: '图片上传中',
        mask: true
      })
      this.uploadFile(e.detail.files[0])
    },
    handleRemove(e){/**删除图片 */
        const { index } = e.detail;
        const { fileList } = this.data;
  
        fileList.splice(index, 1);
        this.setData({
          fileList,
        });
    },
    uploadFile(file) {/**执行 */
        wx.uploadFile({
            url: 'https://xzjl-api.windymuse.cn/api/resource',
            filePath: file.url,
            name: 'file',
            header: {
                'Authorization': wx.getStorageSync('token'),        
              'Content-Type': 'multipart/form-data'
            },
            formData: {
              type: 'poster'
            },
            success: res => {
              let data = JSON.parse(res.data);
              if (data.code === 200) {
                this.setData({
                  imgUrl: data.data.abUrl,
                  fileList: [file]
                })
                wx.hideLoading()
              }
            },
            fail(res) {
              showToast('图片上传失败');
            }
          });
    },
    go2MyYw(){
        wx.navigateTo({
            url: '/pages/home/xyc/wdyw/wdyw'
            })
    },
    go2TaYw(){
        wx.navigateTo({
            url: '/pages/home/xyc/tdyw/tdyw'
            })
    },
    doXzTime(){
        this.setData({ cvisible: true });
    },
    // 显示提示
    showToast(){
      console.log('11');
      this.setData({showToast: !this.data.showToast})
    },
    handleConfirm(e) {
        console.log(e,'111');
        const { value } = e.detail;
        const format = (val) => {
          const date = new Date(val);
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const day = date.getDate().toString().padStart(2, '0');
          return `${year}-${month}-${day}`;
        };
  
        this.setData({
          note: format(value)
        });
      },
      onClose({ detail }) {
        console.log(detail.trigger);
      },
      doXyPop(){/**弹出许愿弹窗 */
        console.log('执行力。。。。。')
        this.setData({visible:true})

      },
      onVisibleChange(e) {
        this.setData({
          visible: e.detail.visible,
        });
      },
      doCancelXy(){/**取消许愿 */
        this.setData({
            visible: false,
            xyContent: '',
            note: '',
            xyLink: '',
            fileList: []
          });

      },
      doFinishXy(e){/**许愿 */
        if(!this.data.xyContent){
            wx.showToast({
                title:'许愿内容不能为空！',
                icon: 'none',
                duration: 5000
            })
        }else if(!this.data.note){
            wx.showToast({
                title:'期望事件不能为空！',
                icon: 'none',
                duration: 5000
            })
        }else if(!this.data.imgUrl){
            wx.showToast({
                title:'许愿图片不能为空！',
                icon: 'none',
                duration: 5000
            })
        }else{
            // 判断是否修改数据
            if (this.data.id) {
              return req.patchRequest(`/api/user/curt/wish/${this.data.id}`,{
                content:this.data.xyContent,
                deadline:this.data.note,
                img:this.data.imgUrl,
                link:this.data.xyLink}).then(res => {
                  console.log(res);
                  if (res.data.code === 200) {
                    this.setData({
                      visible: false,
                      xyContent:'',
                      xyLink:'',
                      note:'',
                      imgUrl:'',
                      fileList:[]
                    })
                    wx.showToast({
                      title: '修改愿望成功',
                      icon: 'success'
                    })
                  }
                })
            }

              req.postRequest('/api/user/curt/wish',{
                content:this.data.xyContent,
                deadline:this.data.note,
                img:this.data.imgUrl,
                link:this.data.xyLink
              }).then((res)=>{
                if(res.data.code === 200){
                    this.setData({
                        visible: false,
                    });
                    this.setData({userInfo:res.data.data})
                    if(res.data.data&&res.data.data.loverId&&res.data.data.loverId!=null){
                        this.setData({single:false})
                    }
                    this.setData({xyContent:'',xyLink:'',note:'',imgUrl:'',fileList:[],showXyz:true})
                    setTimeout(()=>{
                      this.setData({
                        showXyz:false,
                        showDetail:true,
                        item:res.data.data
                      })
                      wx.hideTabBar()
                    },2000)
                    this.initXy()
                }else{
                    wx.showToast({
                        title:res.data.msg,
                        icon: 'none',
                        duration: 5000
                    })
                }
               }).catch((err)=>{
                wx.showToast({
                    title:'出错了：'+err.data.msg,
                    icon: 'none',
                    duration: 5000
                })
            })
        }
        

      },
    initXy(){
        req.getRequest('/api/user/curt',{}).then((res)=>{
            console.log(res)
            if(res.data.code==200){
                this.setData({userInfo:res.data.data})
                if(res.data.data&&res.data.data.loverId&&res.data.data.loverId!=null){
                    this.setData({single:false})
                }
            }
           }).catch((err)=>{
            console.log(err);
        })
        this.setData({xyInfo:wx.getStorageSync('nfc')})
    },
    // 关闭回显
    closeDetail(){
      this.setData({
        showDetail: false,
        showCanvas: false
      })
      wx.showTabBar()
    },
    // 分享
    openShare(event){
      this.setData({
        shareVisible:!this.data.shareVisible
      })
      wx.hideTabBar()
    },
    shareQQ(){
      console.log('分享到qq')
    },
    downLoad(){
      console.log('下载图片');
      wx.downloadFile({
        url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
        success: (res) => {
          wx.showShareImageMenu({
            path: res.tempFilePath
          })
        }
      })
    },

    gitImg(){
      console.log('获取图片');
      this.drawMyCanvas()
      this.setData({showCanvas: true,shareVisible: false})
    },


    drawMyCanvas() {
      wx.showLoading({
          title: '图片生成中'
      })
      const that = this
      const query = wx.createSelectorQuery().in(this);
      query.select('#my-canvas').fields({ // 选择需要生成canvas的范围
          size: true,
          scrollOffset: true
      }, data => {
          let width = data.width;
          let height = data.height;
          that.setData({
              width,
              height
          })
          setTimeout(() => {
              that.startDraw()
          }, 1500);
     }).exec()
},
startDraw() {
      let that = this
      
      // 创建wxml2canvas对象
      let drawMyImage = new Wxml2Canvas({
        element: 'myCanvas', // canvas的id,
        obj: that, // 传入当前组件的this
        width: that.data.width ,
        height: that.data.height,
        background: '#fff', // 生成图片的背景色
        progress(percent) { // 进度
          // console.log(percent);
        },
        finish(url) { // 生成的图片
          wx.hideLoading()
          console.log(url);
          that.savePoster(url)
        },
        error(res) { // 失败原因
          console.log(res);
          wx.hideLoading()
        }
      }, this);
      let data = {
          // 获取wxml数据
          list: [{
              type: 'wxml',
              class: '.my_canvas .my_draw_canvas',  // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）
              limit: '.my_canvas', // 要绘制的wxml元素根类名
              x: 0,
              y: 0
          }]
      }
      // 绘制canvas
      drawMyImage.draw(data, this);
  },
  savePoster(url) {
      const that = this
      wx.saveImageToPhotosAlbum({
          filePath: url,
          success: () => {
              wx.showToast({
                  title: '保存成功',
                  icon: 'none',
                  duration: 1500
              });
              this.setData({showCanvas: false})
          },
          fail(err) {
            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
              wx.showModal({
                title: '提示',
                content: '需要您授权保存相册',
                showCancel: false,
                success: modalSuccess => {
                  wx.openSetting({
                    success(settingdata) {
                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.saveImageToPhotosAlbum({
                              filePath: url,
                              success: function () {
                                wx.showToast({
                                  title: '保存成功',
                                  icon: 'success',
                                  duration: 2000
                                })
                              },
                          })
                      } else {
                          wx.showToast({
                              title: '授权失败，请稍后重新获取',
                              icon: 'none',
                              duration: 1500
                          });
                      }
                    }
                  })
                }
              })
            }
          }
        })
    },


    // 获取我的许愿
    getMyWish(){
      req.getRequest('/api/user/curt/wish',{limit: '-1'}).then((res)=>{
          if(res.data.code==200){
              this.setData({wishes:res.data.data.records})
          }
         }).catch((err)=>{
          console.log(err);
      })
      req.getRequest('/api/user/curt/lover/wish',{limit: '-1'}).then((res)=>{
        if(res.data.code==200){
            this.setData({LoveWishes:res.data.data.records})
        }
       }).catch((err)=>{
        console.log(err);
    })
    },

    // 获取愿望详情 修改愿望
    getWishDetaile(id){
      req.getRequest(`/api/user/curt/wish/${id}`,{}).then(res => {
        console.log(res,'22222');
        if (res.data.code === 200) {
          const data = res.data.data
          const list = [{
            url: data.img,
            type: 'image'
          }]
          this.setData({
            visible: true,
            xyContent: data.content,
            note: data.deadline,
            xyLink: data.link,
            fileList: list,
            imgUrl: data.img,
            id: data.id
          })
        }
      })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.initXy()
        this.getMyWish()

        // 修改愿望
        if (options.id) {
          this.getWishDetaile(options.id)
        }
    },

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

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      this.getMyWish()
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
    },

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

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

    },

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

    },

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

    // 分享到朋友圈
    onShareTimeline(){}
})