// pages/FMController/index.js

import { fengmap } from '../js/fengmap.miniprogram.min';
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px'
const Http = require("../../utils/HttpBasics");
const config = require("../../config/config");
let app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mapLoaded: false, //地图是否加载完成
    focusGroupID: 1,
    mapGroupIDs: [],
    is3D: true,
    isAllLayer: false,
    initMap: {},
  },
  // 定义全局map变量
  fmap: null,
  canvas: null,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      initMap: JSON.parse(options.initMap)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log(this.data.initMap)
    // 获取canvas
    wx.createSelectorQuery().select('#fengMap').node().exec((res) => {
      const canvas = res[0].node;
      this.canvas = canvas
      wx.createSelectorQuery().select("#temp").node().exec((tempRes) => {
        const tmpCanvas = tempRes[0].node;

        const fmapID = this.data.initMap.mapId;

        const mapOptions = {
          //必要，地图容器
          canvas: canvas,
          // 必要，2d画布
          tempCanvas: tmpCanvas,
          // 地图默认旋转角度
          defaultControlsPose: 90,
          // 地图默认倾斜角
          defaultTiltAngle: 60,
          // 初始二维/三维状态,默认3D显示
          defaultViewMode: this.data.is3D ? fengmap.FMViewMode.MODE_3D : fengmap.FMViewMode.MODE_2D,
          // 设置初始指南针的偏移量
          compassOffset: [40, 40],
          // 设置指南针大小
          compassSize: 48,
          //必要，地图应用名称，通过蜂鸟云后台创建
          appName: this.data.initMap.appName,
          //必要，地图应用密钥，通过蜂鸟云后台获取
          key: this.data.initMap.key,
          mapServerURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/${this.data.initMap.mapId}`,
          mapThemeURL: config.url + `/fengniaoMapfile/${this.data.initMap.tenantId}/theme/`,
          defaultThemeName: this.data.initMap.defaultThemeName,
          defaultMapScaleLevel: 19,
          // compassOffset:[28,100]
        };
        console.log(canvas, "canvas")

        //初始化地图对象
        this.fmap = new fengmap.FMMap(mapOptions);

        //打开Fengmap服务器的地图数据和主题
        this.fmap.openMapById(fmapID, function (error) {
          //打印错误信息
          // console.log(error);
        });

        //地图加载完成事件
        this.fmap.on('loadComplete', () => {
          console.log('地图加载完成');

          this.setData({
            mapLoaded: true
          })

          // 设置楼层数据
          this.loadScrollFloorCtrl();

          // 显示指北针
          this.showCompass();
        })
      })
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    if (this.fmap) {
      this.fmap.dispose();
      this.fmap = null;
    }
  },
  // 手指触摸动作开始
  touchStart(e) {
    this.canvas.dispatchTouchEvent({
      ...e,
      type: 'touchstart'
    })
  },
  // 手指触摸后移动
  touchMove(e) {
    this.canvas.dispatchTouchEvent({
      ...e,
      type: 'touchmove'
    })
  },
  // 手指触摸动作结束
  touchEnd(e) {
    this.canvas.dispatchTouchEvent({
      ...e,
      type: 'touchend'
    })
  },

  /**
   * 显示指北针
   */
  showCompass() {
    /**
     * 显示指北针，设置背景色需要在加载指北针之前设置
     * */
    // this.fmap.compass.setBgImage('../../images/compass_bg.png'); //设置背景图片
    // this.fmap.compass.setFgImage('../../images/compass_fg.png'); //设置前景图片
    this.fmap.showCompass = true;

    // 点击指北针事件, 使角度归0
    this.fmap.on('mapClickCompass', () => {
      this.fmap.rotateTo({
        //设置角度
        to: 0,
        //动画持续时间，默认为。3秒
        duration: 0.3,
        callback: function () { //回调函数
          console.log('rotateTo complete!');
        }
      })
    });
  },

  /**
   * 2D/3D切换
   */
  changeMode() {
    if (this.fmap) {
      if (!this.data.is3D) {
        // 切换地图为三维模式
        this.fmap.viewMode = fengmap.FMViewMode.MODE_3D;
      } else {
        // 切换地图为二维模式
        this.fmap.viewMode = fengmap.FMViewMode.MODE_2D;
      }
    }
    //更改状态
    this.setData({
      is3D: !this.data.is3D
    })
  },


  ///////////////////////////////////////////////
  // 楼层控件回调事件(start)
  //////////////////////////////////////////////
  // 设置楼层数据
  loadScrollFloorCtrl: function () {
    // 获取楼层id
    let groupIDs = [];
    this.fmap.listGroups.map((ls) => {
      let obj = {
        alias: ls.alias,
        gid: ls.gid,
        gname: ls.gname
      }
      groupIDs.push(obj);
      return obj;
    });

    this.setData({
      mapGroupIDs: groupIDs.reverse(),
      focusGroupID: this.fmap.focusGroupID
    })

  },
  // 切换楼层
  switchGroup(e) {
    if (this.fmap) {
      this.fmap.focusGroupID = e.detail;
      this.setData({
        focusGroupID: e.detail
      })
    }
  },

  /**
  * 切换单、多层
  * @param {*} e 
  */
  switchLayers() {
    if (this.fmap) {
      if (!this.data.isAllLayer) {
        this.fmap.visibleGroupIDs = this.fmap.groupIDs;
      } else {
        this.fmap.visibleGroupIDs = [this.fmap.focusGroupID];
      }
    }
    //更改状态
    this.setData({
      isAllLayer: !this.data.isAllLayer
    })
  }

  ///////////////////////////////////////////////
  //楼层控件回调事件(end)
  //////////////////////////////////////////////
})