// pages/reservr/index.js
import util from '../../utils/util';
import App from '../../utils/api';
const {regeneratorRuntime} = global
//import QQMapWX from '../../utils/qqmap-wx-jssdk'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    map: {
      latitude: 23.099994,
      longitude: 113.324520,
      scale: 18,
      height: 300,
    },
    markers: [],
    //polygons:{},
  },
  //qqmapsdk:null,
  sellers: [],
  sellersIds:[],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.qqmapsdk=new QQMapWX({
    //     key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
    // });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  mapCtx: null,
  mapData:{
    latitude: 23.099994,
    longitude: 113.324520,
    scale: 18,
    hasRegionchange:false,
  },
  onReady: function () {
    this.mapCtx = wx.createMapContext('map')
    this.mapCtx.moveToLocation({
      success:(res)=>{
        console.log('moveToLocation',res)
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //this.getPos();
    this.setData({
      [`map.height`]: getApp().system.windowHeight,
    })
    //this.getMarkers();
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  /*
  getPos(){
    this._getPos().then(res => {
      console.log('wx.getLocation.then', res);
      let map = this.data.map;
      map.latitude = res.latitude;
      map.longitude = res.longitude;
      map.height = getApp().system.windowHeight
      this.setData({
        map: map,
      })
      this.getMarkers();
      //this.getMapPos();
    }).catch((e) => {
      console.log('wx.getLocation.catch', e);
      if ('getLocation:fail auth deny' == e.errMsg) {
        this.selectComponent('#showModal').options({
          header: '定位失败',
          body: '需要地理位置授权'
        }).show();
      } else {
        setTimeout(() => {
          this.getPos()
        }, 500)
      }

    })
  },
  _getPos(){
    return new Promise((success, fail) => {
      wx.getLocation({
        type: 'gcj02',
        success: (res) => {
          success('getLocation',res)
        },
        fail: (res) => {
          fail(res)
        },
        complete: (res) => {
          console.log('wx.getLocation', res)
        }
      });
    })
  },
  */
  showModal(e){
    wx.openSetting()
  },
  regionchange(e){
    console.log('regionchange', e)
    this.mapCtx.getCenterLocation({
      success:(res)=>{
        console.log('getCenterLocation',res)
        if(res.latitude!=this.mapData.latitude
          || res.longitude!=this.mapData.longitude){
          this.mapData.hasRegionchange=true;
          this.mapData.latitude=res.latitude;
          this.mapData.longitude=res.longitude;
          this.getMarkers();
        }
      },
    });
  },
  mapUpdated(e){
    console.log('mapUpdated', e)
    this.mapCtx.getCenterLocation({
      success:(res)=>{
        console.log('getCenterLocation',res)
        if(res.latitude!=this.mapData.latitude
          || res.longitude!=this.mapData.longitude){
          this.mapData.hasRegionchange=true;
          this.mapData.latitude=res.latitude;
          this.mapData.longitude=res.longitude;
          this.getMarkers();
        }
      },
    });
  },
  markertap(e){
    console.log(e)
    let seller = {
      id: e.markerId
    };
    this.sellers.forEach(se => {
      if (se.id == seller.id) {
        seller = se;
        return false;
      }
    })
    this.selectComponent('#seller-box').show(seller);
    wx.hideTabBar();
  },
  getMarkers(){
    let map = this.mapData;
    let markers = [];
    App.Reserve.SellerList({
      lat: map.latitude,
      lng: map.longitude,
      offset: 0,
      rows: 100,
      distance: 100,
    }).then(res => {
      if (res.ret == 200) {
        let sellersIds=[];
        res.data.forEach(seller=>{
          sellersIds.push(seller.id);
        })
        if(sellersIds.toString()==this.sellersIds.toString()) {
          return;
        }
        this.sellersIds=sellersIds;
        this.sellers = res.data;
        res.data.forEach(seller => {
          let namelength = seller.sellername.replace(/[^\x00-\xff]/g, "01").length + 8;
          markers.push({
            id: seller.id,
            iconPath: "http://qn.colorcun.com/custom/lite-yd/image/ding.png",
            latitude: seller.lat,
            longitude: seller.long,
            width: 24,
            height: 30,
            //title:seller.seller_name,
            label: {
              content: '    ' + seller.sellername + '    ',
              color: '#353535',
              fontSize: 13,
              anchorX: -(namelength / 2 * 5),
              anchorY: 1,
              borderWidth: 1,
              borderColor: '#B4B0B0',
              borderRadius: 20,
              bgColor: '#fff',
              padding: 5,
              textAlign: 'center',
            }
          })
        })
      } else {
        markers.push({
          id: 1,
          iconPath: "http://qn.colorcun.com/custom/lite-yd/image/ding.png",
          latitude: parseFloat(map.latitude) + 1 / 1000,
          longitude: parseFloat(map.longitude) + 1 / 1000,
          width: 24,
          height: 30,
          //title:'演示店铺',
          label: {
            content: '    演示店铺    ',
            color: '#353535',
            fontSize: 13,
            anchorX: -50,
            anchorY: 1,
            borderWidth: 1,
            borderColor: '#B4B0B0',
            borderRadius: 20,
            bgColor: '#fff',
            padding: 3,
            textAlign: 'center'
          },
        })
      }
      this.setData({
        markers: markers,
      })
    })

  },
  //seller box 通知
  sellerBoxEvent(e){
    wx.showTabBar();
  },
  //根据中心点计算坐标范围
  getMapPos(){
    let map = this.data.map;
    let latitude = parseFloat(map.latitude);
    let longitude = parseFloat(map.longitude);
    let w2 = getApp().system.windowWidth / 2
    let h2 = getApp().system.windowHeight / 2
    let ys = w2 * map.scale / 1000000;
    let xs = h2 * map.scale / 1000000;
    let polygons = [
      {
        points: [
          {latitude: latitude - xs, longitude: longitude + ys},
          {latitude: latitude + xs, longitude: longitude + ys},
          {latitude: latitude - xs, longitude: longitude - ys},
          {latitude: latitude + xs, longitude: longitude - ys},
        ],
        strokeWidth: 5,
        strokeColor: '#00000055',
        fillColor: '#00000088'
      }
    ];
    this.setData({
      polygons: polygons,
    })
    this.getMarkers()
  },
  moveToLocation(){
    this.mapCtx.moveToLocation({
      success:(res)=>{
        console.log('moveToLocation',res)
      }
    })
  },
})