// miniprogram/pages/earth/earth.js
const screenWidth = wx.getSystemInfoSync().windowWidth
const screenHeight = wx.getSystemInfoSync().windowHeight
// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listData: [],
    devcodes: "",
    marker_latitude: "",
    marker_longitude: "",
    title: "",
    isShow: false,
    tips: [],
    value: '',
    show: false,
    enableSsatellite: false,
    windowWidth: 0,
    longitude: "116.627340",
    latitude: "39.874390",
    longitude84: "",
    latitude84: "",
    markers: [],
    controls: [], // 控件集合
    position1: {
        right: '20rpx',
        top: '40rpx',
    },
    position2: {
        right: '20rpx',
        top: '120rpx',
    },
    position3: {
        right: '20rpx',
        top: '200rpx',
    },
    position4: {
        right: '20rpx',
        bottom: '200rpx',
    },
    position5: {
        left: '20rpx',
        bottom: '200rpx',
    },
    position6: {
        left: '20rpx',
        bottom: '120rpx',
    },
    position7: {
        left: '46%',
        top: '46%',
    },
    position8: {
        right: '20rpx',
        bottom: '120rpx',
    },
    position9: {
        right: '20rpx',
        top: '280rpx',
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    //设置地图组件
    wx.getSystemInfo({
        success(res) {
          var windowWidth = res.windowWidth
          var windowHeight = res.windowHeight
          var query = wx.createSelectorQuery()
          var platform =res.platform
          query.select('#map').boundingClientRect()
          query.exec(function (res) {
            that.setData({
              controls: [{
                id: 1,
                iconPath: '../../images/copy.png',
                position: {
                  left: windowWidth - 40,
                  top: 20,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 2,
                iconPath: '../../images/write.png',
                position: {
                  left: windowWidth - 40,
                  top: 60,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 3,
                iconPath: '../../images/add.png',
                position: {
                  left: windowWidth - 40,
                  top: 100,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 4,
                iconPath: '../../images/navigation.png',
                position: {
                  left: windowWidth - 40,
                  top: windowHeight - 100,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 5,
                iconPath: '../../images/gps.png',
                position: {
                  left: 10,
                  top: windowHeight - 100,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 6,
                iconPath: '../../images/aim.png',
                position: {
                  left: 10,
                  top: windowHeight - 140,
                  width: 30,
                  height: 30
                },
                clickable: true
              }, {
                id: 7,
                iconPath: '../../images/applocat.png',
                position: {
                  left: res[0].width / 2 - 20,
                  top: platform=="ios"?res[0].height / 2 - 80:res[0].height / 2 - 40,
                  width: 40,
                  height: 40
                },
                clickable: true
              }, {
                id: 8,
                iconPath: '../../images/back.png',
                position: {
                  left: windowWidth - 40,
                  top: windowHeight - 140,
                  width: 30,
                  height: 30
                },
                clickable: true
              }]
            })
          })

        }
      })
  
      // 实例化API核心类
      qqmapsdk = new QQMapWX({
        key: 'BGPBZ-C5O3P-ROUDR-LWC4J-63EKH-V5FRX'
      })
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
    //输入设备编号获取marker位置信息
    var that = this;
    if (app.globalData.devcode!="") {
    var devcode = app.globalData.devcode
    wx.request({
        method: "POST",
        url: app.globalData.httpsUrl + "appDeviceAdd/findListByCodes",
        data: {
        devcodes: devcode,
        },
        header: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        success(res) {
        app.globalData.devcode="";
        if (res.data.code == 200) {
            var listResultData = res.data.data;
            that.setData({
            listData: listResultData
            })
            var markersArr = that.data.markers;
            for (var i = 0; i < listResultData.length; i++) {
            markersArr = markersArr.concat({
                iconPath: "../../images/locat.png",
                id: Number(listResultData[i].id),
                callout: {
                    content: "编号:"+listResultData[i].devcode+"\r\n位置:"+listResultData[i].position+"\r\n时间:"+listResultData[i].createtime,
                    fontSize: '14',
                    padding: true,
                    color: '#000000',
                    borderColor: '#F4EA2A',
                    bgColor: '#F4EA2A',
                    borderWidth: 5,
                    display: 'ALWAYS',
                    textAlign: 'left',
                    devcode: listResultData[i].devcode
                    // borderRadius: 15
                },
                latitude: listResultData[i].latitude,
                longitude: listResultData[i].longitude,
                width: 40,
                height: 40,
                devcode: listResultData[i].devcode
            });
            }
            that.setData({
                markers: markersArr,
                latitude: listResultData[0].latitude,
                longitude: listResultData[0].longitude,
                marker_latitude: listResultData[0].latitude,
                marker_longitude: listResultData[0].longitude,
                title: listResultData[0].devcode
            })
            
        }
        },
        fail(err) {
            app.globalData.devcode="";
            wx.showToast({
                title: "无法获取设备地理信息！",
                icon: 'none',
                duration: 2000
            })
        }
    })
} else {
    
    if(app.globalData.position && app.globalData.position.length) {
        console.log('-0-0-0-0',app.globalData.position );
        that.setData({
            latitude: app.globalData.position[0].latitude,
            longitude: app.globalData.position[0].longitude,
        })
    } else {

        //获取当前坐标（gcj02）
        wx.getLocation({
            type: "gcj02",
            altitude: true,
            success: function (res) {
                that.setData({
                    latitude: parseFloat(res.latitude).toFixed(6),
                    longitude: parseFloat(res.longitude).toFixed(6),
                    // markers: [{
                    //   latitude: res.latitude,
                    //   longitude: res.longitude,
                    // }]
                })
                //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误
                wx.getLocation({
                    type: "wgs84",
                    altitude: true,
                    success: function (res) {
                    that.setData({
                        latitude84: parseFloat(res.latitude).toFixed(6),
                        longitude84: parseFloat(res.longitude).toFixed(6)
                    })
                    }
                })
            }
        })
    }

}


  },

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

  },

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

  },

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

  },

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

  },

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

  },

  //定位出来
  locationPosition: function () {
    var that = this;
    //获取当前坐标（gcj02）
    wx.getLocation({
      type: "gcj02",
      altitude: true,
      success: function (res) {
        that.setData({
          latitude: parseFloat(res.latitude).toFixed(6),
          longitude: parseFloat(res.longitude).toFixed(6),
          // markers: [{
          //   latitude: res.latitude,
          //   longitude: res.longitude
          // }]
        })
        //获取当前坐标（wgs84）,特别注意需要放在加载里面，否则获取有误
        wx.getLocation({
          type: "wgs84",
          altitude: true,
          success: function (res) {
            that.setData({
              latitude84: parseFloat(res.latitude).toFixed(6),
              longitude84: parseFloat(res.longitude).toFixed(6)
            })
          }
        })
      }
    })
  },

  //加载地图组件
  controltap: function (e) {
    const controlId = e.currentTarget.dataset.controlid
    console.log(controlId);

    //进入添加设备页
    if (1 == controlId) {
      wx.setClipboardData({
        data: this.data.latitude + "," + this.data.longitude + "," + this.data.latitude84 + "," + this.data.longitude84,
        success: function (res) {
          wx.getClipboardData({
            success: function (res) {
              wx.showToast({
                title: '复制坐标成功'
              })
            }
          })
        }
      })
    } else if (3 == controlId) {
      //先定位
    //   this.locationPosition()
      wx.setClipboardData({
        data: this.data.latitude + "," + this.data.longitude + "," + this.data.latitude84 + "," + this.data.longitude84,
        success: function (res) {
            wx.showToast({
                title: '坐标已获取',
                duration: 1000
              })
           
        }
      })
      wx.navigateTo({
        url: '../addDevice/addDevice'
      })
    } else if (2 == controlId) { // 铅笔
        console.log('点击铅笔')
      this.setData({
        devcodes: "",
        show: true
      });
    } else if (4 == controlId) {
      wx.openLocation({
        latitude: Number(this.data.marker_latitude),
        longitude: Number(this.data.marker_longitude),
        name: this.data.title,
        scale: 35
      })
    } else if (5 == controlId) {
      var flag = this.data.enableSsatellite;
      this.setData({
        enableSsatellite: !flag
      });
    } else if (6 == controlId) {
      //先清marker
      this.setData({
        markers: []
      })
      this.locationPosition()
    }else if (8 == controlId) {
      //跳转日志缓存页
      wx.switchTab({
        url: '../applog/applog',
      })
    }else if (9 == controlId) {
        console.log('跳转地图页面');
        //跳转日志缓存页
        wx.navigateTo({
          url: '../defineMap/defineMap',
        })
      }
  },
  showPopup() {
    this.setData({
      show: true
    });
  },

  onClose() {
    this.setData({
      show: false
    });
  },

  //获取设备maker
  leave() {
    var that = this;
    console.log(that.data)
    console.log(that.data.devcodes)
    if (that.data.devcodes == "") {
        // that.setData({
        //     markers:[]
        // })
        wx.showToast({
            icon: 'none',
            title: '请先输入定位设备编号',
        })
      return false;
    }
    wx.request({
      method: "POST",
      url: app.globalData.httpsUrl + "appDeviceAdd/findListByCodes",
      data: {
        devcodes: that.data.devcodes
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      success(res) {
        if (res.data.code == 200) {
          var listResultData = res.data.data;
          if(!listResultData.length) {
            wx.showToast({
                title: "查无结果！",
                icon: 'none',
                duration: 2000
              })
            that.setData({
                show: false
            });
          } else {
            that.setData({
                listData: listResultData
              })
              var markersArr = []
              for (var i = 0; i < listResultData.length; i++) {
                let arr = {
                  iconPath: "../../images/locat.png",
                  id: Number(listResultData[i].id),
                  callout: {
                    content:  "编号:"+listResultData[i].devcode+"\r\n位置:"+listResultData[i].position+"\r\n时间:"+listResultData[i].createtime,
                    fontSize: '14',
                    // padding: true,
                    color: '#212121',
                    borderColor: '#F4EA2A',
                    bgColor: '#F4EA2A',
                    borderWidth: 5,
                    display: 'ALWAYS',
                    textAlign: 'left',
                    // borderRadius: 15
                    devcode: listResultData[i].devcode
                  },
                  latitude: listResultData[i].latitude,
                  longitude: listResultData[i].longitude,
                  width: 40,
                  height: 40,
                  devcode: listResultData[i].devcode
                };
                markersArr.push(arr)
              }
              that.setData({
                markers: markersArr,
                latitude: listResultData[0].latitude,
                longitude: listResultData[0].longitude,
                marker_latitude: listResultData[0].latitude,
                marker_longitude: listResultData[0].longitude,
                title: listResultData[0].devcode
              })
              that.setData({
                show: false
              });
          }
          
        }
      },
      fail(err) {
        wx.showToast({
          title: "无法获取设备地理信息！",
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

  showLoading: function (message) {
    if (wx.showLoading) {
      // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
      wx.showLoading({
        title: message,
        mask: true
      });
    } else {
      // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
      wx.showToast({
        title: message,
        icon: 'loading',
        mask: true,
        duration: 20000
      });
    }
  },

  hideLoading: function () {
    if (wx.hideLoading) {
      // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
      wx.hideLoading();
    } else {
      wx.hideToast();
    }
  },

  //   点击标记点
  markertap(e) {
    console.log('点击标记点')
    var that = this;
    for (var i = 0; i < this.data.listData.length; i++) {
      if (e.markerId == this.data.listData[i].id) {
        this.setData({
          marker_latitude: this.data.listData[i].latitude,
          marker_longitude: this.data.listData[i].longitude,
          title: this.data.listData[i].devcode
        })
      }
      // wx.openLocation({
      //   latitude: Number(that.data.marker_latitude),
      //   longitude: Number(that.data.marker_longitude),
      //   name: that.data.title,
      //   scale: 35
      // })
    }

    //    点击的标记点可以做气泡的显隐
    const index = this.data.markers.findIndex(item => item.id === e.markerId)
    if(index !== -1) {
        let  tempMarkers = this.data.markers.map((item, i) => {
            if(index === i) {
                item.callout.display = item.callout.display === "BYCLICK" ? 'ALWAYS' : "BYCLICK"
            } 
            return item
        })
        this.setData({
            markers: tempMarkers
        })
    }

  },
  //   点击气泡
  bindcallouttap: function (e) {
    var that = this;
    const index = this.data.markers.findIndex(item => Number(item.id) === Number(e.markerId))
    if(index !== -1) {
        that.showLoading("数据请求中...");
        wx.request({
          method: "POST",
          url: app.globalData.httpsUrl + "appDeviceLog/deviceDetail",
          data: {
            devcode: this.data.markers[index].devcode,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
          },
          success(res) {
            that.hideLoading();
            // var resultObject = JSON.parse(res.data);
            var resultObject = res.data;
            var pageName = '../applog/applog'
            if (resultObject.code == 200) {
                wx.setStorageSync('resultObject', resultObject.data)
                wx.navigateTo({
                    url: '../addDevicelog/addDeviceLog?detail=' + "&pageName=" + pageName
                })
            //   app.globalData.positionDevcode = this.data.markers[index].devcode
                app.globalData.position = [that.data.markers[index].marker_latitude, that.data.markers[index].marker_longitude]
                console.log(app.globalData.position);
            }
          },
          fail(err) {
            that.hideLoading();
          }
        })
    }
  },



  bindregionchange: function (e) {
    var that = this
    if (e.causedBy == "drag") {
      var mapCtx = wx.createMapContext("map")
      mapCtx.getCenterLocation({
        // type: "gcj02",
        success: function (res) {
          // var markersArr = that.data.markers
          // for (var i = 0; i < markersArr.length; i++) {
          //   if (markersArr[i].iconPath == undefined) {
          //     markersArr.splice(i, 1)
          //   }
          // }
          var latitude = res.latitude
          var longitude = res.longitude
          // markersArr = markersArr.concat({
          //   latitude: latitude,
          //   longitude: longitude
          // })
          //拖拽地图获取不到84坐标系，保存为空
          that.setData({
            latitude: parseFloat(latitude).toFixed(6),
            longitude: parseFloat(longitude).toFixed(6),
            latitude84: "",
            longitude84: "",
            // markers: markersArr
          })
          // mapCtx.moveToLocation();
          // that.getLocal(latitude, longitude)
        }
      })
    }
  },

  onChange: function (e) {
    this.setData({
      value: e.detail,
    });
    var _this = this;
    // 调用接口
    qqmapsdk.search({
      keyword: this.data.value,
      success: function (res) {
          console.log(res)
        if (res && res.data) {
          _this.setData({
            isShow: true,
            tips: res.data
          });
        }
      },
      complete: function (res){
        console.log(res);
      }
    })
  },
  bindSearch: function (e) {
    var location = e.target.dataset.location;
    this.setData({
      isShow: false,
      longitude: location.lng,
      latitude: location.lat,
      marker_latitude: location.lat,
      marker_longitude: location.lng,
      title: e.target.dataset.keywords,
      value: e.target.dataset.keywords,
      markers: [{
        id: 0,
        longitude: location.lng,
        latitude: location.lat,
        iconPath: '../../images/locat.png',
        width: 50,
        height: 50,
      }]
    })
  },


  confirmdevcodes: function (event) {
      console.log('设备编号', event.detail.value);
    var that = this;
    that.setData({
      devcodes: event.detail.value
    });
  },


  onClick: function () {

    // 调用接口
    qqmapsdk.search({
      keyword: this.data.value,
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

  confirm(event) {
    var that = this;
    var formValue = event.detail.value;
    var formName = event.target.dataset.id;
    var fromN = 'form.' + [formName];
    that.setData({
      [fromN]: formValue
    })
  },
})