<template>
  <div class="mapwrap">
    <el-dialog
      title="轨迹"
      :visible.sync="dialogTrackVisible"
      :show-close="false"
      :close-on-click-modal="false"
      id="mapcnt"
    >
      <el-row>
        <div id="mapContainer">
          <el-amap
            ref="map"
            vid="amapDemo"
            :center="mapCenter"
            :zoom="zoom"
            class="amap-demo"
          >
            <el-amap-marker
              v-for="(item,index) in marker"
              :vid="index"
              :key="index"
              :position="item.position"
            ></el-amap-marker>
          </el-amap>
          <el-amap-bezier-curve v-for="(line,index) in trackArr" :key="index" :events="line.events" :path="line.path" :stroke-color="line.strokeColor" :stroke-style="line.strokeStyle"  :stroke-opacity="line.strokeOpacity"></el-amap-bezier-curve>
        </div>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('dialogCancel')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss">
#mapcnt .el-dialog {
  width: 90% !important;
}

.el-cascader {
  width: 100%;
}

.lt .el-input {
  width: 180px;
  margin-right: 15px;
  display: inline-block;
}

#mapContainer {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}

.el-vue-amap-container {
  width: 100%;
  height: 100%;
}

.search-box {
  position: absolute !important;
  top: 10px;
  left: 10px;
}

#searchbar input {
  padding: 5px;
  border: 1px solid royalblue;
  border-radius: 5px;
  min-width: 150px;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop ,Watch} from "vue-property-decorator";
@Component({
  components: {}
})
export default class MapDialog extends Vue {

  @Prop(Boolean) dialogTrackVisible!: Boolean;

  @Prop(String) soldierId : String = '';

  @Provide() zoom: Number = 12;

  @Provide() searchOption: Object = {
    city: "石家庄",
    citylimit: true
  };
  @Provide() mapCenter: any = [114.2, 38.25];//

  @Provide() marker: any = [];

  @Provide() mapvisible: Boolean = true;

  // @Provide() events: Object = {};

  @Provide() trackArr:any = [
    {
              path: [
                [116.39, 39.91, 116.37, 39.91],
                [116.380298, 39.907771, 116.38, 39.90],
                [116.385298, 39.907771, 116.40, 39.90]
              ],
              strokeDasharray: [10, 10],
              strokeColor: "#FF33FF", //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 3, //线宽
              strokeStyle: "solid", //线样式
              events: {
                click: () => {
                  alert('click');
                }
              }
            }
  ];

  @Provide() lineOptions:any = {
    events:{},
    path:[],
    strokeColor:'#ff0000',
    strokeOpacity:'1',
    strokeStyle:'dashed',
    showDir:true
  }

  @Provide() pathArr:any;

  @Watch('soldierId') change(val:any){
    this.getTrack(val)
  }
  addMarker(lng: any, lat: any) {
    let obj = {
      position: [lng, lat]
    };
    this.marker = [];
    this.marker.push(obj);
  }
  onSearchResult(pois: any) {
    let latSum = 0;
    let lngSum = 0;
    this.marker = [];
    if (pois.length > 0) {
      pois.forEach((poi: any) => {
        let { lng, lat } = poi;
        lngSum += lng;
        latSum += lat;
        this.marker.push({
          position: [poi.lng, poi.lat]
        });
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      };
      this.mapCenter = [center.lng, center.lat];
    }
  }
  getTrack(soldierId:any){//获取轨迹点数据
    let that = this,darr:any = [];
    (that as any).$axios.get(`api/soldierInfo/getSoldierTrackBySoldierId/${soldierId}`).then((res:any) => {
         if( res.length == 0){
           (that as any).$message({
              message: '没有轨迹！',
              type: 'warning'
            });
         }else{
           that.trackArr =  res;
           that.trackArr.forEach((ele:any) => {
             darr.push([ele.longitude,ele.latitude])
           });
           that.pathArr = darr;
          //  that.drawTrack()
         }
    })
  }
  cancel() {}
  created() {
  }
}
</script>