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,
    });

    common.getStorageValue(that, "SymbolMain", app.globalData.SymbolMain, function() {
      if (that.data.SymbolMain.length>0 && !that.data.SymbolMain[0].Name){
        wx.removeStorageSync("SymbolMain");
        that.setData({
          SymbolMain: app.globalData.SymbolMain,
        });
        wx.setStorageSync("SymbolMain", app.globalData.SymbolMain);
      }
      
      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].Name || (obj.Name === "∬" && that.data.SymbolMain[j].Name==="( )")) {
            obj.CSS = "btn2";
          }
        }
        if (obj.Name === "∬") {
          obj.Name = "( )";
        }
        arr.push(obj);
      }
      that.setData({
        SymbolArray: arr,
      });

      that.getXY();
    });
  },
  onUnload:function(){
    main.UploadUserConfig();
  },
  getXY:function(){
    var that=this;
    var query = wx.createSelectorQuery();
    query.select('#btn0').boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function (rect) {
      if (rect.length>0 && rect[0]){
        xStart = rect[0].left;
        yStart = rect[0].top;
        // console.log("xStart:" + xStart);
        // console.log("yStart:" + yStart);
      }
    });
    query = wx.createSelectorQuery();
    query.select('#btn' + (that.data.SymbolMain.length - 1)).boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function (rect) {
      if (rect.length > 0 && rect[0]) {
        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;
    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 = "";
      }
    }
    

    var b=true;
    for (var i = 0; i < that.data.SymbolMain.length; i++) {
      if (that.data.SymbolMain[i].Name === name) {
        that.data.SymbolMain.splice(i,1);
        b=false;
        break;
      }
    }
    if (b){
      var obj={};
      obj.Name=name;
      obj.CSS="btn2";
      that.data.SymbolMain.push(obj);
    }

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

    for (var i = 0; i < that.data.SymbolMain.length; i++) {
      if (i == index) {
        that.data.SymbolMain[i].CSS2 = "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,
        SymbolMain: that.data.SymbolMain,
      })
    });
  },
  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 < -5)
      Copy.left = -5;
    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("index:" + index);
    // console.log("index2:" + index2);

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

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