<!--
 * @Description: 巡线图层
 * @Author: 王晓颖
 * @Date: 2021-06-04 09:09:15
 -->
<template>
  <div>
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { getRoutesData } from '@/api/pipe'
import { getToday } from '@/utils/dateutils'
export default {
  name: 'RouteLayer',
  mixins: [commonMixin('layer')],
  props: {
    size: {
      type: String,
      default: ''
    }, // 颜色类型：single单色柱，multi多色柱
    height: {
      type: Number,
      default: 10
    }, // 偏移值
    show: {
      type: Boolean,
      default: false
    } // 是否可见
  },
  data() {
    return {
      layer: null, // 图层
      data: [], // 完整数据
      filteredData: [] // 过滤后的数据
    }
  },
  watch: {
    show(val) {
      console.log('watch show: ' + val)
      if (val) {
        this.initLayer()
      } else {
        this.removeLayer()
      }
    }
  },
  methods: {
    load() {
      console.log('load')
      if(this.show){
        this.initLayer()
      }
    },
    initLayer() {
      const { mars3d, map } = this
      if (map) {
        if (this.show) {
          if (this.layer) {
            this.removeLayer()
          }
        }
        const graphicLayer = new mars3d.layer.DivLayer()
        graphicLayer.on(mars3d.EventType.click, event => {
          console.log('单击了巡检人员', event)
        })
        graphicLayer.bindPopup(event => {
          const route = event.graphic.attr
          const html =
            '<div>姓名：' + route.name +
            '<br/>电话：' + route['phone'] +
            '<br/>岗位：' + route['duty'] +
            '<br/>站名：' + route['unitname'] +
            '<br/>时间：' + route.locationdate + '</div>'
          return html
        })
        this.layer = graphicLayer
        map.addLayer(graphicLayer)
        this.loadData()
      }
    },
    loadData() {
      const { mars3d, Cesium, layer, height } = this
      const date = getToday()
      getRoutesData(date).then((res) => {
        if (res.status === 200) {
          const data = res.data.map(item => {
            return {
              name: item['WD60_03'],
              lng: parseFloat(item['WD60_05']),
              lat: parseFloat(item['WD60_06']),
              locationdate: item['WD60_04'],
              time: new Date(item['WD60_04']),
              duty: item['WD60_11'] === null ? '' : item['WD60_11'],
              sex: item['WD60_09'] === null ? '' : item['WD60_09'],
              phone: item['WD60_10'] === null ? '' : item['WD60_10'],
              idcard: item['WD60_12'] === null ? '' : item['WD60_12'],
              unitname: item['WD60_08'] === null ? '' : item['WD60_08']
            }
          })
          this.filteredData = []
          // 遍历所有数据，去除重复数据
          for (const route of data) {
            // 去filteredData里查找是否有同一个人
            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
            if (result === -1) { // 查找不到直接添加
              this.filteredData.push(route)
            } else { // 查找到，对比时间，时间大则替换
              if (this.filteredData[result].time < route.time) {
                this.filteredData.splice(result, 1, route)
              }
            }
          }
          // 遍历过滤后的数据，添加到地图
          for (const route of this.filteredData) {
            const graphic = new mars3d.graphic.DivGraphic({
              position: [route.lng, route.lat, height],
              style: {
                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                attr: route
              },
              attr: route,
              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
            })
            layer.addGraphic(graphic)
          }
        }
      })
    },
    // 移除图层
    removeLayer() {
      const { map, layer } = this
      if (this.layer) {
        map.removeLayer(layer)
        this.layer = null
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>