<template>
  <div>
    <p class="title">打卡地相距教学点{{distance}}米</p>
    <!-- <el-amap-search-box class="search-box"
                        value="searchValue"
                        :search-option="searchOption"
                        :on-search-result="onSearchResult"></el-amap-search-box> -->
    <el-amap :zoom="zoom"
             vid="amapDemo"
             :amap-manager="amapManager"
             :plugin="plugin"
             :center="center"
             class="amap-demo">
      <!--  :events="markerEvents()" -->
      <el-amap-marker v-for="(marker, index) in markers"
                      :key="index"
                      :position="marker.location"
                      :title="marker.title"></el-amap-marker>
    </el-amap>
  </div>
</template> 
<script>
import VueAMap from 'vue-amap'
// 地图
(function () {
  let func = EventTarget.prototype.addEventListener;
  let supportsPassive = false
  try {
    let opts = Object.defineProperty({}, 'passive', {
      get: function () {
        supportsPassive = true;
      }
    })
    document.addEventListener("testPassive", null, opts);
    document.removeEventListener('testPassive', null, opts);
  } catch (e) { }

  EventTarget.prototype.addEventListener = function (type, fn, capture) {
    this.func = func;
    capture = capture instanceof Object ? capture : {};
    capture.passive = supportsPassive;
    this.func(type, fn, capture);
  };
}());
// Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'b1e6ac2eb28902ce91a490edf194e000',
  plugin: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Geocoder'],
  v: '1.4.4'
})
let amapManager = new VueAMap.AMapManager();
import { getTeacherPersonalAttendance } from '@/api/buildTeam'
export default {
  props: ['courseScheduleId'],
  data () {
    return {
      zoom: 20,
      amapManager,
      center: [114.34371, 30.55939],
      // events: {
      //   init (o) {
      //     let marker = new AMap.Marker({
      //       position: [114.34371, 30.55939]
      //     });

      //     marker.setMap(o);
      //   }
      // },
      markers: [],
      plugin: [],
      distance: '-',
      schoolLongitudeLatitude: null,
      signInLongitudeLatitude: null,

    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    // 地点搜索
    // searchOption () { },
    // 重置
    init () {
      getTeacherPersonalAttendance({ courseScheduleId: this.courseScheduleId }).then(res => {
        if (res.code == 200) {
          if (res.data && res.data.signInLongitudeLatitude) {
            let add = {
              title: '签到点',
              location: res.data.signInLongitudeLatitude.split(',')
            }
            this.center = res.data.signInLongitudeLatitude.split(',');
            this.signInLongitudeLatitude = res.data.signInLongitudeLatitude.split(',')
            this.markers.push(add)
          }
          if (res.data && res.data.schoolLongitudeLatitude) {
            let add = {
              title: '教学点',
              location: res.data.schoolLongitudeLatitude.split(',')
            }
            this.schoolLongitudeLatitude = res.data.schoolLongitudeLatitude.split(',')
            this.center = res.data.schoolLongitudeLatitude.split(',');
            this.markers.push(add)
          }
          this.getDistance(this.signInLongitudeLatitude, this.schoolLongitudeLatitude)
        }
      })
      // this.getDistance()
    },
    onSearchResult () { },
    getDistance (sigin, school) {

      if (sigin && sigin.length > 0 && school && school.length > 0) {
        let o = amapManager.getMap();
        let marker1 = new AMap.Marker({
          position: sigin
        });
        let marker2 = new AMap.Marker({
          position: school
        });

        let p1 = marker1.getPosition();
        let p2 = marker2.getPosition();
        var distance = Math.round(p1.distance(p2));
        this.distance = distance;
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
}
.amap-demo {
  height: 300px;
}
</style>