<template>
  <div>
    <div id="map" ref="map" class="mapSimple"/>
    <slot/>
  </div>
</template>

<script>
import bindEvents from './../base/bindEvents'
import { createIcon } from '../base/factory.js'

export default {
  name: 'CmapSimple',
  props: {
    center: { // 地图中心
      type: Object,
      default: function() {
        return { lat: 39.9, lng: 116.4 }
      }
    },
    zoom: { // 缩放层级
      type: Number,
      default: 12
    },
    minZoom: { // 最小缩放层级
      type: Number,
      default: 9
    },
    maxZoom: { // 最大缩放层级
      type: Number,
      default: 21
    },
    autoResize: { // 自动重绘
      type: Boolean,
      default: true
    },
    alarmMarkers: { // 报警Marker，原数据
      type: Array,
      default: function() {
        return []
      }
    },
    size: { // marker大小
      type: Array,
      default: function() {
        return [30, 30]
      }
    },
    anchor: { // 位移
      type: Array,
      default: function() {
        return [15, 30]
      }
    },
    popupTemplate: { // 弹窗html内容
      type: String,
      default: '<div>hello</div>'
    },
    popupAnchor: { // 弹窗位移
      type: Array,
      default: function() {
        return [0, -15]
      }
    }
  },
  data() {
    return {
      mapLayers: null, // 地图图层s
      overlays: [] // 地图上的标注，报警的
    }
  },
  watch: {
    center(val, oldVal) {
      const { mapLayers } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
      }
    },
    'center.lng'(val, oldVal) {
      const { mapLayers, center } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(center.lat, val))
      }
    },
    'center.lat'(val, oldVal) {
      const { mapLayers, center } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(val, center.lng))
      }
    },
    zoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setZoom(val)
    },
    minZoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setMinZoom(val)
    },
    maxZoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setMaxZoom(val)
    },
    alarmMarkers(val) {
      console.log('alarmMarkers')
      this.renderMarkers()
    }
  },
  mounted() {
    console.log('map mounted')
    this.reset()
  },
  activated() {
    console.log('map activated')
    this.init()
  },
  methods: {
    // 初始化地图
    init() {
      if (this.mapLayers) {
        return
      }
      const $el = this.$refs.map
      /*      默认影像和矢量地图，此处无用
      const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
      const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
      const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
      const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
      const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
      const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')*/

      /**
       * 天地图影像和资源
       */
      // 天地图卫星影像资源，此处无用
      // const tianditusateLayer = new CTileLayer({
      //   zbound: [2, 18],
      //   tileName: 'sate',
      //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      //   url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      // })
      // 天地图卫星影像资源备注资源，此处无用
      // const tianditusateLabelLayer = new CTileLayer({
      //   zbound: [2, 18],
      //   tileName: 'satelabel',
      //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      //   url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      // })
      // 天地图矢量地图
      const tianditumapLayer = new CTileLayer({
        zbound: [2, 18],
        tileName: 'map',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      })
      // 天地图矢量地图标注
      const tianditumapLabelLayer = new CTileLayer({
        zbound: [2, 18],
        tileName: 'maplabel',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      })

      var mapLayer = new CTileLayer({
        zbound: [1, 18],
        tileName: 'map',
        zIndex: null,
        subdomains: CGeowin.BaseMapServer
      })

      var mapLabelLayer = new CTileLayer({
        zbound: [1, 18],
        tileName: 'maplabel',
        zIndex: null,
        subdomains: CGeowin.BaseMapServer
      })

      // const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
      // const SATEMAP = new CMapType([tianditusateLayer, tianditusateLabelLayer], '影像')
      const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')

      const { getCenterPoint, zoom } = this
      // 初始化配置
      const opts = {
        mapTypes: [VECTORMAP],
        center: getCenterPoint(),
        zoom: zoom
      }
      // 加载图层
      this.mapLayers = new CMapLayers($el, opts)
      this.mapLayers.addMapTypeControl()

      bindEvents.call(this, this.mapLayers)

      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
      // this.mapLayers.reset()
      this.reset()
      this.mapLayers.setCenter(getCenterPoint(), zoom)
      this.$emit('ready', { mapLayers: this.mapLayers })
      // this.renderMarkers()
    },
    // 加载报警markers
    renderMarkers() {
      console.log('render.markers')
      const { mapLayers, size, anchor, popupAnchor, alarmMarkers } = this
      if (!mapLayers) {
        return
      }
      // 清除报警标注图层
      for (const overlay of this.overlays) {
        mapLayers.removeOverlay(overlay) // 清除地图上所有的overlay
      }
      this.overlays = []
      // 遍历所有报警井信息
      for (const marker of alarmMarkers) {
        const options = {
          // url: markers.icon,
          url: './static/images/map_images/alarm-well1.png',
          size: size,
          anchor: anchor,
          popupAnchor: popupAnchor
        }
        const cmapIcon = createIcon(options)
        const opts = {
          icon: cmapIcon,
          title: marker.wellCode,
          draggable: false,
          wellId: marker.wellId
        }
        const overlay = new CMarker(new CLatLng(marker.position.lat, marker.position.lng), opts)
        mapLayers.addOverlay(overlay)
        this.overlays.push(overlay)
      }
    },
    // 清除报警图层
    clearAlarmMarkers() {
      const { mapLayers } = this
      // 清除报警标注图层
      for (const overlay of this.overlays) {
        mapLayers.clearOverlay(overlay) // 清除地图上所有的overlay
      }
      this.overlays = []
    },
    // 获取中点
    getCenterPoint() {
      const { center } = this
      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
      return new CLatLng(center.lat, center.lng)
    },
    initMap(CMapLayers) {
      this.CMapLayers = CMapLayers
      this.init(CMapLayers)
    },
    getMapScript() {
      // 动态获取cmap的脚本
      // const TMapURL = 'http://satellite.casm.ac.cn:8020/geowinmap/api?version=tapi&map=map&utils=mapcase'
      const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
      return new Promise((resolve, reject) => {
        console.log(window.CMapLayers)
        // 如果已加载直接返回
        if (typeof window.CMapLayers !== 'undefined') {
          console.log('地图脚本初始化成功1111...')
          resolve(window.CMapLayers)
          // return true
        } else {
          // 插入script脚本
          const scriptNode = document.createElement('script')
          scriptNode.setAttribute('type', 'text/javascript')
          scriptNode.setAttribute('src', TMapURL)

          if (scriptNode.readyState) { // IE
            scriptNode.onreadystatechange = function() {
              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
                scriptNode.onreadystatechange = null
                console.log('地图脚本初始化成功2...')
                // eslint-disable-next-line
                resolve(window.CMapLayers)
              }
            }
          } else { // 其他浏览器
            scriptNode.onload = function() {
              console.log('地图脚本初始化成功3...')
              resolve(window.CMapLayers)
            }
          }
          document.body.appendChild(scriptNode)
          console.log(scriptNode)
        }
      })
    },
    reset() {
      console.log('map reset')
      const { initMap, getMapScript } = this
      getMapScript()
        .then(initMap)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .mapSimple{
    width:100%;
    height: 250px;
  }
</style>