<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 }}-实时位置</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 } from '@/api/gps/gps'
import ShipTree from './modules/ShipTree'
import Split from '@/components/pt/split/Index'
import qq from 'qq'

export default {
  name: 'User',
  components: {
    Split,
    ShipTree
  },
  data() {
    return {
      selShipData: {},
      shipOptions: [],
      gpsLocalUrl: '',
      longitude: 103.760104, // 经度
      latitude: 36.079945, // 纬度
      batchLocation: [],
      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 = '116.380945'// this.batchLocation[0].lon
          this.latitude = '39.953416'// 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 = {
        zoom: 12, // 设置地图缩放级别
        center: myLatlng, // 设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
      }
      // 获取dom元素添加地图信息
      var mapDD = new qq.maps.Map(document.getElementById('mapLocation'), myOptions)

      qq.maps.MarkerCluster({
        map: mapDD,
        geometries: [
          // 点标记数据数组
          {
            position: new qq.maps.LatLng(39.953416, 116.480945),
            properties: {
                assetName: 'dsadsad',
                assetClassification: 'dddd',
                userDepartment: '2222'
            }
          },
          {
            position: new qq.maps.LatLng(39.984104, 116.407503),
            properties: {
                assetName: '2222',
                assetClassification: '3232',
                userDepartment: 'ssas'
            }
          }
        ]
      })
    },
    /** 查询部门下拉树结构 */
    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
      }
    }
  }
}
</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>
