<template>
  <div class="trackser">
    <el-dialog title="轨迹" :visible.sync="dialogTrackVisible" :show-close="false" id="mapcnt">
      <div id="mapContainer">
        <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" :events="events">
          <el-amap-polyline
            :editable="polyline.editable"
            :path="polyline.path"
            :events="polyline.events"
            :strokeColor="polyline.strokeColor"
            :strokeWeight="polyline.strokeWeight"
            :strokeOpacity="polyline.strokeOpacity"
            :strokeStyle="polyline.strokeStyle"
            :showDir="polyline.showDir"
          ></el-amap-polyline>
          <div v-if="marker.length > 0">
            <el-amap-marker
              v-for="(item,index) in marker"
              :vid="index"
              :key="index"
              :position="item.position"
              :icon="item.icon"
            ></el-amap-marker>
          </div>
        </el-amap>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss">
#mapcnt .el-dialog {
  width: 90% !important;
}

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

.el-vue-amap-container {
  width: 100%;
  height: 100%;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
let start = require("@/assets/start.png"),
  mid = require("@/assets/mid.png"),
  end = require("@/assets/end.png");
@Component({
  components: {}
})
export default class TrackSer extends Vue {
  @Prop(Boolean) dialogTrackVisible!: Boolean;
  @Prop(String) soldierId!: String;
  @Provide() zoom: Number = 12;
  @Provide() center: any = [114.2, 38.25];
  @Provide() map: any;
  @Provide() trackArr: any = [];
  @Provide() polyline: any = {
    path: [],
    showDir: true,
    strokeColor: "#ea2828", //线颜色
    strokeOpacity: 1, //线透明度
    strokeWeight: 3, //线宽
    strokeStyle: "solid", //线样式
    lineJoin: "round",
    editable: false
  };
  @Provide() marker: any = [];
  @Provide() events: any = {
    
  };

  // @Watch("soldierId") change(val: any) {
  //   this.getTrack(val);
  // }
  cancel(){
    this.$emit('dialogCancel')
  }
  addMarker(lng: any, lat: any, num: any, total: any) {
    let icon;
    switch (num) {
      case 0:
        icon = start;
        break;
      case total - 1:
        icon = end;
        break;
      default:
        icon = mid;
    }
    let obj = {
      position: [lng, lat],
      icon: icon
    };
    this.marker.push(obj);
  }
  getTrack(soldierId: any) {
    //获取轨迹点数据
    let that = this,
      darr: any = [];
    (that as any).$axios
      .get(`/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, index: any) => {
            darr.push([
              ele.longitude,
              ele.latitude,
              ele.longitude,
              ele.latitude
            ]);
            that.addMarker(
              ele.longitude,
              ele.latitude,
              index,
              that.trackArr.length
            );
          });
          that.polyline.path = darr;
          that.center = darr[0];
        }
      });
  }
  created() {
    if(this.soldierId)
    this.getTrack(this.soldierId);
  }
  mounted() {}
}
</script>