<template>
  <div :class="`online online`" style="display: flex" v-drag="`.online .ant-card-head`">
    <a-card v-show='value' title="在线监控查询" style=" max-height: 90vh; width: 300px;  box-shadow: 0 0 5px #357ee5;">
      <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
      <a-spin style="display: block;margin: 0 auto" :spinning="spinning">
      </a-spin>
      <div>
        <a-spin :spinning="coordSpinning" tip="正在定位中...">
        <a-list style='margin-top: 20px;' item-layout="horizontal" :data-source="onlineData" >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta @click="handleLineCoord(item)" :description="`最新时间：${item.scrq}`">
              <span slot="title">{{ item.realname }}</span>
              <a-avatar slot="avatar" class="result" :src="require(`@/assets/result${index+1}.png`)">
              </a-avatar>
            </a-list-item-meta>
            <!--                      <a slot="actions">详情</a>-->
          </a-list-item>
        </a-list>
        </a-spin>
      </div>
    </a-card>
    <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
  </div>

</template>

<script>
import {getAction, httpAction} from "../../../api/manage";
import LocateByGeoinfo from "./LocateByGeoinfo";
import Graphic from '@arcgis/core/Graphic'


export default {
  name: 'ViewOnline',
  components: {LocateByGeoinfo},

  data() {
    return {
      map: '',
      visible: false,
      vectorLayer: '',
      onlineData: [],
      spinning: false,
      onPage: false,
      pathUserName: "",
      pathDate: "2021-04-01",
      coords:[],
      realName:'',
      interval:'',
      coordSpinning:false,
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  watch: {
    value(val) {
      if (val === false) {
        //清空搜索框
        this.clear()
        if(this.interval){
          clearInterval(this.interval);
        }
      } else {
        this.handleOnline()
      }
    }
  },
  inject: ['basicMap'],
  methods: {
    async handleOnline() {
      this.onlineData = [];
      this.spinning = true;
      //请求
      let {success, message, result} = await getAction('/onemap.zxjk/getjkrylist');
      if (success) {
        this.spinning = false;
        if (result.total === 0 || result === '') {
          this.$message.error('没有查询到信息');
          this.onlineData = [];
          return;
        }
        this.onlineData = result;
      } else {
        this.$message.info(message);
      }
    },

    async handleLineCoord(line) {
      this.map = this.basicMap.esriMap;
      this.coordSpinning=true;
      // 移除之前的
      let view = this.basicMap.mapView;
      view.graphics.removeAll()
      clearInterval(this.interval);
      this.realName=line.realname;
      this.loadCoord();
      this.interval = setInterval(()=>{
      this.loadCoord()
      }, 5000)
    },
    async loadCoord(){
      let {success, message, result} = await getAction('onemap.zxjk/selzxjklist', {
        username: this.realName
      });
      if (success) {
        this.coordSpinning=false;
        if (result.total === 0 || result.length === 0) {
          this.$message.error('没有查询到信息');
          return;
        }
        this.coords.push([parseFloat(result[0].x),parseFloat(result[0].y)]);
        this.locateByCoords();
      } else {
        this.$message.info(message);
      }
    },
    locateByCoords() {
      this.locateFit();
      let view = this.basicMap.mapView;
      // First create a point geometry (this is the location of the Titanic)
      const point = {
        type: "point", // autocasts as new Point()
        longitude: -49.97,
        latitude: 41.73
      };

      // Create a symbol for drawing the point
      const markerSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [226, 119, 40],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      };

      // Create a graphic and add the geometry and symbol to it
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });
     /* // Create a polygon geometry
      const polygon = {
        type: "polygon", // autocasts as new Polygon()
        rings: this.coords
      };

      // Create a symbol for rendering the graphic
      const fillSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [227, 139, 79, 0.8],
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      };

      // Add the geometry and symbol to a new graphic
      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });*/

      // Add the graphics to the view's graphics layer
      view.graphics.add(pointGraphic);
    },
    locateFit(){
      let lng = [];
      let lat = [];
      this.features = [];
      this.coords.forEach((item, index) => {
        lng.push(item[0]);
        lat.push(item[1]);
      });
      lng.sort();
      lat.sort();
      let extent = [lng[0], lat[0], lng[lat.length-1],lat[lat.length-1] ];
      let cur_zoom = this.basicMap.mapView.zoom - 1;
      this.basicMap.mapView.goTo({
        zoom: cur_zoom
      }, {
        duration: 600
      });
      setTimeout(()=>{
        this.basicMap.mapView.goTo({
          extent: extent,
          zoom: 17
        }, {
          duration: 1400
        });
      },500);
    },
    clear() {
      if (this.clusters) {
        this.clusterSource.getSource().clear();        //移除聚合标注数据源中的所有要素
        this.map.removeLayer(this.clusters);
        this.clusters='';
        this.clusterSource=''
      }
    }

  },

};
</script>

<style>

.online a > .anticon {
  /* vertical-align: 0.2em; */
}
.online .ant-list-item {
  align-items: flex-start;
}

.online .ant-list-item-action {
  margin-left: 10px;
}


.online .ant-spin-nested-loading {
  max-height: 43vh;
  overflow-y: auto;

}

</style>
