<template>
  <view class="page-body">
    <div id="txMapContainer" style="width: 100%;height: 100%;">&nbsp;</div>
    <div style="display: none;">
      <view id="popView">
        <!-- <view><image src="../../../static/logo.png"/></view> -->
        <view><image src="https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/em.jpg"/></view>
        <view>姓名:张三</view>
        <view>页面更新标志：{{ address }}</view>
        <view>
          <u-button>查看</u-button>
          <u-button>选择</u-button>
        </view>
      </view>
    </div>
  </view>
</template>

<script>
  import commonConfig from 'common/config.js';
	export default {
		data() {
			return {
				myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
        //地图相关
				latitude: '43.86487',
				longitude: '',
				address: '',
        mapScale: 16, // 地图默认放大倍数
        markers: [], // 地图上markers列表
        cmap: null, //当前的map对象
        infoWindow: null,
        marker: null,
        socketConnect: null,
        pointMap: {},//点map
        pointThread: null,
        massageTypeId: null, 
			}
		},
		onLoad(e) {
      let that = this;
      that.massageTypeId = e.massageTypeId;
      that.getLocation();
		},
    onReady(){
      console.log('this ->',this,uni);
      this.initMap();
      this.initMapPointThread();
    },
		onShow() {
		},
    onUnload() {
      this.closeSocket();
    },
		methods: {
      log(...d){
        console.log(this,...d);
      },
      getLocation(){
        let that = this;
        //获取地理坐标
        uni.getLocation({
          // type: 'wgs84',
          type: 'gcj02',
          //isHighAccuracy: true,
          success: function(res) {
            let longitude = res.longitude;
            let latitude = res.latitude;
            console.log('当前位置的经度：' + longitude);
            console.log('当前位置的纬度：' + latitude);
            getApp().globalData['longitude'] = longitude;
            getApp().globalData['latitude'] = latitude;

            console.log('定位成功',latitude, longitude);
            if(that.cmap){
              that.cmap.setCenter(new TMap.LatLng(latitude, longitude));
            }
            if(that.infoWindow){
              that.infoWindow.setPosition(new TMap.LatLng(latitude, longitude));
            }
          }
        });
        //读取缓存里面的经纬度
        let longitude = getApp().globalData['longitude'] || -1;
        let latitude = getApp().globalData['latitude'] || -1;
        return { latitude, longitude };
      },
      initMap() {
        let that = this;
        //读取缓存里面的经纬度
        let longitude = getApp().globalData['longitude'] || -1;
        let latitude = getApp().globalData['latitude'] || -1;

        let center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
        //初始化地图
        let map = new TMap.Map("txMapContainer", {
          center: center
        });
        //初始化infoWindow
        var infoWindow = that.creatInfoWindow(map);
        that.infoWindow = infoWindow;
        that.cmap = map;
        that.address = Math.random()
        
        let marker = that.creatMarker(map);
        that.marker = marker;
        console.log('marker ->',marker);

        infoWindow.close();//初始关闭信息窗关闭
      },
      creatInfoWindow(map){
        //读取缓存里面的经纬度
        let longitude = getApp().globalData['longitude'] || -1;
        let latitude = getApp().globalData['latitude'] || -1;
        return new TMap.InfoWindow({
          map,
          position: new TMap.LatLng(latitude, longitude),
          offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
        });
      },
      creatMarker(map){
        let that = this;
        let geometries = [];
        Object.keys(that.pointMap).forEach(k => {
          let data = that.pointMap[k];
          if(data){
            let xy = data.split(',');
            let x = Number(xy[0]);
            let y = Number(xy[1]);
            geometries.push({
              id: k,
              styleId: 'marker',
              position: new TMap.LatLng(x, y),
              properties: {
                title: "marker"
              }
            });
          }
        });
        //初始marker
        let marker = new TMap.MultiMarker({
          id: 'marker-layer',
          map,
          styles: {
            "marker": new TMap.MarkerStyle({
              "width": 24,
              "height": 35,
              "anchor": { x: 12, y: 35 },
              "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
            })
          },
          geometries,
        });
        //监听标注点击事件
        let infoWindow = that.infoWindow;
        marker.on("click", function (evt) {
          //设置infoWindow
          that.address = Math.random()
          infoWindow.open(); //打开信息窗
          infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
          //等待一点点，
          that.$nextTick(() => {
            //使用弹窗模板
            infoWindow.setContent(document.querySelector('#popView').innerHTML);//设置信息窗内容
          })
        })
        
        return marker;
      },
      updateMarker(map){
        let that = this;
        let geometries = [];
        Object.keys(that.pointMap).forEach(k => {
          let data = that.pointMap[k];
          if(data){
            let xy = data.split(',');
            let x = Number(xy[0]);
            let y = Number(xy[1]);
            geometries.push({
              id: k,
              styleId: 'marker',
              position: new TMap.LatLng(x, y),
              properties: {
                title: "marker"
              }
            });
          }
        });
        if(that.marker){
          that.marker.setGeometries(geometries);
        }
      },
      getUserId(){
        return this.myId;
      },
      getBusinessId(){
        // return '12345678900987654321';
        return this.massageTypeId;
        // return '98';
      },
      creatSocket(){
        let deviceId = this.getBusinessId();
				let socketConnect = uni.connectSocket({
					url: commonConfig.WS_UPLOAD_MAP_PATH + deviceId,
					data() {
						return {
							msg: ''
						}
					},
					header: {
						'content-type': 'application/json',
						// 'token': token
					},
					method: 'GET',
					success(res) {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
            // uni.showLoading({
            //   title: '连接成功！'
            // });
					},
					fail(err) {
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
            // uni.showLoading({
            //   title: '连接失败！'
            // });
					}
				});
				uni.onSocketOpen((res) => {
					// uni.hideLoading()
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '连接成功'
					// })
					console.log('onOpen', res);
				});
				uni.onSocketError((err) => {
					// this.connecting = false
					// this.connected = false
					// uni.hideLoading()
					// uni.showModal({
					// 	content: '网络较差，请稍后再试',
					// 	showCancel: false
					// })
					console.log('onError', err);
				});
				uni.onSocketMessage((res) => {
					let that = this;
					console.log('onMessage', res)
					let datas = JSON.parse(res.data)
					// let data = {
					// 	chat: {
					// 		userHead: '../../static/logo.png'
					// 	},
					// 	content: datas.content,
					// 	type: datas.type,
					// 	sendType: datas.sendType
					// }
					// that.ListItem.push(data);
          //解析点
          this.pointMap = {};
          switch(datas.type){
            case 'getCoordinate': {
              this.pointMap = datas.data;
              //that.creatMarker(that.cmap);
              that.updateMarker(datas.data);
              break;
            }
            default: {
              
            }
          }
          
				});
				uni.onSocketClose((res) => {
					console.log('onClose', res)
				});
        
        this.socketConnect = socketConnect;
        uni.userSocketConnect = socketConnect;
      },
      sendMsg(msg){
        uni.sendSocketMessage({
          data: JSON.stringify(msg),
          success: (...e)=> {
            console.log('发送成功！',...e);
          },
          fail: (...e)=> {
            console.log('发送失败！',...e);
          },
        });
      },
      closeSocket(){
        uni.closeSocket();
        //temp1.pointThread
        clearInterval(this.pointThread);
      },      
      initMapPointThread(){
        let that = this;
        //创建连接
        if(!that.socketConnect){
          that.socketConnect = uni.userSocketConnect;
        } if(uni.userSocketConnect){
          that.socketConnect = uni.userSocketConnect;
        }else{
          that.creatSocket();
        }
        //开始循环
        that.forSendMsg();
      },
      forSendMsg(){
        let that = this;
        if(!that.mapPointThreadIsRun){
          let pointThread = setInterval(()=>{
            that.sendMsgFn();
          },5000);
          this.pointThread = pointThread;
        }
      },
      sendMsgFn(){
        let that = this;
        let userId = that.getUserId();
        let businessId = that.getBusinessId();
        let msg = {
          sendType: "getCoordinate",
          userId,
          businessId,
          rkey : `map:location:${businessId}:*`
        }
        that.sendMsg(msg);
      },
  }
}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}
  .page-body {
    width: 100%;
    height: 100vh;
  }
</style>