// pages/reservr/index.js
import util from '../../utils/util';
import App from '../../utils/api';
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
const mapScale = 15//18;
const def_latitude = 39.684670;
const def_longitude = 118.176300;
const cates_version = '?1.2';
Page({
  data:{
    map:{},
    height:1000,
    meTop:20,
    hasLoading:true,
    activeSellerID:'',//高亮商家
    scrollSellerID:'',//滚动到商家
  },
  user:{},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success:res=>{
        console.log('wx.getSystemInfo',res)
        this.setData({
          height:res.windowHeight-180
        })
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.selectComponent('#getpos').getPos();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    PubSub.emit('custom-tab-bar')
    if(wx.getMenuButtonBoundingClientRect){
      let rect=wx.getMenuButtonBoundingClientRect()
      this.setData({
        meTop:rect.top-5,
      })
    }
  },

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

  },

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

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return{
      title:'请客订包间，就上周到安排'
    }
  },
  onpos(e) {
    let res = e.detail;
    console.log('onpos.res', res);
    let map = this.data.map;
    if (!res.latitude){
      map.latitude = def_latitude;
      map.longitude = def_longitude;
    }else{
      map.latitude = res.latitude;
      map.longitude = res.longitude;
    }
    map.scale = mapScale;
    this.user.latitude = res.latitude;
    this.user.longitude = res.longitude;
    let sdobj = {
      map: map,
    }
    this.setData(sdobj)
  },
  setLoacl(e){
    let pos=util.attr(e,'val').split(',');
    let map = this.data.map
    map.latitude = pos[0];
    map.longitude = pos[1];
    this.setData({
      map:map
    })
  },
  reduceMapScale(){
    let map = this.data.map
    map.scale=parseInt(map.scale)-1
    this.setData({
      map:map
    })
  },
  moveToLocation() {
    console.log('moveToLocation')
    this.selectComponent('#getpos').getPos(true);
  },
  switchpage(){
  	wx.redirectTo({
  	  url: './map'
  	})  
  },
  debounceTimer:null,
  debounce(func,wait){
    if(this.debounceTimer){
      clearTimeout(this.debounceTimer)
    }
    this.debounceTimer=setTimeout(()=>{
      this.debounceTimer=null;
      func()
    },wait);
  },
  regionChange(e){
    if(e.type=='end'){
      console.log('regionChange', e)
      this.debounce(this.regionChangeDo,800)
    }
  },
  mapCtx:null,
  mapData: {
    latitude: 0,
    longitude: 0,
    scale: 30,
    hasRegionchange: false,
    region: {
      southwest: {},
      northeast: {},
    },
  },
  regionChangeDo(){
    console.log('regionChangeDo')
    if(!this.mapCtx){
      this.mapCtx = wx.createMapContext('map')
    }
    if(!this.mapCtx) return;
    this.mapCtx.getScale({
      success: (res) => {
        this.mapScale = res.scale;
      },
    })
    this.mapCtx.getRegion({
      success: (res) => {
        if (res.southwest.latitude) {
          this.mapData.region = res
        }
        this.selectComponent('#filter-group').hide();
        this.getSellers();
      },
    })
  },
  hasSellers:0,
  sellers:[],
  getSellers(){
    console.log('getSellers',this.mapScale,this.mapData)
    this.setData({
      hasLoading:true,
      scrollSellerID:'',//清理，滚到顶
    })
    let param = {
      lat: this.user.latitude == def_latitude ? '' : this.user.latitude,
      lng: this.user.longitude == def_longitude ? '' : this.user.longitude,
      offset: 0,
      rows: 200,
      distance: 100000,
      map: JSON.stringify({...this.mapData.region, scale: 50})
    }
    if (param.lat) {
      param.centre_pos = `${param.lat},${param.lng}`
    } else {
      let lat = (this.mapData.region.southwest.latitude + this.mapData.region.northeast.latitude) / 2
      let lng = (this.mapData.region.southwest.longitude + this.mapData.region.northeast.longitude) / 2
      param.centre_pos = `${lat},${lng}`
    }
    this.hasFilterData=false
    if(this.filterGroupData.tags){
      param.tags = this.filterGroupData.tags;
      this.hasFilterData=true
    }
    if (this.filterGroupData.cuisine) {
      param.cuisine = this.filterGroupData.cuisine;
      this.hasFilterData=true
    }
    if(this.filterGroupData.average){
      param.average = this.filterGroupData.average;
      this.hasFilterData=true
    }
    this.param = param;
    this.activeSellerID='';
    App.Customer.SellerList(param).then(async res => {
      if (res.ret == 200) {
        this.hasSellers=res.data.flag
        this.sellers=res.data.list
        this.makeMarker();
        this.makeSellers();
        this.debounce(this.makeDefMarker,300)
      }
    }).catch(e=>{
      this.debounce(this.getSellers,300)
    })

  },
  makeMarker(){
    this.mapCtx.getScale({
      success: (res) => {
        this.mapData.scale = res.scale;
        let markers=[]
        let sellersLength=this.sellers.length
        this.sellers.forEach((seller,si)=>{
          if(seller.scale>this.mapData.scale) return;
          let marker = {
            id: seller.id,
            iconPath: "http://nosqn.colorcun.com/custom/lite-online/cates/circle1x5.png" + cates_version,
            latitude: seller.lat,
            longitude: seller.long,
            width: 8,
            height: 8,
            //title:seller.seller_name,
            zIndex: sellersLength - si,
            zIndexBak: sellersLength - si,
            //seller: seller,
          };
          marker.callout={
            content: ' ' + seller.sellername + ' ',
            color: '#353535',
            fontSize: 12,
            borderWidth: 1,
            borderColor: '#cccccc',
            borderRadius: 50,
            bgColor: '#fefefe',
            padding: 5,
            textAlign: 'left',
            display:'BYCLICK',
          };
          marker.calloutDisplay='BYCLICK';
          if (seller.mode.length > 0) {
            seller.mode.forEach(x => {
              if (x.id == 1) {//大图标
                marker.iconPath = "http://nosqn.colorcun.com/custom/lite-online/cates/其他菜品.png";
                if (seller.cate.length > 0) {
                  marker.iconPath = seller.cate[0].icon
                }
                marker.iconPath = marker.iconPath.replace(/\/cates\/(.*)\.png/, function ($0, $1) {
                  return '/cates/' + encodeURI($1) + '.png'
                })
                marker.iconPath += cates_version
                marker.width = 20;
                marker.height = 25;
              }
              if(x.id==2){//商家名
                marker.callout.display='ALWAYS';
                marker.calloutDisplay='ALWAYS';
              }
            })
          }
          markers.push(marker)
        })
        markers.push({
          id: 'local',
          iconPath: "http://nosqn.colorcun.com/2.0/home%20%288%29.png" + cates_version,
          latitude: (this.user.latitude||def_latitude)+'',
          longitude: (this.user.longitude||def_longitude)+'',
          width: 25,
          height: 41,
          zIndex: 9999,
          zIndexBak:9999,
        })
        this.setData({
          markers:markers,
        })
      },
    })
  },
  makeSellers(){
    this.setData({
      sellers:this.sellers,
      hasSellers:(this.hasSellers==1 || this.sellers.length>0) || this.hasFilterData,
      hasLoading:false,
      hasFilterData:this.hasFilterData,
    })
  },
  makeDefMarker(){
    if(!this.activeSellerID && this.data.markers.length>0){
      this.markertap({markerId:this.data.markers[0].id})
    }
  },
  hasScrollToIng:false,
  markertap(e,scrollTo=true){
    if(!e.markerId || e.markerId=='local') return;
    let markers=this.data.markers
    this.activeSellerID = e.markerId
    let bl = 1.2;
    markers.forEach((m, i) => {
      m.iconPath = m.iconPath.replace('/cates-active/', '/cates/')
      m.zIndex = m.zIndexBak
      if (m.width == 20 * bl) {
        m.width = 20;
        m.height = 25;
      }
      if (m.width == 12) {
        m.width = 8;
        m.height = 8;
      }
      if(m.callout){
        m.callout.borderColor= '#cccccc';
        m.callout.bgColor= '#fefefe';
        m.callout.color= '#353535';
        m.callout.display=m.calloutDisplay;
      }
      if (m.id == e.markerId) {
        m.iconPath = m.iconPath.replace('/cates/', '/cates-active/')
        if (m.width == 20) {
          m.width = 20 * bl;
          m.height = 25 * bl;
        } else {
          m.width = 12;
          m.height = 12;
        }
        m.zIndex = 9999
        if(m.callout){
          m.callout.borderColor= '#F05522';
          m.callout.bgColor= '#F05522';
          m.callout.color= '#fefefe';
          m.callout.display='ALWAYS';
        }
      }
    })
    let obj = {
      markers: markers,
      activeSellerID:this.activeSellerID,
    };
    this.hasScrollToIng=false
    if(scrollTo){
      obj.scrollSellerID=this.activeSellerID
      this.hasScrollToIng=true
    }
    this.setData(obj)
    setTimeout(()=>{this.hasScrollToIng=false},800)
  },
  filterGroupData:{},
  filterGroupEvent(e){
    console.log('filterGroupEvent',e.detail)
    this.filterGroupData=e.detail
    this.debounce(this.getSellers,500)
  },
  sellerCardEvent(e){
    if(e.detail.type=='phone'){
      this.selectComponent('#as').show(e.detail.seller);
    }
  },
  scrollTop:0,
  scrollEvent(e){
    if(this.mapScale<12) return;
    //console.log(e.detail.scrollTop)
    this.scrollTop=e.detail.scrollTop
    if(this.hasScrollToIng)return;
    this.debounce(()=>{
      this.scrollEventActive()
    },300)
  },
  scrollEventActive(){
    let idx=parseInt(this.scrollTop/162)
    let po=this.scrollTop%((idx>0?idx:1)*162);
    if(po>80){
      idx+=1;
    }
    //console.log(idx,po)
    if(this.sellers[idx]){
      //this.activeSellerID=this.sellers[idx].id
      this.markertap({markerId:this.sellers[idx].id},false)
    }
  },
})