<template>
  <div class="listsMap" @scroll="scrollBottom">
    <div v-for="poi in poiList" class="auto item" @click="poiClick(poi)">
      <div class="svg">
        <svg v-if="$index === 0" style="width: 20px;height: 20px;" t="1629107663398" class="icon"
             viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3053"
             id="mx_n_1629107663399" data-spm-anchor-id="a313x.7781069.0.i7" width="200" height="200">
          <path
            d="M808.6 403.2c0-178.8-129.8-308.5-308.5-308.5-170.1 0-308.5 138.4-308.5 308.5 0 125.6 170.6 338.3 262.3 452.6l6.8 8.4c9.6 12 24 18.9 39.5 18.9 15.4 0 29.8-6.9 39.5-18.9l6.8-8.4c91.5-114.3 262.1-327 262.1-452.6z m-310.1 89.4c-62.9 0-114-51.1-114-114s51.1-114 114-114 114 51.1 114 114-51.1 114-114 114z"
            fill="#FFFFFF" p-id="3054"></path>
          <path
            d="M500.1 67.8c-184.9 0-335.4 150.4-335.4 335.4 0 135 174.5 352.5 268.2 469.4l6.7 8.4c14.8 18.4 36.8 29 60.4 29s45.6-10.6 60.4-29l6.8-8.4C661 755.7 835.4 538.2 835.4 403.2c0-194.3-141-335.4-335.3-335.4z m0 815.3c-15.4 0-29.8-6.9-39.5-18.9l-6.8-8.4c-91.7-114.3-262.3-327-262.3-452.6 0-170.1 138.4-308.5 308.5-308.5 178.8 0 308.5 129.8 308.5 308.5 0 125.6-170.6 338.3-262.3 452.6l-6.8 8.4c-9.5 12-23.9 18.9-39.3 18.9z"
            fill="#df2424" p-id="3055" data-spm-anchor-id="a313x.7781069.0.i5" class="selected"></path>
          <path d="M498.5 378.6m-87.2 0a87.2 87.2 0 1 0 174.4 0 87.2 87.2 0 1 0-174.4 0Z" fill="#FFFFFF"
                p-id="3056"></path>
          <path
            d="M612.5 378.6c0-62.9-51.1-114-114-114s-114 51.1-114 114 51.1 114 114 114 114-51.1 114-114z m-201.2 0c0-48.1 39.1-87.2 87.2-87.2s87.2 39.1 87.2 87.2-39.1 87.2-87.2 87.2-87.2-39.1-87.2-87.2z"
            fill="#df2424" p-id="3057" data-spm-anchor-id="a313x.7781069.0.i6" class="selected"></path>
        </svg>
        <svg v-else style="width: 20px;height: 12px;" t="1629107800066" class="icon" viewBox="0 0 1024 1024"
             version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5529" width="200" height="200">
          <path
            d="M491.880777 970.394105c-237.529835 0-430.759721-193.240119-430.759721-430.759721 0-237.529835 193.229886-430.769954 430.759721-430.769954s430.759721 193.240119 430.759721 430.769954C922.640498 777.153986 729.410612 970.394105 491.880777 970.394105zM491.880777 169.213913c-204.250894 0-370.410238 166.168554-370.410238 370.419448 0 204.240661 166.159344 370.410238 370.410238 370.410238S862.289991 743.875045 862.289991 539.634384C862.289991 335.38349 696.131671 169.213913 491.880777 169.213913z"
            p-id="5530" fill="#000000"></path>
          <path
            d="M491.880777 724.720799c-102.056374 0-185.096648-83.030042-185.096648-185.087439s83.040275-185.087439 185.096648-185.087439 185.077206 83.030042 185.077206 185.087439S593.937151 724.720799 491.880777 724.720799zM491.880777 414.897452c-68.777433 0-124.747165 55.959499-124.747165 124.736932s55.968709 124.736932 124.747165 124.736932S616.607476 608.411817 616.607476 539.634384 560.65821 414.897452 491.880777 414.897452z"
            p-id="5531" fill="#000000"></path>
        </svg>
      </div>
      <div>
        <div class="name" :class="$index === 0 ? 'one': ''">
          {{ poi.name }}
        </div>
        <div class="address">
          {{ poi.address }}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  title: '附近POI搜索',
  props: {
    // 是否返回详细地址信息
    extensions: {
      type: Boolean,
      default: true
    },
    locationAddress: {
      type: Object,
      default: null
    },
    //  搜索的位置  经纬度 格式 [经度,纬度]
    rimlocation: {
      type: Array,
      default: () => []
    },
    // 范围 0-50000
    radius: {
      type: Number,
      default: 500
    },
    // 关键字
    keyword: {
      type: String,
      default: ''
    },
    // 城市范围 支持cityname（中文或中文全拼）、citycode、adcode
    thiscity: {
      type: String,
      default: ''
    },
    // 是否强制限制在设置的城市内搜索
    citylimit: {
      type: Boolean,
      default: false
    },
    // 每页显示的个数
    pagesize: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      count: 0,
      poiList: [],
      pagenumber: 1,
      isbool: true,
      isfullSearch: '', // 返回基本信息还是详细信息 base 或者 all 与extensions关联
      placeSearch: null
    }
  },
  methods: {
    // 某行数据被点击
    poiClick (poi) {
      this.$emit('roundlistpoiclick', poi)
    },
    // 初始化范围搜索组件
    initSearchMain () {
      let e = this.locationAddress.positionResult
      this.roundlistpoisuccess(e)
      this.$emit('roundlistpoisuccess', e) // 搜索成功事件
      // this.isfullSearch = this.extensions===false?'base':'all' //是否查询详情
      // AMap.plugin(["AMap.PlaceSearch"],()=> {
      //   //构造地点查询类
      //   this.placeSearch = new AMap.PlaceSearch({
      //     pageSize: this.pagesize, // 单页显示结果条数
      //     pageIndex: this.pagenumber, // 页码
      //     // panel: this.listId, // 结果列表将在此容器中进行展示。
      //     extensions:this.isfullSearch
      //   });
      //   //搜索成功
      //   AMap.event.addListener(this.placeSearch, 'complete', (e)=>{
      //     this.roundlistpoisuccess(e)
      //     this.$emit('roundlistpoisuccess',e); // 搜索成功事件
      //   })
      //   //搜索失败
      //   AMap.event.addListener(this.placeSearch, 'error', (e)=>{
      //     this.$emit('roundlistpoierror',e); // 搜索失败事件
      //   })
      // });
    },
    // 范围搜索
    searchLocationFj () {
      // if (this.thiscity){
      //   this.placeSearch.setCity(this.thiscity); //设置城市
      // }
      // if (this.citylimit) {
      //   this.placeSearch.setCityLimit(this.citylimit); //设置强制在设定城市查找
      // }
      // this.placeSearch.setPageIndex(this.pagenumber); //页码
      // this.placeSearch.searchNearBy(this.keyword, this.rimlocation, this.radius);
    },
    // 搜索成功回调
    roundlistpoisuccess (e) {
      if (!e) {
        return
      }
      this.poiList = []
      this.isbool = true
      // this.count = e.poiList.count
      this.poiList = this.poiList.concat(e.regeocode.pois)
      // console.log('当前搜索结果列表', this.poiList)
      for (let i = 0; i < this.poiList.length; i++) {
        this.poiList[i].country = e.regeocode.addressComponent.country
        this.poiList[i].province = e.regeocode.addressComponent.province
        this.poiList[i].city = e.regeocode.addressComponent.city
        this.poiList[i].district = e.regeocode.addressComponent.district
        this.poiList[i].towncode = e.regeocode.addressComponent.towncode
        this.poiList[i].township = e.regeocode.addressComponent.township
      }
      // console.log('当前搜索结果列表', e)
    },
    // 滑动
    scrollBottom (e) {
      let fromTheBottom = e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight)
      // console.log(fromTheBottom)

      if (fromTheBottom <= 100 && this.isbool) {
        this.isbool = false
        let length = this.poiList.length
        let num = this.count / length
        this.pagenumber = this.pagenumber + 1
        if (num > 1) {
          this.searchLocationFj()
        }
      }
    }
  },
  ready () {
    this.$nextTick(() => {
     // this.initSearchMain()
      //this.searchLocationFj()
    })
  },
  watch: {
    'rimlocation': function (newValue, oldValue) {
      if (this.rimlocation && this.placeSearch) {
        this.poiList = []
        this.pagenumber = 1
        this.searchLocationFj()
        console.log('当前传入地址', this.locationAddress)
      } else {
        if (!this.placeSearch) {
          this.initSearchMain()
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.listsMap {
  overflow-y: auto;

  .item {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    border-bottom: 1px solid #eee;
    width: 100%;

    .svg {
      padding-right: 5px;
    }

    .address {
      font-size: 14px;
      color: #999999;
    }
  }
}

.one {
  color: #df2424;
}

</style>
