import common from '../../utils/util';
import main from '../../utils/main';

const app = getApp();
var xOffset = 0;
var yOffset = 0;
var xStart = 0;
var yStart = 0;
var xEnd = 0;
var yEnd = 0;

Page({
  data: {
    ImagePath: app.globalData.uploadImageUrl,
    Copy: {
      top: 0,
      left: 0,
      Name: '',
    },
  },
  onLoad: function(options) {
    var that = this;
    that.setData({
      Containnerheight: main.getWindowHeight(),
      ShowCopy: false,
    });

    // if (app.globalData.IsIOS) {
    //   xOffset = -140;
    //   yOffset = -40;
    // } else if (app.globalData.IsAndroid) {
    //   xOffset = 100;
    //   yOffset = 0;
    // }

    common.getStorageValue(that, "SymbolMain", app.globalData.SymbolMain, function() {
      var arr = [];
      for (var i = 0; i < app.globalData.SymbolArray.length; i++) {
        var obj = {};
        obj.Name = app.globalData.SymbolArray[i];
        for (var j = 0; j < that.data.SymbolMain.length; j++) {
          if (obj.Name === that.data.SymbolMain[j]) {
            obj.CSS = "btn2";
          }
        }
        arr.push(obj);
      }
      that.setData({
        SymbolArray: arr,
      });

      var query = wx.createSelectorQuery();
      query.select('#btn0').boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec(function (rect) {
        xStart = rect[0].left;
        yStart = rect[0].top;
        console.log("xStart:" + xStart);
        console.log("yStart:" + yStart);

      });
      var query = wx.createSelectorQuery();
      query.select('#btn' + (arr.length-1)).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec(function (rect) {
        xEnd = rect[0].left;
        yEnd = rect[0].top;
        console.log("xEnd:" + xEnd);
        console.log("yEnd:" + yEnd);

      });
    });
  },
  // selectSymbol:function(e){
  //   var that=this;
  //   var name=e.currentTarget.dataset.name;
  //   var SymbolMain="";
  //   for (var i = 0; i < that.data.SymbolArray.length; i++) {
  //     if (that.data.SymbolArray[i].Name===name) {
  //       if (!that.data.SymbolArray[i].CSS)
  //         that.data.SymbolArray[i].CSS = "btn2";
  //       else
  //         that.data.SymbolArray[i].CSS = "";
  //     }

  //     if (that.data.SymbolArray[i].CSS)
  //       SymbolMain += that.data.SymbolArray[i].Name;
  //   }
  //   that.setData({
  //     SymbolArray: that.data.SymbolArray,
  //   });

  //   wx.setStorageSync("SymbolMain", SymbolMain);
  // },
  dragStart: function(e) {
    var that = this
    var index = e.currentTarget.dataset.index;
    var Copy = that.data.Copy;
    Copy.Name = this.data.SymbolArray[index].Name;

    for (var i = 0; i < that.data.SymbolArray.length; i++) {
      if (i == index) {
        that.data.SymbolArray[i].CSS = "btnClear";
      }
    }

    var query = wx.createSelectorQuery();
    query.select('#btn' + index).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function(rect) {

      Copy.top = (rect[0].top + rect[1].scrollTop);
      console.log("Copy.top:" + Copy.top);
      console.log("e.changedTouches[0].pageY_Start:" + e.changedTouches[0].pageY );
      yOffset = e.changedTouches[0].pageY  - Copy.top;
      Copy.left = rect[0].left ;
      xOffset = e.changedTouches[0].pageX  - Copy.left;
      console.log("yOffset:" + yOffset);

      that.setData({
        Copy: Copy,
        ShowCopy: true,
        SymbolArray: that.data.SymbolArray,
      })
    });
  },
  dragMove: function(e) {
    console.log("e.changedTouches[0].pageY_Move:" + e.changedTouches[0].pageY);
    var that = this
    var index = e.currentTarget.dataset.index;
    var Copy = that.data.Copy;

    Copy.top = e.changedTouches[0].pageY  - yOffset;
    Copy.left = e.changedTouches[0].pageX  - xOffset;
    if (Copy.top < yStart-5)
      Copy.top = yStart-5;
    if (Copy.top > yEnd+5)
      Copy.top = yEnd + 5;
    if (Copy.left < -14)
      Copy.left = -14;
    if (Copy.left > 321)
      Copy.left = 321;

    that.setData({
      Copy: Copy,
      ShowCopy: true
    });

  },
  dragEnd: function(e) {
    var that = this
    var index = e.currentTarget.dataset.index;
    var Copy = that.data.Copy;

    console.log(Copy.left + "," + Copy.top);

    var x = Math.round((Copy.left - xStart) / 52);
    var y = Math.round((Copy.top - yStart) / 52);

    var index2 = y * 7 + x;
    console.log("index2:" + index2);

    for (var i = 0; i < that.data.SymbolArray.length; i++) {
      if (i == index) {
        that.data.SymbolArray.splice(i,1);
      }
    }
    for (var i = 0; i < that.data.SymbolArray.length; i++) {
      if (i == index2) {
        var obj={};
        obj.CSS = "";
        obj.Name = Copy.Name;
        that.data.SymbolArray.splice(i, 0,obj);
      }
    }
    

    that.setData({
      Copy: Copy,
      ShowCopy: false,
      SymbolArray: that.data.SymbolArray,
    });
    wx.setStorageSync("SymbolMain", that.data.SymbolArray);
  },
  onShareAppMessage: function() {
    return {
      title: app.globalData.ShareTitle,
      path: app.globalData.SharePath + '?UserID=' + app.globalData.userInfo.UserID,
      imageUrl: app.globalData.ShareImage,
    }
  },
})