<template>
  <div class="search-result-container">
    <div class="item" v-for="(item,index) in results" :key="index" @click="toPosition(item)">
      <div class="item-name">
        <span>{{item.name}}</span><span style="font-size:12px;">&nbsp;({{item.address}})</span>
      </div>
      <span style="float:right;">
        <img src="/images/map/nav.png" width="20px" alt="">
      </span>
    </div>
    <!-- <div class="pagenation">
        &lt;
        &nbsp;
       第1页 
       &nbsp;
       &gt;
    </div> -->
  </div>
</template>
<script>
export default {
  name:"SearchResultContainer",
  props:['searchKeyWord'],
  data(){
    return {
      results:[]
    }
  },
  watch:{
    searchKeyWord:function(e){
      
      this.$axios.get(
        "http://api.tianditu.gov.cn/v2/search",
        {
          params:{
            postStr:`{"keyWord":"${e}","level":12,"mapBound":"117.278042,35.35744,117.889753,35.744603","queryType":1,"start":0,"count":10}`,
            type:"query",
            tk:"90d6205af98eba888bedac201220e38c",
          }
        }
      ).then(res=>{
        this.results = [];
        if(res.data.pois){
          res.data.pois.forEach((item)=>{
            this.results.push({
              name:item.name,
              address:item.address,
              lonlat:item.lonlat,
            })
          })
        }
      })

    }
  },
  created(){

    

  },
  methods:{
    toPosition(info){
      this.$emit("toPosition",info);
    }
  }
}
</script>
<style scoped>
.search-result-container{
  width:100%;
  min-height:240px;
  height:442px;
  opacity: 0.78;
  background: rgba(6,16,64,0.9);
  border-radius: 8px;
  box-shadow: 0px 0px 32px inset rgba(0,157,255,0.7);
  padding:20px 0px;
}

.item{
  width: calc( 100% - 50px);
  margin:0px 15px;
  padding:0px 10px;
  height:40px;
  border-bottom:1px solid #0a4484;
  line-height:40px;
  font-size:14px;
  color:#fff;
}
.item-name{
  width:240px;
  height:40px;
  overflow: hidden;
  float:left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item:hover{
  cursor:pointer;
  color:rgba(0,157,255,1);
}
.item img{
  position:relative;
  top:5px;
}
.pagenation{
  position:absolute;
  bottom:00px;
  height:30px;
  width:100%;
  color:#fff;
  text-align:center;
  line-height:30px;
}
</style>