<template>
  <div style="margin-top:-30px">
    <!-- <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="keywords" size="small" type="text" placeholder="兴趣点关键字" clearable />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" size="small" @click="queryOnMap">查询</el-button>
        <el-button type="info" size="small" @click="clearMap"> 清除地图 </el-button>
      </el-col>

      <el-col :span="8" style="text-align: center;">
        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
          <el-radio-button label="1">事件定位</el-radio-button>
          <el-radio-button label="0">部件定位</el-radio-button>
          <el-radio-button label="2">兴趣点属性</el-radio-button>
        </el-radio-group>
      </el-col>

      <el-col v-if="queryEventSwitch === '0'" :span="8" style="text-align: right;">
        <el-select v-model="componentId" placeholder="选择部件" clearable value="" size="small">
          <el-option
            v-for="item in compListOpts"
            :key="item.value"
            :label="item.name"
            :value="item.value"/>
        </el-select>
        <el-button type="primary" size="small" @click="checkComponentPoint"> 部件提交 </el-button>
      </el-col>

      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
      </el-col>
    </el-row> -->

    <div v-loading="mapLoading" ref="mapDiv" class="baseMap" />
  </div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { mapConfig, serverConfig } from './ArcGISConfig'

const option = {
  url: mapConfig.apiUrl
}

// const eventPointLayerId = 'eventPointLayer' // 事件定位点的图层id
// const queryResultLayerId = 'queryResultLayer' // 兴趣点查询结果点集的图层id
const caseLayerId = 'addedGeometryLayerId' // 案卷点图层

export default {
  name: 'ArcGisMapRead',
  props: {
    longitude: {
      type: Number,
      default: 116.5937
    },
    latitude: {
      type: Number,
      default: 28.249
    }
  },
  data() {
    return {
      map: '',
      view: '',
      layers: {
        dxbjPoint: '', // 部件点图层
        dxbjLine: '', // 部件线图层
        dxbjXqd: '', // 兴趣点图层
        dxbjMph: '', // 门牌好图层
        dx2wGrid: '' // 单元网格图层
      },
      esriObj: {
        Map: '',
        BaseMap: '',
        Graphic: '',
        PopupTemplate: '',
        Circle: '',
        Point: '',
        FeatureLayer: '',
        GraphicsLayer: '',
        TileLayer: '',
        SimpleMarkerSymbol: '',
        Query: '',
        QueryTask: '',
        IdentifyTask: '',
        IdentifyParameters: '',
        MapView: '',
        SpatialReference: ''
      },
      mapLoading: false
    }
  },
  mounted() {
    this.importEsri()
  },
  activated() {
    this.importEsri()
  },
  methods: {
    // 初始化ArcGIS API对象
    importEsri: function() {
      this.mapLoading = true
      loadModules([
        'esri/Map',
        'esri/Basemap',
        'esri/Graphic',
        'esri/PopupTemplate',
        'esri/geometry/Circle',
        'esri/geometry/Point',
        'esri/geometry/SpatialReference',
        'esri/layers/FeatureLayer',
        'esri/layers/GraphicsLayer',
        'esri/layers/TileLayer',
        'esri/symbols/SimpleMarkerSymbol',
        'esri/tasks/support/Query',
        'esri/tasks/QueryTask',
        'esri/tasks/IdentifyTask',
        'esri/tasks/support/IdentifyParameters',
        'esri/views/MapView',

        'dojo/domReady!'
      ], option)
        .then(([
          Map,
          BaseMap,
          Graphic,
          PopupTemplate,
          Circle,
          Point,
          SpatialReference,
          FeatureLayer,
          GraphicsLayer,
          TileLayer,
          SimpleMarkerSymbol,
          Query,
          QueryTask,
          IdentifyTask,
          IdentifyParameters,
          MapView

        ]) => {
          this.esriObj.Map = Map
          this.esriObj.BaseMap = BaseMap
          this.esriObj.Graphic = Graphic
          this.esriObj.PopupTemplate = PopupTemplate
          this.esriObj.Circle = Circle
          this.esriObj.Point = Point
          this.esriObj.FeatureLayer = FeatureLayer
          this.esriObj.GraphicsLayer = GraphicsLayer
          this.esriObj.TileLayer = TileLayer
          this.esriObj.SimpleMarkerSymbol = SimpleMarkerSymbol
          this.esriObj.Query = Query
          this.esriObj.QueryTask = QueryTask
          this.esriObj.IdentifyTask = IdentifyTask
          this.esriObj.IdentifyParameters = IdentifyParameters
          this.esriObj.MapView = MapView
          this.esriObj.SpatialReference = SpatialReference

          // 初始化地图
          this.initMap()
          this.mapLoading = false
        }).catch(err => {
          console.log(err)
          this.mapLoading = false
        })
    },
    // 初始化地图
    initMap: function() {
      const base = new this.esriObj.BaseMap({
        baseLayers: [
          new this.esriObj.TileLayer({ // 可配置属性，见TileLayer类
            id: 'cr_dt',
            url: serverConfig.mapUrlBase
          })
        ],
        title: 'cr_dt',
        id: 'cr_dt'
      })

      this.map = new this.esriObj.Map({
        basemap: base // 底图类型，详见BaseMap类
      })

      this.view = new this.esriObj.MapView({
        container: this.$refs.mapDiv, // 视图的容器
        map: this.map, // Map的实例放入视图中
        center: [116.597, 28.24], // 初始显示的地图中心点，经纬度
        zoom: 3 // 当前地图缩放等级
      })

      this.addBjLayers()
      this.addCasePointOnMap(this.longitude, this.latitude)
    },
    // 加载部件服务的各图层
    addBjLayers: function() {
      // 此处可以优化
      this.layers.dxbjPoint = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
        url: serverConfig.mapUrlBj + '/0',
        id: 'dxbjPoint'
      })
      // this.layers.dxbjLine = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
      //   url: serverConfig.mapUrlBj + '/1',
      //   id: 'dxbjLine'
      // })
      // this.layers.dxbjXqd = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
      //   url: serverConfig.mapUrlBj + '/2',
      //   id: 'dxbjXqd'
      // })
      // this.layers.dxbjMph = new this.esriObj.FeatureLayer({ // 可配置属性，见TileLayer类
      //   url: serverConfig.mapUrlBj + '/3',
      //   id: 'dxbjMph'
      // })
      this.layers.dx2wGrid = new this.esriObj.FeatureLayer({
        url: serverConfig.mapUrlBase + '/16',
        id: 'gridLayer'
      })

      // 加载各图层
      this.map.add(this.layers.dxbjPoint)
      // this.map.add(this.layers.dxbjLine)
      // this.map.add(this.layers.dxbjXqd)
      // this.map.add(this.layers.dxbjMph)
      this.map.add(this.layers.dx2wGrid)
    },
    // 在地图上添加指定坐标的点
    addCasePointOnMap: function(lng, lat) {
      console.log('addCasePointOnMap', lng, lat)
      const gLayer = new this.esriObj.GraphicsLayer() // 添加自定义绘制点的图层
      const point = new this.esriObj.Point(lng, lat, new this.esriObj.SpatialReference(4490)) // 创建geometry对象
      const marker = new this.esriObj.SimpleMarkerSymbol() // 创建marker标识
      // marker属性
      marker.color = 'red' // #F9690E
      marker.outline = {
        color: [128, 128, 128, 0.5],
        width: '2px'
      }
      // 创建graphic对象
      const graphic = new this.esriObj.Graphic({
        geometry: point,
        symbol: marker
      })
      gLayer.id = caseLayerId // 标识案卷图层
      gLayer.add(graphic) // 图层上添加对象
      this.map.add(gLayer) // 地图上添加图层

      // 重新设置地图中心点并移动
      this.view.center = point
      console.log(this.longitude, this.latitude)
      this.view.goTo([this.longitude, this.latitude])
      console.log('center', this.view.center)
    }
  }
}
</script>

<style scoped>
  /* @import 'http://192.168.8.205/arcgis_js_api/library/4.12/esri/css/main.css'; */
  @import 'https://js.arcgis.com/4.13/esri/css/main.css';
  .baseMap {
    height:60vh;
    width: 100%;
    margin-top: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
  }
</style>