<template>
    <div style="position:relative;">
      <div style="margin-top: 6px ;position:relative; ">
        <Form id="edit-form11" :label-width="50" inline  >
          <label class="label-sign"></label>
<!--          <Form-item label="人员:" prop="username" >-->
<!--            <Select v-model="formObj.username" @on-change="_chargerChange" :label-in-value="true" style="width: 100px" name="username"-->
<!--                    clearable>-->
<!--              <Option v-for="item in userList" :value="item.name" :key="item.name">{{ item.name}}</Option>-->
<!--            </Select>-->
<!--          </Form-item>-->
<!--          <Form-item class="search-item" label="时间:" style="margin-right: 0px">-->
<!--            &lt;!&ndash;          <DatePicker v-model="formObj.date" type="datetimerange" placeholder="请选择时间" style="width: 300px"></DatePicker>&ndash;&gt;-->
<!--            <date-picker ref="validDate" @on-change="_outDateChange" type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="请选择时间"-->
<!--                         style="width:260px;"></date-picker>-->
<!--            <input v-model="formObj.sendDateBegin" name="regdateBegin" type="hidden">-->
<!--            <input v-model="formObj.sendDateEnd" name="regdateEnd" type="hidden">-->
<!--          </Form-item>-->
<!--          <Form-item style="position:absolute;left:440px;" >-->
<!--            <Button @click="_formSearch" type="primary">搜索</Button>-->
<!--          </Form-item>-->
        </Form>
      </div>
      <div id="map" :style="contentStyleObj"></div>
    </div>
</template>
<script>
import { soilStatistics } from '../../../api'

export default {
  name: 'PeopleLocationSearchVue',
  data() {
    return {
      contentStyleObj: {
        height: ''
      },
      regdateBegin: '',
      regdateEnd: '',
      value: '',
      formObj: {
        username: '',
        sendDateBegin: '',
        sendDateEnd: ''
      },
      userList: [],
      locationList: []
    }
  },
  created() {
    this.getHeight()
  },
  mounted() {
    this._getLocationList()
    // this._getUserList()
    // this.getMapInfo()
  },
  methods: {
    getHeight() {
      this.contentStyleObj.height = window.innerHeight - 100 + 'px'
    },
    _getUserList() {
      // 用户列表
      this.$store.dispatch('LmsStaffInfo/list', { status: 1 }).then(() => {
        this.userList = this.$store.state.LmsStaffInfo.list
        console.log('-------------', this.userList)
      })
    },
    _formSearch() {
      this.$store
        .dispatch('LmsStaffInfo/getLocationList', this.formObj)
        .then(() => {
          this.locationList = this.$store.state.LmsStaffInfo.listLocation
          this.getMapInfo(this.locationList)
        })
    },

    _getLocationList: async function(client) {
      const result = await soilStatistics.listCoordinateStatistics({
        client: client
      })
      if (result) {
        console.log(result)
        this.getMapInfo(result)
      }
      // this.$store
      //   .dispatch('LmsStaffInfo/getLocationList', this.formObj)
      //   .then(() => {
      //     this.locationList = this.$store.state.LmsStaffInfo.listLocation
      //
      //     this.getMapInfo(this.locationList)
      //     // this.getMapInfoPoint(this.locationList);
      //   })
    },

    getMapInfo(data) {
      // 百度地图API功能
      // eslint-disable-next-line no-undef
      const map = new BMap.Map('map')
      map.centerAndZoom('山东', 5)
      map.enableScrollWheelZoom()
      // 获取JSON数组
      const opts = {
        width: 250, // 信息窗口宽度
        height: 80, // 信息窗口高度
        title: '位置信息', // 信息窗口标题
        enableMessage: true // 设置允许信息窗发送短息
      }
      console.log('--data-', data)
      // eslint-disable-next-line no-undef
      const myIcon = new BMap.Icon(
        'http://api.map.baidu.com/img/markers.png',
        // eslint-disable-next-line no-undef
        new BMap.Size(22, 24),
        {
          // eslint-disable-next-line no-undef
          offset: new BMap.Size(10, 25),

          // eslint-disable-next-line no-undef
          imageOffset: new BMap.Size(0, 0 - 12 * 25)
        }
      )
      console.log(myIcon)
      for (let i = 0; i < data.length; i++) {
        // const location = data[i]
        // const objs = location.usersList
        // const clientName = location.client
        const pois = []
        // eslint-disable-next-line no-undef
        pois[i] = new BMap.Point(data[i].longitude, data[i].latitude)
        console.log('--pois-', pois)
        // for (let j = 0; j < objs.length; j++) {
        //   const obj = objs[j]
        // eslint-disable-next-line no-undef
        // pois[j] = new BMap.Point(obj.longitude, obj.latitude)
        // eslint-disable-next-line no-undef
        const marker = new BMap.Marker(
          // eslint-disable-next-line no-undef
          new BMap.Point(data[i].longitude, data[i].latitude),
          { icon: myIcon }
        ) // 创建标注
        const content =
          '委托单位：' +
          data[i].client +
          '<br>' +
          '钻孔名称：' +
          data[i].boreholeName +
          '<br>' +
          '钻孔位置：' +
          data[i].boreholeLocation
        map.addOverlay(marker) // 将标注添加到地图中
        addClickHandler(content, marker)
        // }
        // eslint-disable-next-line no-undef
        // const polyline = new BMap.Polyline(pois, {
        //   strokeColor: 'blue',
        //   strokeWeight: 2,
        //   strokeOpacity: 1
        // }) // 创建折线
        // map.addOverlay(polyline) // 增加折线
      }
      // eslint-disable-next-line no-unused-vars
      function addClickHandler(content, marker) {
        marker.addEventListener('click', function(e) {
          openInfo(content, e)
        })
      }
      function openInfo(content, e) {
        const p = e.target
        // eslint-disable-next-line no-undef
        const point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
        // eslint-disable-next-line no-undef
        const infoWindow = new BMap.InfoWindow(content, opts) // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point) // 开启信息窗口
      }
    },

    _chargerChange(obj) {
      console.log(obj)
      this.formObj.username = obj.value
    },
    _outDateChange(data) {
      $('input[name=regdateBegin]').val(data[0])
      $('input[name=regdateEnd]').val(data[1])
      this.formObj.sendDateBegin = data[0]
      this.formObj.sendDateEnd = data[1]
    },
    _page(formId, uri, extendsData) {
      this.loading = true
      this.formId = formId
      if (extendsData) {
        this.extendsData = extendsData
      }
      this.$store.dispatch(uri, this._searchParams()).then(() => {
        console.log('page-------', this._searchParams())
        this.loading = false
        this.$emit('on-result-change', 'page', '')
      })
    }
  }
}
</script>

<style>
#map {
  margin-top: -9px;
}
.BMap_cpyCtrl {
  display: none !important;
}
.anchorBL {
  display: none !important;
}
</style>
