// pages/reservr/index.js
import util from '../../utils/util';
import App from '../../utils/api';
const {regeneratorRuntime} = global
const mapScale=18
Page({

  /**
   * 页面的初始数据
   */
  data: {
    map: {
      latitude: 23.099994,
      longitude: 113.324520,
      scale: mapScale,
      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:{
    lat:'',
    lng:'',
    latitude: 23.099994,
    longitude: 113.324520,
    scale: 18,
    hasRegionchange:false,
    region:{
      southwest:{},
      northeast:{},
    },
  },
  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.getPos();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  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.mapCtx.getRegion({
        success:(res)=>{
          console.log('regionchange.getRegion',res)
          if(res.southwest.latitude!=this.mapData.region.southwest.latitude) {
            this.mapData.region = res
            this.getMarkers();
          }
        },
      })
    }).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(res)
        },
        fail: (res) => {
          fail(res)
        },
        complete: (res) => {
          console.log('wx.getLocation', res)
        }
      });
    })
  },

  showModal(e){
    wx.openSetting()
  },
  regionchange(e){
    console.log('regionchange', e)
    this.mapCtx.getScale({
      success:(res)=>{
        this.mapData.scale=res.scale;
        console.log('regionchange.getScale',res,this.data.map.scale)
      },
    })

    this.mapCtx.getCenterLocation({
      success:(res)=>{
        console.log('regionchange.getCenterLocation',res)
        this.mapData.latitude=res.latitude;
        this.mapData.longitude=res.longitude;
        if(this.mapData.lat=='' && res.latitude.toString().length>6 && res.longitude.toString().length>6){
          this.mapData.lat=res.latitude;
          this.mapData.lng=res.longitude;
        }
      },
    });
    this.mapCtx.getRegion({
      success:(res)=>{
        console.log('regionchange.getRegion',res)
        if(res.southwest.latitude!=this.mapData.region.southwest.latitude) {
          this.mapData.region = res
          this.getMarkers();
        }
      },
    })
  },
  mapUpdated(e){
    console.log('mapUpdated', e)
    this.mapCtx.getScale({
      success:(res)=>{
        this.mapData.scale=res.scale;
        console.log('mapUpdated.getScale',res,this.data.map.scale)
      },
    })
    this.mapCtx.getCenterLocation({
      success:(res)=>{
        console.log('mapUpdated.getCenterLocation',res)
        this.mapData.latitude=res.latitude;
        this.mapData.longitude=res.longitude;
        if(this.mapData.lat=='' && res.latitude.toString().length>6 && res.longitude.toString().length>6){
          this.mapData.lat=res.latitude;
          this.mapData.lng=res.longitude;
        }
      },
    });
    this.mapCtx.getRegion({
      success:(res)=>{
        console.log('mapUpdated.getRegion',res)
        if(res.southwest.latitude!=this.mapData.region.southwest.latitude){
          this.mapData.region=res
          //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 cmap=this.data.map;
    let map = this.mapData;
    //console.log('getMarkers',map.region);
    if(!map.region.northeast.latitude) {
      return setTimeout(()=>{
        this.getMarkers();
      },300)
    }
    let markers = [];
    App.Reserve.SellerList({
      lat: cmap.latitude,
      lng: cmap.longitude,
      offset: 0,
      rows: 10000,
      distance: 100000,
      map:JSON.stringify({...this.mapData.region,scale:this.mapData.scale})
    }).then(res => {
      if (res.ret == 200) {
        let sellersIds=["scale"+this.mapData.scale];
        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 => {
          if(this.mapData.scale<13){
            markers.push({
              id: seller.id,
              iconPath: "http://qn.colorcun.com/custom/lite-yd/image/diandian.png",
              latitude: seller.lat,
              longitude: seller.long,
              width: 6,
              height: 6,
              title:seller.seller_name,
            })
            return;
          }
          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: 50,
              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();
  },
  moveToLocation(){
    this.setData({
      [`map.scale`]:mapScale,
    })
    this.mapCtx.moveToLocation({
      success:(res)=>{
        console.log('moveToLocation',res)
      }
    })
  },
})