<template>
  <div class="search-container">
    <div class="searchType">
      <el-select v-model="searchType" placeholder="搜索类型" size="small" style="width:100px;" @change="searchTypeChange" popper-class="blueBack">
        <el-option :label="'地名搜索'" :value="1" />
        <el-option :label="'以人找地'" :value="2" />
      </el-select>
    </div>
    <div style="flaot:left;" class="searchInput">
      <el-input
      v-model="input3"
      placeholder="请输入搜索名称"
      class="input-with-select"
      size="small"
      @keyup.enter ="mapsearch"
      
    ></el-input>

    </div>
    <div class="searchBtn" style="flaot:left;" @click="mapsearch" >
      <el-icon style="vertical-align: middle">
        <Search />
      </el-icon>
    </div>
 

    <div class="search-result" v-if="searchResult.length>0">
      <div class="list" v-for="(item,index) in searchResult" :key="index" @click="toPosition(1,item)">
        <span style="font-size:14px;margin-left:8px;">{{item.name}}</span>
        <span style="font-size:12px;margin-left:12px;">{{item.address}}</span>
      </div>
    </div>

    <div class="search-result" v-if="searchPeoListResult.length>0">
      <div class="list flex fz-14" v-for="(item,index) in searchPeoListResult" :key="index" @click="toPosition(2,item)">
        <span style="width: 25%;" class="ta-c">{{item.name}}</span>
        <span style="width: 45%;">{{item.passIdCard}}</span>
        <span class="flex-1">{{item.areaName}}</span>
      </div>
    </div>
  </div>

</template>
<script>
import axios from 'axios'
import {TDT_KEY} from '../../../../public/config/server.js'
import { getMethodCommonCity, postMethodCommonCity } from '../../../api/cityManageApi';
export default {
  name:"MapSearch",
  data(){
    return {
      select:"地名搜索",
      input3:null,
      searchResult:[],
      searchPeoListResult:[],
      searchType:1,
    }
  },
  created(){

  },
  watch:{
    input3:function(e){
      if(this.input3 == null || this.input3 == ""){
        this.$emit("delPointEntity")
      }
    }
  },
  mounted(){

  },
  methods:{
    searchTypeChange(){
      this.input3 = null;
      if(this.searchType == 2){
        this.searchResult = [];
      }else{
        this.searchPeoListResult = []
      }
    },
    mapsearch(){
      if(this.searchType == 1){
        if(!this.input3){
          return
        }
        this.searchPeoListResult = []
        let searchinfo = {
          keyWord:this.input3,
          level:12,
          mapBound:"117.627645,34.392462,119.02584,36.217225",
          // specify:"371300",
          queryType: 7,
          count:10,
          start:0,
        }
        let query = JSON.stringify(searchinfo);
        query=query+"&type=query&tk="+TDT_KEY;
        let _this = this;
        axios({
          method: 'get',
          url: 'http://api.tianditu.gov.cn/v2/search?postStr='+query,
        }).then(res=>{
          _this.searchResult = res.data.pois;
        }).catch(error=>{})
      }else if(this.searchType == 2){
        let _this = this;
        getMethodCommonCity("/Agro_Screen/LoadPersonByName",{name:this.input3}).then(res =>{
     
          res.data.forEach(item =>{
            const passCard = item.idCard;
            const reg = /(\d{6})\d{8}(\d{4})/;
            let result = passCard.replace(reg,"$1******$2");
            item.passIdCard = result

          })
          _this.searchPeoListResult = res.data
        })
        // this.searchResult = [];
        // this.toPosition(2,this.input3);
      }
    },
    toPosition(type,item){
      if(type == 1){
        this.searchResult = [];
        this.$emit("addressInfo",{type:1,val:item});
      }else if(type == 2){
        this.searchPeoListResult = [];
        this.$emit("addressInfo",{type:2,val:item});
      }
    }
  }
}
</script>

<style lang="scss" scoped >
.search-container{
  width:330px;
  height:34px;
  background:url(/images/cim/leftbg.png);
  border:1px solid #409eff;
  border-top:0px;
  border-right:0px;
  border-left: 0px;
  background-size:100%;
  position: relative;
  z-index:10;
  top: 165px !important;
}
.input-with-select{
  width:180px;
  box-shadow: none;
  border:0px;
}
.search-result{
  width:378px;
  position:absolute;
  top:40px;
  left:0px;
  background:rgba(64,158,255,0.2);
  max-height: 450px;
  overflow: auto
}
.search-result .list{
  width:378px;
  height:40px;
  color:#fff;
  text-align: left;
  overflow: hidden;
  line-height:40px;
}
.search-result .list:hover{
  background:rgba(0,0,0,0.1);
  cursor:pointer;
  color:#409eff;
}
::v-deep  .el-input__wrapper{
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
}
::v-deep .el-input__inner{
  background:rgba(0,0,0,0.1);
  color:#fff;
  border-radius: 0px;
  text-align: left;
  height:32px;
  border-color:#409eff;
  border-right:0px;
  border:none;
  box-shadow: none;
}
::v-deep .el-select .el-input.is-focus .el-input__wrapper{
  box-shadow: none !important;
}
::v-deep .el-select .el-input__wrapper.is-focus{
  box-shadow: none !important;
}
.searchInput{
  width:180px;
  height:32px;
  float:left;
}
.searchType{
  width:100px;
  height:32px;
  float:left;
}
.searchBtn{
  width:48px;
  height:32px;
  float:left;
  // border:1px solid #409eff;
  border-left:0px;
  color:#fff;
  line-height: 32px;
  cursor:pointer;
}

</style>