<template>
  <div class="homeContainer">
    <div class="amap-wrapper">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :events="events" pitch-enable="false">
        <el-amap-marker v-for="(text,index) in texts" :position="text.position" :key="index" :events="text.events"></el-amap-marker>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
          :close-when-click-map="true"
          :is-custom="true"
        >
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
// 引入高德使用高德
import aMap from "vue-amap";
import { queryTrailByTeam } from '@/apps/mobile/api/monitoring-center/index';
// 初始化高德
aMap.initAMapApiLoader({
  key: "937eb4405db2a8895695506871c3a1d5",
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor"
  ],
  v: "1.4.4",
  uiVersion: "1.0.11"
});
export default {
  data() {
  const self = this
    return {
      markers: [],
      zoom: 3,
      center: [114.459891,30.463359],
      expandZoomRange: true,
      texts: [],
      windows: [],
      window: '',
      events: {
        click(e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
        }
      },
      lng: 0,
      lat: 0,
      searchForm: {}
    }
  },
  mounted() {
      this.query();
  },
  methods: {
    query(){
          let companyData = JSON.parse(sessionStorage.getItem('companyID'));
          let obj = {
              mtCompanyId: companyData.id
          }
          queryTrailByTeam(obj)
              .then(res => {
                this.markers = [];
                this.markers = res.data.texts;

                let texts = []
                let windows = []
                let that = this
            this.markers.forEach((item, index) => {
                texts.push({
                  position: item.position,
                  // icon:item.url, //不设置默认蓝色水滴
                  events: {
                    mouseover() {
                      // 方法：鼠标移动到点标记上，显示相应窗体
                      that.windows.forEach(window => {
                          window.visible = false // 关闭窗体
                      })
                      that.window = that.windows[index]
                      that.$nextTick(() => {
                          that.window.visible = true
                      })
                    }
                  }
                })

                windows.push({
                  position: item.position,
                  isCustom: true,   //是否自定义信息窗体
                  offset: [125, 45],  // 窗体偏移
                  showShadow: false,
                  visible: false, // 初始是否显示
                  content: `<div style="color:white;width:211px;background-color:rgba(7,25,54,0.6);padding: 0 0 10px 0">
                              <h3 style="background-color:#071936;padding:5px;">人员信息</h3>
                              <img src="${item.text.avatarUrl}" width="100%" height="100%">
                              <strong>姓名：</strong>${item.text.name}
                            </div>`
                })
            })
                //  加点
                this.texts = texts
                // 加弹窗
                this.windows = windows
              })
              .catch(() => {
              });
    },
  }
};
</script>
<style lang="stylus">
.homeContainer {
    display: inline-block;
    height:700px;
    width: 100%;
    margin-top: 15px;
    padding: 0 15px;

  .amap-wrapper {
    width: 100%;
    height: 700px;
    font-size: 18px;
    vertical-align: 10px;
  }

  .amap-demo {
    height: 800px;
  }
}
</style>
