<template>
  <div style="overflow: hidden">
    <div style="height: 5%">
      <!--输入框    搜索成功返回事件                搜索框被点击                    搜索框内容被改变    到最后一页         -->
      <apply-map-input-search v-ref:mapinput
                         :thiscitycode="mobiCity.citycode"
                         :thiscity="mobiCity.city"
                         :model.sync="mainList"
                         @retres="syncinput"
                         @searchinputclick="isMaskLevelShow"
                         @closearchlist="closearchlist"
                         @searchchange="showLevelShow"
                         @endcount="endInputCount" ></apply-map-input-search>
    </div>
    <!--遮罩框  是否显示遮罩层       列表数据             滑动到底部加载     某一条数据被点击              背景色             -->
    <amap-search-list v-ref:maplist
                      v-show="isMaskShow"
                      :model.sync="mainList"
                      @httpload="httpLoad"
                      @selected="listSelected"
                      :background_color="amaplist_bgcolor">
      <template partial='head'></template>
      <template partial='body'>
        <tr>
          <th>
            <h5>{{row.name}} <small>{{row.type}}</small></h5>
            <small>{{row.pname}}{{row.cityname}}{{row.adname}}{{row.address}}</small>
          </th>
        </tr>
      </template>
    </amap-search-list>
    <div style="height: 50%" v-show="!isMaskShow">
      <!--地图-->
      <div>
        <apply-map-location
          @locationsuccess="locationsuccess"
          v-ref:amapmain mapmodel="dragMap" :usenative="true"
          :isshowsearch="false" :mylocationinfo="false"
          :islocation="islocation" :locationzoomcenter="locationzoomcenter"
          :islocationclearmark="false" :isshowmapmodel="false"
          :zoomcenter="zoomcenter" mapmodel="dragMap"
          @getmylocation="getmylocation"
          @dragsuccess="dragsuccess"
          @initamapsuc="initamapsuc"
          :labelmarksarray="labelmarksarray">
        </apply-map-location>
      </div>
    </div>
    <div style="height: 45%" v-show="!isMaskShow">
      <!--拖拽到地方后附近的poi搜索结果-->
      <apply-drag-list
        :rimlocation="rimlocation"
        :location-address="locationAddress"
        @roundlistpoiclick="roundlistpoiclick"
      ></apply-drag-list>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * 请勿修改源码，此代码是模板代码，如需其他实现方法，复制到项目中修改
   */
  title: '高德选址主组件',
  props: ['markmapdata'],
  data () {
    return {
      islocation: true,
      locationzoomcenter: true,
      // 是否显示 搜索列表遮罩层
      isMaskShow: false,
      // 遮罩层背景色
      amaplist_bgcolor: 'rgb(250 250 250)',
      // 搜索列表主数据
      mainList: {
        rows: []
      },
      // 选中的城市信息
      mobiCity: {
        citycode: 610800,
        city: '榆林市'
      },
      // 带label的简单点集
      labelmarksarray: [],
      // 地图当前显示的居中位置
      zoomcenter: {
        grade: 12,
        lng: 109.741193,
        lat: 38.290162
      },
      // 下方搜索附近的位置 [经度，纬度]
      rimlocation: [],
      // 拖拽选址当前地址
      locationAddress: {}
    }
  },
  methods: {
    initamapsuc () {
      if (this.markmapdata) {
        this.toMapMarker(this.markmapdata)
      }
    },
    // 定位回调
    locationsuccess (myLocation) {
      this.mobiCity.citycode = myLocation.city.citycode
      this.mobiCity.city = myLocation.city.city
    },
    // 下方搜索附近poi组件列表的点击事件
    roundlistpoiclick (roeOne) {
      console.log('下方搜索附近Poi' + JSON.stringify(roeOne))
      this.$emit('locationclick', roeOne)  // 外部去处理 关闭此选址组件
      this.toMapMarker(roeOne)
    },
    // 上方搜索列表中某项被点击
    listSelected (roeOne) {
      console.log('上方搜索附近Poi' + JSON.stringify(roeOne))
      this.$emit('locationclick', roeOne)  // 外部去处理 关闭此选址组件
      this.isMaskShow = false // 关闭搜索遮罩层
      this.toMapMarker(roeOne)
    },
    // 切换显示搜索列表（遮罩层）
    isMaskLevelShow (res) {
      if (res === '') {
        return this.$showMessage('请选择城市')
      }
      this.isMaskShow = true
    },
    // 输入框内点击关闭遮罩层
    closearchlist () {
      this.isMaskShow = false
    },
    // 当搜索框内值变化 (值变化必为新的搜索，就清空之前的数据打开或关闭遮罩)
    showLevelShow (inputText) {
      this.mainList.rows = []
      if (inputText.trim()) {
        // 当搜索框是关闭状态，就打开搜索框
        if (this.isMaskShow === false) {
          this.isMaskShow = true
        }
      } else {
        this.isMaskShow = false
      }
    },
    // 搜索框返回值组装到搜索列表
    syncinput (res) {
      let status = res.status
      let result = res.result
      console.log('父组件触发-搜索事件')
      if (status === 'complete') {
        if (result.poiList.count === 0) {
          console.log('poi搜索为空')
          // return this.mainList.rows=[]
        }
        this.$refs.maplist.listsuccess()        // 搜索成功调用列表的成功（隐藏加载动画）
        for (let i = 0, leat = result.poiList.pois.length; i < leat; i++) {
          this.mainList.rows.push(result.poiList.pois[i])
        }
      } else if (status === 'error') {
        console.log('检索POI失败====')
        this.$refs.maplist.listcatch() // 搜索失败调用列表失败
      } else if (status === 'no_data') {
        console.log('检索返回0结果')
        this.mainList.rows = []
      }
    },
    // 列表到底部搜索方法
    httpLoad () {
      this.$refs.mapinput.whetherToPageSearch()
    },
    // 到最后一页
    endInputCount () {
      this.$refs.maplist.listend()
      console.log('到最后一页了')
    },
    // 选中的当前位置改变
    getmylocation (res) {

    },
    // 拖拽选址到哪
    dragsuccess (res) {
      this.rimlocation = [res.position.lng, res.position.lat]
      this.locationAddress = res
      console.log('当前地址', this.locationAddress)
    },
    // 在地图上渲染点 并将视图缩放到该点处
    toMapMarker (data) {
      this.labelmarksarray = [{
        data: {data: '', label: '<span>' + data.name + '</span>', content: data.address},
        position: data.location,
        ismoseOpen: true, // 是否通过鼠标滑过打开信息框 true ,false
        isclearmarker: true, // 是否重新渲染新点时就清除页面所有点 true false  也可以手动去调用 this.map.clearMap(); 该方法属于map地图对象
        ismobiletouchendclear: false, // 手机端长按点后是否松开后关闭弹出的信息框 （_ismoseOpen为true并且_ismobiletouchendclear为true移动端才会在松开后关闭信息框，当你不想在松开后关闭信息框时请将_ismobiletouchendclear设置为false）
        islabel: true // 是否渲染label 标注(标注与信息框不同，信息框全局只有唯一一个)
      }]
      this.zoomcenter = {grade: 15, lng: data.location.lng, lat: data.location.lat}
    }
  },
  ready () {
  },
  created () {
  },
  watch: {
  },
  computed: {
  }
}
</script>

<style scoped>

</style>
