<template>
  <div ref="content">
    <a-card :bordered="false">
      <a-page-header style="border-bottom: 1px solid rgb(235, 237, 240); padding: 8px 16px" title="" />
      <split splitHeight="100%" leftWidth="220">
        <template slot="paneL">
          <ship-tree
            ref="shipTree"
            :shipOptions="shipOptions"
            @select="clickNode"
          />
        </template>
        <template slot="paneR">
          <div class="table-page-search-wrapper">
            <h2>{{ selShipData.shipNanme?selShipData.shipNanme:'全部船只' }}-实时位置</h2>
          </div>
          <a-divider />

          <div id="mapLocation" class="map-default"></div>
        </template>
      </split>
    </a-card>
  </div>
</template>

<script>
import { listAllSysShip } from '@/api/system/sysShip'
import { locationBatch, location } from '@/api/gps/gps'
import ShipTree from './modules/ShipTree'
import Split from '@/components/pt/split/Index'
import qq from 'qq'

export default {
  name: 'TencentMapLocation',
  components: {
    Split,
    ShipTree
  },
  data() {
    return {
      selShipData: {},
      shipOptions: [],
      gpsLocalUrl: '',
      longitude: 103.760104, // 经度
      latitude: 36.079945, // 纬度
      batchLocation: [],
      marker: '',
      map: ''
    }
  },
  filters: {},
  created() {
    this.getTreeselect()
  },
  mounted() {
    this.$nextTick(() => {
      this.batchListInit()
    })
  },
  computed: {},
  watch: {},
  methods: {
    batchListInit() {
      locationBatch().then(res => {
        this.batchLocation = res.data
        if (this.batchLocation.length > 0) {
          this.longitude = this.batchLocation[0].lon
          this.latitude = this.batchLocation[0].lat
        }
        this.init()
      })
    },
    init() {
      // const that = this
      // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      // 设置地图中心点
      var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude)
      // 定义工厂模式函数
      var myOptions = {
        rotation: 20, // 设置地图旋转角度
        pitch: 30, // 设置俯仰角度（0~45）
        zoom: 13, // 设置地图缩放级别
        center: myLatlng // 设置中心点样式
      }
      // 获取dom元素添加地图信息
      this.map = new qq.maps.Map('mapLocation', myOptions)

      console.log(qq.maps)

      var anchor = new qq.maps.Point(6, 6)
      var size = new qq.maps.Size(24, 24)
      var origin = new qq.maps.Point(0, 0)
      var icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif', size, origin, anchor)

      if (this.batchLocation.length > 0) {
        var marks = []
        var infos = []
        this.batchLocation.forEach(element => {
          marks.push(new qq.maps.Marker({
            id: element.objectid,
            icon: icon,
            map: this.map,
            position: new qq.maps.LatLng(element.lat, element.lon)
          }))
          infos.push(new qq.maps.InfoWindow({
              id: element.objectid,
              map: this.map,
              content: `<div class="location_info"><h3>${element.platenumber}</h3><p>航向:${element.dir}</p><p>速度:${element.speed}</p><p>纬度:${element.lat}</p><p>经度:${element.lon}</p></div>`,
              position: new qq.maps.LatLng(element.lat, element.lon)
          }))
        })

        this.marker = new qq.maps.MarkerCluster({
          map: this.map,
          markers: marks
        })

        marks.forEach(mark => {
          qq.maps.event.addListener(mark, 'click', function() {
            var info = infos.findIndex(item => { return item.id === mark.id })
            infos[info].open()
          })
        })

        infos.forEach(info => {
          info.open()
        })
      }
    },
    getLocal() {
      location({ shipId: this.selShipData.id }).then(res => {
        this.batchLocation = []
        this.batchLocation.push(res.data)
        this.longitude = this.batchLocation[0].lon
        this.latitude = this.batchLocation[0].lat
        this.init()
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      listAllSysShip().then((response) => {
        this.shipOptions = response.data
      })
    },
    clickNode(node) {
      var selectItem = node.$options.propsData.dataRef
      if (this.selShipData.id !== selectItem.id) {
        this.selShipData = node.$options.propsData.dataRef
        this.getLocal()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-divider-horizontal {
  margin: 0;
  background: rgb(235, 237, 240);
}
.demo-split {
  height: 200px;
}
.demo-split-pane {
  padding: 10px;
}
.ant-avatar {
  font-size: 12px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px;
}
</style>
<style>
.location_info{
  width: 130px;
}
.location_info p{
  margin: 0;
  padding: 0;
}
</style>
