<template>
  <div id="basic-map" style="display: flex; overflow: hidden; position: relative">
    <div style="width: 50%; border-right: #1890ff solid 3px" :style="{ height: height }" v-show="splitScreen">
      <div id="basicMap2" ref="basicMap2" :style="{ height: height }" class="basicMap">
        <div id="div1"></div>
        <tool-bar ref="toolbar2" :tools="['isRes']" :splitScreen="true"></tool-bar>
        <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
      </div>
    </div>
    <div style="flex: 1">
      <div ref="basicMap" class="basicMap" id="basicMap" :style="{ height: height }">
        <tool-bar v-model="isToolBar" ref="toolBar" :tools="mapTools" :v-if="toolsLoaded"></tool-bar>
        <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
        <base-map v-if="enableTianditu" ref="baseMap" :wkid="this.wkid"></base-map>
        <div ref="coordinate" class="coordinate">{{ currentCoords }}</div>
      </div>
    </div>
    <div v-if="analysisResult" id="right-sild" @click="handleDrawer" :style="drawerStyle">
      <p class="ttitle"><br/>分<br/>析<br/>结<br/>果</p>
    </div>
    <div>
      <query-info ref="detail" v-model="infoShow"></query-info>
    </div>
    <div>
      <JModal :visible="this.show"></JModal>
    </div>
  </div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Viewpoint from '@arcgis/core/Viewpoint'
import Basemap from '@arcgis/core/Basemap'
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import Extent from '@arcgis/core/geometry/Extent'
import Home from '@arcgis/core/widgets/Home'
import Compass from '@arcgis/core/widgets/Compass'
import Fullscreen from '@arcgis/core/widgets/Fullscreen'
import Legend from '@arcgis/core/widgets/Legend'
import ScaleBar from '@arcgis/core/widgets/ScaleBar'
import Zoom from '@arcgis/core/widgets/Zoom'
import TileLayer from '@arcgis/core/layers/TileLayer'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import WMTSLayer from '@arcgis/core/layers/WMTSLayer'
import WMSLayer from '@arcgis/core/layers/WMSLayer'
import WFSLayer from '@arcgis/core/layers/WFSLayer'
import * as identify from '@arcgis/core/rest/identify'
import store from '@/store'
import IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters'
import BaseMap from './widgets/BaseMap'
import LocateByGeoinfo from './widgets/LocateByGeoinfo'
import ToolBar from './widgets/ToolBar'
import {
  getAction
} from '../../api/manage'
import TileInfo from '@arcgis/core/layers/support/TileInfo'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import QueryInfo from '@comp/OneMap/widgets/QueryInfo'

export default {
  name: 'BasicMap',
  components: {
    ToolBar,
    BaseMap,
    LocateByGeoinfo,
    QueryInfo,
  },
  data() {
    return {
      show: false,
      esriMap: {},
      mapView: {},
      infoShow: false,
      baseRasterLayerUrl: '',
      res: {},
      locate_GraphicsLayer: {},
      draw_GraphicsLayer: {},
      layerSketch: {},
      analysis_GraphicsLayer: {},
      analysis_Drew_GraphicsLayer: {},
      path_GraphicsLayer: {},
      spatialReference: {},
      initExtent: {},
      layerConfigs: [],
      layerList: [],
      layerList2: [],
      webTiledLayerId: [],
      list: [],
      layerNum: 0,
      layerCount: 0,
      v_layerIds: [],
      mapTools: [],
      toolsLoaded: false,
      currentCoords: '',
      popupTemplate: {},
      resData: {},
      splitScreen: false,
      enableTianditu: true,
      routeList: ['mainMap'],
      layerInfos: [], //存储需要展示图例的layer,
      drawerVisible: false,
      drawerStyle: '',
      analysisResult: false,
      result: {
        单位名称: '',
        /* BZ:'',*/
        文件编号: '',
        //一级单位: '',
        地块名称: '',
        文件类型: '',
        /* 文件_1:'',*/
        土地使用权人: '',
        实际占用土地面积: '',
        /* 实际_1:'',*/
        其中证载使用土地面积: '',
        其中证载使用建筑面积: '',
        /*  其中_1:'',*/
        实际使用建筑面积: '',
        // 总建筑面积: "",
        //容积率: '',
        使用权使用方式: '',
        // 城市: '',
        // 县区: '',
        坐落位置: '',
        实际用途: '',
        权属起始时间: '',
        权属结束时间: '',
        担保: '',
        土地使用现状: '',
        // 审核是否通过: '',
        // 目前情况: '',
        /* 规划地类:'',*/
      },
    }
  },
  props: {
    resConfigUrl: {
      type: String,
    },
    toolsConfigUrl: {
      type: String,
    },
    topicId: {
      type: String,
      default: 'null',
    },
    height: {
      type: String,
      default() {
        let calcHeight = window.document.documentElement.clientHeight - 130
        let m_height = calcHeight.toString() + 'px'
        return m_height
      },
    },
    center: {
      type: Array,
      default: function () {
        return [118.9943, 36.4939]
      },
    },
    extent: {
      type: Array,
      default: function () {
        /* return [118.109760, 35.019916, 118.475084, 35.388584];*/
        /*  return [118.109760, 35.019916, 118.475084, 35.388584];*/
        return [114.5997, 34.5248, 123.2469, 38.5253]
      },
    },
    wkid: {
      type: Number,
      default: 102100,
    },
    zoom: {
      type: Number,
      default: 8,
    },
    isToolBar: {
      type: Boolean,
      default: true,
    },
  },
  provide() {
    return {
      basicMap: this,
    }
  },
  created() {
    this.spatialReference = new SpatialReference({
      wkid: this.wkid,
    })
    this.initExtent = new Extent(this.extent[0], this.extent[1], this.extent[2], this.extent[3])
    this.popupTemplate = {
      overwriteActions: true,
      outFields: ['*'],
      title: ({
                graphic: {
                  attributes,
                  layer
                }
              }) => {
        const dkmc = layer.title
        return `<div>${dkmc || ''}</div>`
      },
      content: this.selectChange,
      actions: [{
        title: '详情',
        id: 'showDKDetail',
        className: 'esri-icon-zoom-in-magnifying-glass',
      },
        {
          title: '全景',
          id: 'showAll',
          className: 'esri-icon-globe',
        },
      ],
    }
    this.baseRasterLayerUrl = window._CONFIG['mapBaseLayerURL']
  },
  mounted() {
    this.$nextTick(() => {
      if (this.topicId != 'null') {
        this.getTopicConfig()
      } else {
        this.loadMapConfig()
      }
      this.loadMapTools()
    })
  },
  watch: {},
  methods: {
    //获取专题配置
    async getTopicConfig() {
      let {
        result,
        success,
        message
      } = await getAction('topicManage/topicsConfig/list', {
        topicid: this.topicId,
      })
      if (success) {
        this.loadMapConfig(result.records[0].analysistypes)
      } else {
        this.$message.error(message)
      }
    },
    async loadMapConfig(analysistypes) {
      let {
        result,
        success,
        message
      } = await getAction(this.resConfigUrl, {
        username: store.getters.userInfo.username,
        topicId: this.topicId,
      })
      if (success) {
        this.layerList = JSON.parse(JSON.stringify(result))
        this.layerList2 = JSON.parse(JSON.stringify(result))
        let self = this
        this.list.push(this.layerList, this.layerList2)
        if (this.layerList && this.layerList.length !== 0) {
          this.layerList.forEach((layerItem) => {
            if (layerItem.layers) {
              //累计记录需要加载的图层数量，用以之后判断图层是否全部加载完毕
              self.layerNum += layerItem.layers.length
              //记录所有的 图层配置，
              layerItem.layers.forEach((layerConfig) => {
                if (layerConfig) {
                  if (analysistypes) {
                    if (analysistypes.includes(layerConfig.name)) {
                      layerConfig.analyzable = true
                    } else {
                      layerConfig.analyzable = false
                    }
                  }
                  self.layerConfigs.push(layerConfig)
                }
              })
            }
          })
        }
        this.initMap()
        if (this.enableTianditu) {
          this.$refs.baseMap.imgMapClick()
        }
      } else {
        this.$message.error(message)
      }
    },
    async loadMapTools() {
      let {
        result,
        success,
        message
      } = await getAction(this.toolsConfigUrl, {
        username: store.getters.userInfo.username,
        topicId: this.topicId,
      })
      if (success) {
        this.mapTools.push(...result)
        // if (this.toolsCustom) {
        //   for (let i = this.mapTools.sort().length - 1; 0 < i; i -= 1) {
        //     i -= this.mapTools.splice(i, 1)[0] === this.mapTools[i - 1];
        //   }
        // }
        this.toolsLoaded = true
      } else {
        this.$message.error(message)
      }
    },
    initMap() {
      // let baseRasterLayer = new WMTSLayer({
      //   url: this.baseRasterLayerUrl
      //   // serviceMode: 'KVP'
      // });
      // let basemap = new Basemap({
      //   baseLayers: [baseRasterLayer],
      //   spatialReference:new SpatialReference({
      //     wkid: 102100
      // });
      //   })
      this.esriMap = new Map({
        slider: true, //开启放大缩小

        // basemap: basemap
      })
      this.mapView = new MapView({
        container: this.$refs.basicMap,
        map: this.esriMap,
        ui: {
          components: [],
        },
        extent: this.initExtent,
        popup: {
          defaultPopupTemplateEnabled: true, // popup will be enabled on the wfslayer
        },
      })
      this.mapView.constraints = {
        minZoom: 7,
        maxZoom: 18,
      }

      // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
      // this.mapView.ui.components = [];
      this.mapView.when(
        () => {

          this.initWeights()
        },
        (error) => {
          this.$message.error(error.message)
        }
      )

      this.initLayers()

      this.initSplitMaps()
      this.initActiveViewEvents()
      this.initMapEvents()
      this.initGraphicsLayers()
      /*this.esriMap.basemap = basemap;*/
    },
    initSplitMaps() {
      // this.splitScreen=!this.splitScreen;
      // this.splitScreen===false;return
      this.esriMap2 = new Map({})
      this.mapView2 = new MapView({
        container: this.$refs.basicMap2,
        map: this.esriMap2,
        ui: {
          components: [],
        },
        extent: this.mapView.extent,
      })
      this.mapView.when(
        () => {
          this.loadLayers(this.layerList2, this.esriMap2)
        },
        function (error) {
          this.$message.error(error.message)
        }
      )
      let views = [this.mapView, this.mapView2]
      views.forEach((view) => {
        // 定义一个范围变量
        let fullextent = null
        // 设置鼠标滚轮事件
        view.on('mouse-wheel', (e) => {
          // 延迟获取范围的函数
          window.setTimeout(() => {
            // 获取操作图层的范围
            fullextent = view.extent
            // 遍历所有视图来设置这个范围
            views.forEach((nview) => {
              nview.extent = fullextent
            })
          }, 1)
        })
        // 设置鼠标拖拽事件
        view.on('drag', (e) => {
          // 获取操作图层的范围
          fullextent = view.extent
          // 遍历所有视图来设置这个范围
          views.forEach((nview) => {
            nview.extent = fullextent
          })
        })
      })
    },

    initLayers() {
      if (this.layerList.length == 0) {
        this.$message.warn('未查询到图层相关配置')
      } else {
        this.loadLayers(this.layerList, this.esriMap)
      }
    },
    loadLayers(list, map) {
      if (list && list.length !== 0) {
        list.forEach((layerItem) => {
          if (layerItem.layers) {
            this.loadLayers(layerItem.layers, map)
          } else {
            this._loadLayer(layerItem, map)
          }
        })
      }
    },
    // 载入图层到layers
    _loadLayer: function (layerItem, esriMap) {
      let layer = null
      switch (layerItem.servicetype) {
        case 'DynamicLayer': {
          layer = new MapImageLayer({
            id: layerItem.id,
            title: layerItem.alias,
            url: layerItem.url,
          })
          let layerInfo = {
            title: layerItem.alias,
            layer: layer,
          }
          if (layerItem.sublayerid != undefined && layerItem.sublayerid != null) {
            layer.sublayers = [{
              id: layerItem.sublayerid,
              visible: layerItem.visible,
              labelsVisible: layerItem.labelsvisible,
            },]
            if (layerItem.visible && layerItem.queryable) {
              this.v_layerIds.push(layerItem.sublayerid)
            }
            layerInfo.sublayerIds = [layerItem.sublayerid]
          } else {
            layer.visible = layerItem.visible
          }
          this.layerInfos.push(layerInfo)
          break
        }
        case 'TileLayer': {
          layer = new TileLayer({
            id: layerItem.id,
            title: layerItem.alias,
            url: layerItem.url,
            visible: layerItem.visible,
          })
          break
        }
        case 'FeatureLayer': {
          layer = new FeatureLayer({
            id: layerItem.id,
            title: layerItem.alias,
            url: layerItem.url,
            popupTemplate: this.popupTemplate,
            visible: layerItem.visible,
          })
          break
        }
        /*sugb 20240530 瓦片服务*/
        case 'WMTSLayer': {
          console.log("#########瓦片服务-start#######")
          console.log(JSON.stringify(layerItem))
          this.webTiledLayerId.push(layerItem.id)
          layer = new WMTSLayer({
            id: layerItem.id,
            url: layerItem.url,               //WMTS服务的URL地址
            layerIdentifier: layerItem.name,  //属性用于指定你要加载的WMTS图层的标识符（即图层名称）
            title: layerItem.alias,           //描述
            style: layerItem.style,           //图层的样式。通常为default
            format: 'image/png',              //瓦片图像的格式,可默认
            activeLayer: {
              id: layerItem.name, //图层名称
              tileMatrixSetId: 'EPSG:4326', //瓦片矩阵集的标识符（通常为坐标参考系统的EPSG代码）
            },
            visible: layerItem.visible, //是否显示
          })
          break
        }
        /*sugb 20240530 wms服务*/
        case 'WFSLayer': {
          layer = new WFSLayer({
            id: layerItem.id,
            url: layerItem.url,
            title: layerItem.alias,
            name: layerItem.name,
            style: layerItem.style,
            popupTemplate: {
              overwriteActions: true,
              outFields: ['*'],
              title: ({
                        graphic: {
                          attributes,
                          layer
                        }
                      }) => {
                const dkmc = layer.title
                return `<div>${dkmc || ''}</div>`
              },
              content: this.selectChange,
              actions: [{
                title: '详情',
                id: 'showDKDetail',
                className: 'esri-icon-zoom-in-magnifying-glass',
              },
                {
                  title: '全景',
                  id: 'showAll',
                  className: 'esri-icon-globe',
                },
              ],
            },
            visible: layerItem.visible,
          })
          break
        }
        default:
          break
      }
      //所有的图层都加载完成事件
      layer.on('layerview-create', (evt) => {
        this.layerCount++
        if (this.layerNum == this.layerCount) {
          this.$emit('layer-loadAll', true)
          this.mapView.extent = this.initExtent
          this.initBaseLayer()
        }
      })
      if (parseInt(layerItem.zIndex)) {
        esriMap.add(layer, parseInt(layerItem.zIndex))
      } else {
        esriMap.add(layer)
      }
    },

    initBaseLayer() {
      let baseRasterLayer = new WMTSLayer({
        url: this.baseRasterLayerUrl,
      })
      let basemap = new Basemap({
        baseLayers: [baseRasterLayer],
        spatialReference: new SpatialReference({
          wkid: 102100,
        }),
      })
      this.esriMap.basemap = basemap
      this.esriMap2.basemap = basemap
    },
    initGraphicsLayers() {
      this.draw_GraphicsLayer = new GraphicsLayer({
        title: '绘图专用图层',
      })
      this.esriMap.add(this.draw_GraphicsLayer, 100)
      this.layerSketch = new GraphicsLayer({
        title: '编辑图斑专用图层',
      })
      this.esriMap.add(this.layerSketch, 100)
      this.analysis_GraphicsLayer = new GraphicsLayer({
        title: '分析专用图层',
        id: 'analysis',
      })
      this.esriMap.add(this.analysis_GraphicsLayer, 100)
      this.analysis_Drew_GraphicsLayer = new GraphicsLayer({
        title: '分析绘制专用图层',
        id: 'analysisDraw',
      })
      this.esriMap.add(this.analysis_Drew_GraphicsLayer, 101)
      this.path_GraphicsLayer = new GraphicsLayer({
        title: '巡回轨迹专用图层',
        id: 'path',
      })
      this.esriMap.add(this.path_GraphicsLayer, 100)
      this.locate_GraphicsLayer = new GraphicsLayer({
        title: '定位专用图层',
      })
      this.esriMap.add(this.locate_GraphicsLayer, 101)
    },
    initWeights() {
      // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
      this.mapView.ui.components = []
      let zoom = new Zoom({
        view: this.mapView,
      })
      this.mapView.ui.add(zoom, 'top-left')
      zoom.when(
        (evt) => {
        },
        (err) => {
          if (this.routeList.indexOf(this.$route.name) != -1) {
            location.reload(true)
          }
        }
      )

      let homeBtn = new Home({
        view: this.mapView,
        viewpoint: new Viewpoint({
          targetGeometry: this.initExtent,
        }),
      })
      this.mapView.ui.add(homeBtn, 'top-left')

      let compass = new Compass({
        view: this.mapView,
      })
      this.mapView.ui.add(compass, 'top-left')

      //组件有问题，全屏模式开启后，再切换回正常模式，地图不显示了（地图高度变成0了）
      // let fullScreen = new Fullscreen({
      //   view:this.mapView
      // })
      // this.mapView.ui.add(fullScreen,"top-right");

      // let legend = new Legend({
      //   view:this.mapView,
      //   layerInfos:this.layerInfos,
      //   style:"max-height:10em;max-width:200px;overflow-y:auto"
      // });
      // this.mapView.ui.add(legend, 'bottom-left');

      let scaleBar = new ScaleBar({
        view: this.mapView,
        unit: 'metric', //Possible Values:"non-metric"|"metric"|"dual"
        style: 'line', //Possible Values:"ruler"|"line"
      })
      this.mapView.ui.add(scaleBar, 'bottom-left')
    },
    initMapEvents() {
      this.mapView.on('pointer-move', (evt) => {
        let point = this.mapView.toMap(evt)
        this.currentCoords = point.longitude.toFixed(4) + ',' + point.latitude.toFixed(4)
      })

      this.mapView.on('click', (evt) => {
        if (this.$refs.toolBar.enableIdentify) {
          this.$refs.toolBar.doIdentify(evt)
        }
      })
      this.$emit('mapViewLoaded', true)
    },
    // 初始化activeView的监听事件
    initActiveViewEvents() {
      if (this.mapView) {
        // PopupViewModel的触发动作被触发，然后检查动作id
        this.mapView.popup.on('trigger-action', ({action}) => {
          const actionId = action.id
          let {
            attributes
          } = this.mapView.popup.viewModel.selectedFeature
          // 点击"地块详情"
          if (actionId === 'showDKDetail' && this.resData.sysOrgCode != null) {
            //获取弹出的popup所归属的graphic的attributes
            // getAction("")
            if (this.resData.sysOrgCode.slice(0, 3) == 'A04') {
              this.result.单位名称 = this.resData.createBy
              /*this.result.BZ=attributes.BZ;*/
              this.result.地块名称 = this.resData.dk
              this.result.文件类型 = this.resData.wjlx
              this.result.文件编号 = this.resData.wjbh
              // this.result.一级单位 = attributes.YJDW;
              /* this.result.文件_1=attributes.WJ_1;*/
              this.result.土地使用权人 = this.resData.tdsyqr
              this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmjPf).toFixed(2)
              /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
              this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpztdmjPf).toFixed(2)
              this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
              this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
              this.result.是否共用宗 = this.resData.sfgyz
              this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2)
              this.result.使用权使用方式 = this.resData.syqsyfs
              // this.result.城市 = this.resData.CS;
              // this.result.县区 = this.resData.XQ;
              this.result.坐落位置 = this.resData.zlwz
              this.result.实际用途 = this.resData.sjytText
              this.result.权属起始时间 = this.resData.qsqssj
              this.result.权属结束时间 = this.resData.qsdqsj
              this.result.担保 = this.resData.dbdycfqk
              this.result.备注 = this.resData.BZ
              this.result.土地使用现状 = this.resData.tdsyxz
              this.result.地块编号 = this.resData.dkbh
              //this.result.审核是否通过 = this.resData.shzt;
              //this.result.目前情况 = this.resData.MQQ;
              /*  this.result.规划地类=attributes.GHD;*/
              this.result.IMAGE = this.resData.images
              this.infoShow = true
              this.$refs.detail.loadDetail(this.result)
            }
            if (this.resData.sysOrgCode.slice(0, 3) == 'A03') {
              this.result.单位名称 = this.resData.createBy
              /*this.result.BZ=attributes.BZ;*/
              this.result.地块名称 = this.resData.dk
              this.result.文件类型 = this.resData.zslx
              this.result.文件编号 = this.resData.wjbh
              // this.result.一级单位 = attributes.YJDW;
              /* this.result.文件_1=attributes.WJ_1;*/
              this.result.土地使用权人 = this.resData.tdsyqr
              this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmj).toFixed(2)
              /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
              this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpzsymj).toFixed(2)
              this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
              this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
              //  this.result.总建筑面积 = parseFloat(this.resData.ZJZ).toFixed(2);
              // this.result.是否共用宗 = this.resData.sfgyz;
              //this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2);
              this.result.使用权使用方式 = this.resData.syqsyfs
              /* this.result.城市 = this.resData.CS;
               this.result.县区 = this.resData.XQ;*/
              this.result.坐落位置 = this.resData.zlwz
              this.result.实际用途 = this.resData.sjyt
              this.result.权属起始时间 = this.resData.qsqssj
              this.result.权属结束时间 = this.resData.qsdqsj
              this.result.担保 = this.resData.dbdycfqk
              this.result.土地使用现状 = this.resData.tdsyxz
              this.result.备注 = this.resData.BZ
              //  this.result.审核是否通过 = this.resData.shzt;
              this.result.地块编号 = this.resData.dkbh
              this.result.IMAGE = this.resData.images
              this.infoShow = true
              this.$refs.detail.loadDetail(this.result)
            }
          } else if (actionId == 'showAll') {
            if (this.resData.vr == null) {
              this.$message.warn('全景图片不存在！')
            } else {
              window.open('/vtour/tour.html?startscene=scene_' + this.resData.vr, '_blank')
              //window.open('http://localhost:56122/?startscene=scene_'+this.resData.vr, '_blank')
            }
          } else {
            this.$message.warn('该地块未上报信息！')
          }
        })
      }
    },
    //TODO 点击地图时弹出信息
    selectChange(feature) {
      //console.log('selectChange'+JSON.stringify(feature))
      let content = document.createElement('div')
      this.resData = []
      if (feature.graphic.attributes.DKBH != ' ') {
        return new Promise((resolve, reject) => {
          getAction('/qcsb/qcSsgqzysytdqk/queryBydkbh', {DKBH: feature.graphic.attributes.DKBH}).then((res) => {
            if (res.code == 200) {
              this.resData = res.result
              resolve(this.resData)
            } else {
              resolve(this.resData)
            }
          })
        }).then((res) => {
          console.log("获取的地块信息")
          console.log(JSON.stringify(this.resData))
          if (res.sysOrgCode.slice(0, 3) == 'A04') {
            var dwmc = res.createBy
            var dkmc = res.dk
            var sjyd = res.sjytText
            var sjzytdmj = res.sjzytdmjPf
            var sjsyjzmj = res.sjsyjzmj
            // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
            content.innerHTML =
              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
                             <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
                             <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
                             <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${
                sjzytdmj || 0
              }²</div>
                              <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${
                sjsyjzmj || 0
              }²</div>`
            return content
          } else {
            var dwmc = res.createBy
            var dkmc = res.dk
            var sjyd = res.sjytText
            var sjzytdmj = res.sjzytdmj
            var sjsyjzmj = res.sjsyjzmj
            let content = document.createElement('div')
            // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
            content.innerHTML =
              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
                             <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
                             <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
                             <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${
                sjzytdmj || 0
              }²</div>
                              <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${
                sjsyjzmj || 0
              }²</div>
                               `
            return content
          }
        })
      } else {
        return (content.innerHTML =
            `  <div><span style="font-weight: bold;">企业名称：</span> <span>${feature.graphic.attributes.DWMC}<span/></div>
                             <div><span style="font-weight: bold;">证书编号：</span> <span>${feature.graphic.attributes.ZSBH}</span></div>
    <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >地块信息未上报</div>`
        )
        // this.$info({
        //   title: '说明',
        //   content: (<div><p>{地块信息不存在}</p></div>),
        //   onOk() {
        //   }
        // })
      }
    },
    locate(options) {
      this.$refs.locateByGeoinfo.locate(options)
    },
    locateByGeometry(geom) {
      this.$refs.locateByGeoinfo.locateByGeometryWithClean(geom, null)
    },
    locateToExtent(extent, geoConfigs) {
      this.$refs.locateByGeoinfo.locateToExtent(extent, geoConfigs)
    },
    //复选框处理方法
    changeLayerVisible(layerConfig, visible, esriMap) {
      //TODO:
      console.log("复选框处理事件")
      console.log(JSON.stringify(layerConfig))
      console.log(JSON.stringify(visible))
      if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
        //处理行政区划显示单选问题
        if (visible === undefined || visible === null) {
          visible = true
        }
        if (esriMap === undefined || esriMap === null) {
          esriMap = this.esriMap
        }
        //根据图层id获取图层，并改变图层在地图中的显示状态
        let m_layer = esriMap.findLayerById(layerConfig.id)
        if (!m_layer) {
          m_layer = this._loadLayer(layerConfig)
          m_layer.visible = visible
        } else {
          if (
            layerConfig.sublayerid != null &&
            layerConfig.sublayerid != -1 &&
            layerConfig.servicetype != 'TileLayer'
          ) {
            let sublayer = m_layer.findSublayerById(parseInt(layerConfig.sublayerid))
            sublayer.visible = visible
            if (layerConfig.queryable) {
              if (visible) {
                this.v_layerIds.push(layerConfig.sublayerid)
              } else {
                let index = this.v_layerIds.indexOf(layerConfig.sublayerid)
                if (index > -1) {
                  this.v_layerIds.splice(index, 1)
                }
              }
            }
          } else {
            m_layer.visible = visible
          }
        }
        //根据图层id，更改资源目录列表中图层的表示状态
        let layerList = this.list[0]
        if (layerList && layerList.length !== 0) {
          layerList.forEach((layerItem) => {
            if (layerItem.layers) {
              layerItem.layers.forEach((layerSubItem) => {
                if (layerSubItem.id === layerConfig.id) {
                  layerSubItem.visible = visible
                }
              })
            }
          })
        }
      }
    },
    changeLayerVisibleByLayerName(layerName, visible) {
      let layerConfig = {}
      this.layerConfigs.map((item) => {
        if (item.name == layerName) {
          layerConfig = item
        }
      })
      this.changeLayerVisible(layerConfig, visible, this.esriMap)
    },
    changeLayerVisibleByTableName(tableName, visible) {
      let layerConfig = {}
      this.layerConfigs.map((item) => {
        if (item.tablename == tableName) {
          layerConfig = item
        }
      })
      this.changeLayerVisible(layerConfig, visible, this.esriMap)
    },
    changeLayerOpacity(layerConfig, opacity) {
      if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
        let m_layer = this.esriMap.findLayerById(layerConfig.id)
        if (!m_layer) {
          return
        }
        m_layer.opacity = opacity
      }
    },
    handleCursorStyle(style) {
      if (style) {
        this.$refs.basicMap.style.cursor = style
      } else {
        this.$refs.basicMap.style.cursor = 'auto'
      }
    },
    handleDrawer() {
      this.drawerVisible = !this.drawerVisible
      /*if(this.drawerVisible){
        this.drawerStyle="right:438px"
      }else {
        this.drawerStyle="right:0"
      }*/
    },
  },
}
</script>

<style>
html,
body,
.basicMap {
  margin: 0;
  padding: 0;
  position: relative;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.coordinate {
  position: absolute;
  bottom: 1em;
  left: calc(50% - 60px);
  width: auto;
  height: 2em;
  line-height: 2em;
  background-color: white;
  box-shadow: 0 0 5px #1890ff;
  color: #1890ff;
  font-size: 1em;
  font-weight: bold;
  opacity: 0.9;
  padding: 0 0.5em;
}

.toolBar .ant-card {
  cursor: auto;
}

.toolBar .ant-card .ant-card-bordered {
  border: 0.1px solid #e8e8e8;
}

.toolBar .ant-card .ant-card-head {
  background-color: rgba(24, 129, 253, 0.8);
  color: #ffffff;
  cursor: move;
}

.toolBar .ant-card .ant-card-head-title,
.ant-card .ant-card-extra {
  padding: 12px 0;
}

.toolBar .ant-card-head .ant-card-head-wrapper {
  align-items: unset;
}

.legendPanel {
  position: absolute;
  left: 1em;
  bottom: 3em;
}

.drawQuery .ant-list-item-action {
  margin-left: 25px;
}

.toolBar .ant-list-item-action {
  margin-left: 10px;
  position: absolute;
  bottom: 3px;
  right: 0;
}

.ant-list-split .ant-list-item {
  border-bottom: 1px solid #e8e8e8;
  position: relative;
}

.ant-form-item .ant-form-item-label label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.sider ul.ant-menu[data-v-090c6f46] {
  height: calc(100vh - 59px);
  overflow: auto;
}

ul {
  padding: 0;
}

ul > li {
  list-style: none;
}

#app {
  height: 100%;
}

.sidemenu {
  display: flex;
  flex-direction: column;
}

#toolBar ::-webkit-scrollbar {
  width: 3px !important;
}

#toolBar ::-webkit-scrollbar {
  width: 3px !important;
  height: 0;
}

#toolBar ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #428fff;
}

.icon-close {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
}

.ant-avatar.result > img {
  display: inline-block;
  height: auto;
  width: auto;
}

.ant-card-body > .ant-btn {
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
}

.ant-list-item:hover {
  background: #e6f7ff;
  cursor: pointer;
}

.toolBar .ant-list-item {
  align-items: flex-start;
}

.toolBar .ant-btn-background-ghost.ant-btn-primary:hover,
.ant-btn-background-ghost.ant-btn-primary:focus {
  color: #faad14;
  border-color: #faad14;
}
</style>
<style scoped>
h2 {
  position: absolute;
  right: 0.25em;
  top: 0.25em;
  background-color: aliceblue;
  box-shadow: 0 0 5px #1890ff;
  padding: 1px 2px;
}

#right-sild {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 30px;
  height: 120px;
  background: #1890ff;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: absolute;
  font-size: 12px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  /*z-index: 10000;*/
}

.ttitle {
  margin-top: 6px;
  margin-left: 2px;
}

.basicMap2,
.basicMap3 {
  position: relative;
}

#div1 {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 888;
  color: #fff;
  margin: 0px 0px 0px 0px;
  background-image: url('../../assets/ico_mouse.png');
  width: 42px;
  height: 42px;
  border: 1px solid #ff0000;
}
</style>