<template>
  <div id="map">
    <iframe id="i_map" name="i_map">

    </iframe>
  </div>
</template>

<script>
import CityGis from '../../unit/map/CityGis.Bridge.js';
import {myBridge} from "../../unit/map/map.js";
import {useMapStore} from "../../store/mapStore.js";
import {nextTick,ref,onMounted} from "vue";
import {
  AddSingleLayer,
  AreaJsonRankShow,
  FeatureThreeDimension,
  MapClickByType,
  SetBackground
} from "../../unit/map/addLayer.js";
import {getMapNum} from "@/service/map.js";
let bridge;
export default {
  name: "Map",
  setup(){
    const mapStore = useMapStore();
    onMounted(()=>{
      myBridge.bridgeContent =  bridge = new CityGis.Bridge({
        id: "i_map",
        url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark_hyjcsjk&type=3D', //建科发布
        //url: 'http://localhost:8081/#/jk_map?theme=dark_hyjcsjk&type=3D',
        onReady: function () {
          console.log("地图创建完成")
        }
      })
      MapClickByType('show');
      SetBackground();
      bridge.addEventListener(arg => {
        alert(arg.action);
        switch (arg.action) {
          case "MapExtentChanged":
            let scale = arg.data.scale;
            if(mapStore.currentNum){
              if(scale > 100000 && mapStore.scale  <= 100000){
                getMapNum('county',mapStore.currentNum).then(res =>{
                  debugger
                  let data = res.data.data;
                  let zxCount = 0;
                  let zxList = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区']
                  data.forEach(item =>{
                    if(zxList.indexOf(item.name) > -1){
                      zxCount += item.value * 1;
                    }
                  })
                  data.push({
                    name:"中心城区",
                    value:zxCount
                  })
                  debugger
                  AreaJsonRankShow({
                    type:"zx",
                    status:"show",
                    data:data
                  });
                })
              }else if(scale > 80000 && mapStore.scale  <= 80000 ){
                debugger
                getMapNum('county',mapStore.currentNum).then(res =>{
                  debugger
                  let data = res.data.data
                  AreaJsonRankShow({
                    type:"qx",
                    status:"show",
                    data:data
                  });
                })
              }else if(scale < 70000 && mapStore.scale  >= 70000){
                getMapNum('street',mapStore.currentNum).then(res =>{
                  debugger
                  let data = res.data.data
                  AreaJsonRankShow({
                    type:"jz",
                    status:"show",
                    data:data
                  });
                })
              }
              if(scale < 6000 && mapStore.scale  >= 6000){
                debugger
                FeatureThreeDimension({
                  url:mapStore.currentLayer.ADDRESS,
                  token:mapStore.currentLayer.TOKEN,
                  status:"show"
                });
              }else if(scale > 6000 && mapStore.scale  <= 6000){
                debugger
                FeatureThreeDimension({
                  url:mapStore.currentLayer.ADDRESS,
                  token:mapStore.currentLayer.TOKEN,
                  status:"hide"
                });
              }
            }
            mapStore.scale = scale;
            break;
        }
      })
    })
  }
}
</script>

<style scoped lang="scss">
#map{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#i_map {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
}
</style>