<template>
  <div :class="`line line`" style="display: flex" v-drag="`.line .ant-card-head`">
    <a-card v-show='value' title="巡查轨迹查询" style=" max-height: 90vh; width: 350px;  box-shadow: 0 0 5px #357ee5;">
      <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
      <div>
        <label for="" style="display: block">
          巡查日期：
          <a-date-picker @change="dataOnChange"/>
        </label>
        <label for="" style="margin: 8px 0;display: block">
          巡查用户：
          <a-select v-model="pathUserName" style="width: 61%" placeholder="请选择巡查用户" @change="handleLine">
            <a-select-option v-for="(item,index) in userNames" :key="item.username" :value="item.username">
              {{item.username}}
            </a-select-option>
          </a-select>
        </label>
        <div style="margin: 10px auto;display: flex;justify-content: space-evenly;">
        <a-button type="primary" :loading="loading" @click="handleLine">查询</a-button>
        <a-button :loading="loading" @click="handleAllLine">显示全部</a-button>
        <a-button type="danger"  @click="clear">清除</a-button>

        </div>
        <a-list style='margin-top: 20px;' item-layout="horizontal" :data-source="lineData" >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta @click="handleLineCoord(item)" :description="`起止时间：${item.STARTDATE}至${item.ENDDATE}`">
              <span slot="title">{{ item.username }}</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>
      </div>
    </a-card>
    <a-modal
      title="生成全部轨迹！"
      :visible="visible"
      @ok="handleOk"
      @cancel='visible=false'
      :footer="null"
    >
      <span>{{ ModalText }}</span>
      <a-spin :spinning="spinning"></a-spin>
    </a-modal>
    <locate-by-geoinfo ref="locateByGeoinfo" :do-clean="false"></locate-by-geoinfo>
  </div>

</template>

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

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

  data() {
    return {
      map: '',
      visible: false,
      vectorLayer: '',
      lineData: [],
      onlineShow: false,
      lineShow: false,
      ajShow: false,
      loading: false,
      onPage: false,
      pathUserName: "",
      pathDate: "",
      userNames:[],
      spinning:false,
      ModalText:""
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  watch: {
    value(val) {
      if (val === false) {
        //清空搜索框
        this.lineShow = false;
        this.onlineShow = false;
        this.ajShow = false;
        this.clear();
      } else {
      }
    }
  },
  inject: ['basicMap',],
  created() {

  },
  methods: {
    async dataOnChange(date, dateString) {
      if(dateString==='')return
      this.loading=true;
      this.pathDate = dateString;
      this.userNames = [];
      this.lineData=[];
      this.pathUserName='';
      //发Ajax
      let {success, message, result} = await getAction('onemap.xcgj/selxcgj', {
        PathDate: this.pathDate
      });
      if (success) {
        if (result.total === 0 || result === ''||result.length===0) {
          this.$message.error('当天无人航飞');
          this.loading=true;
          this.userNames = [];
          return;
        }
        this.userNames = result;
        this.loading=false;
      } else {
        this.$message.info(message);
      }
    },
    async handleLine() {
      if(this.pathDate===''){
        this.$message.info('请先选择时间！')
        return;
      }
      if(this.pathUserName!=''){
        this.userNames.forEach((item)=>{
          if(item.username===this.pathUserName){
            this.lineData = [item];
          }
        })
      }else {
        this.lineData = this.userNames;
      }
    },
    async handleAllLine() {
      this.basicMap.mapView.graphics.removeAll();
      this.lineData = this.userNames;
      if(this.pathDate===''){
        this.$message.info('请先选择时间！')
        return;
      }
      if(this.lineData.length<1){
        this.$message.info('当天无人航飞');
        return;
      }
      let extent = this.basicMap.initExtent;
      this.basicMap.mapView.extent = extent;
      let cur_scale = this.basicMap.mapView.scale;
      this.basicMap.mapView.goTo({
          scale: cur_scale * 1.2,
        }, {
          duration: 500,
        },
      );
      this.basicMap.mapView2.extent = this.basicMap.mapView.extent;
      this.ModalText='正在绘制，请稍等';
      this.visible=true;
      this.spinning=true;
      for(let index = 0;index < this.userNames.length;index++){
        await this.handleLineCoord(this.userNames[index], true);
        if(index === this.userNames.length-1){
          this.ModalText=this.pathDate+'全部轨迹绘制完成';
          this.spinning=false;
        }
      }
    },
    async handleLineCoord(line,all) {
      let key='query';
      this.$message.loading({ content: '正在查询中，请稍等...', key , duration: 30 });
      let {success, message, result} = await getAction('onemap.xcgj/selxcgjlist', {
        PathDate: this.pathDate,
        PathUserName: line.username
      });
      if (success) {
        if (result.total === 0 || result === '') {
          this.$message.error('没有查询到信息');
          return;
        }
        let geoinfo={
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: []
          },
          properties: null,
          crs: {
            type: "name",
            properties: {
              name: "EPSG:4490"
            }
          }
        }
        let coordinates = [];
        result.forEach((item) => {
            if(item.x>0&&item.y>0){
              let coord=[parseFloat(item.x),parseFloat(item.y)]
              geoinfo.geometry.coordinates.push(coord);
            }
        })
        this.map=this.basicMap.esriMap;
        this.$refs.locateByGeoinfo.locate({geoinfo:JSON.stringify(geoinfo.geometry),name:'path',isAll:all}, this.map);
        this.$message.loading({ content: '正在定位中!', key, duration: 3 });
      } else {
        this.$message.info(message);
      }
    },
    handleOk(){
      this.visible=false;
    },
    clear() {
      // this.$refs.locateByGeoinfo.clear();
      this.basicMap.path_GraphicsLayer.removeAll();
    }

  },

};
</script>

<style>

.line a > .anticon {
  /* vertical-align: 0.2em; */
}


.line .ant-avatar {
  /* background: url("https://img1.baidu.com/it/u=1159474645,508069395&fm=26&fmt=auto"); */
}

.line .ant-list-item {
  align-items: flex-start;
}

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

.line .ant-spin-nested-loading {
  max-height: 30vh;
  overflow-y: auto;

}

</style>
