// 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: [{
          iconPath: "http://qn.colorcun.com/custom/lite-yd/image/ding.d.png",
          id: 0,
          latitude: 23.099994,
          longitude: 113.324520,
          width: 50,
          height: 50
      }],
      //polygons:{},
  },
  //qqmapsdk:null,
    sellers:[],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.qqmapsdk=new QQMapWX({
    //     key: 'SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ'
    // });
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
      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.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(res)
              },
              fail:(res)=>{
                  fail(res)
              },
              complete:(res)=>{
                  console.log('wx.getLocation',res)
              }
          });
      })
    },
    showModal(e){
        wx.openSetting()
    },
    regionchange(e){
        //console.log(e)
    },
    mapUpdated(e){
        //console.log('mapUpdated',e)
    },
    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.data.map;
        let markers=[];
        App.Reserve.SellerList({
            lat:map.latitude,
            lng:map.longitude,
            offset:0,
            rows:100,
            distance:100,
        }).then(res=>{
            if(res.ret==200){
                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()
    },
})